Category: Web Development

Responsive images approach

There has been a lot of discussion of the best way to implement responsive images these days.

Jason Grisby points out another problem with the browser implementation of the image pre-fetch functionality. Or how the browser will be able to fetch the correct image if it doesn’t know the layout yet.

So I have a little idea I want to share.

What about defining our desired breakpoints on the html tag:

<html respbp="320,480,960,1000">

Then we just tell the browser what images need to be treated as responsive

<img src="photo-320.jpg" resp="yes" />

So when the browser try to pre-fetch the images, it knows our desired breakpoints, and it already knows our vieport size.

So we just need to name our responsive images as our breakpoints
photo-320.jpg
photo-480.jpg
photo-960.jpg
photo-1000-jpg

And as you see in my img tag I took a mobile first approach defining the 320 breackpoint as the default img. Of course this is much simple to code and deal than the other ideas with multiple sources or breakpoint defined in every image.

what do you think?

Browser secure areas

Securest sizes 1024 x 768
Operating System Full windows With Vertical Scroll
Width Height Width Height
Securest 1003 550 1003 550
Windows XP 1003 567 1003 567
Windows Vista 1003 577 1003 577
OS X 10.5 1024 550 1010 550
Securest sizes 1152 x 864
Operating System Full windows With Vertical Scroll
Width Height Width Height
Securest 1131 646 1003 646
Windows XP 1131 663 1131 663
Windows Vista 1131 663 1131 673
OS X 10.5 1152 646 1138 646
Securest sizes 1280 x 768
Operating System Full windows With Vertical Scroll
Width Height Width Height
Securest 1259 550 1259 550
Windows XP 1259 567 1259 567
Windows Vista 1259 577 1259 577
OS X 10.5 1280 550 1266 550
Securest sizes 1280 x 800
Operating System Full windows With Vertical Scroll
Width Height Width Height
Securest 1259 582 1259 582
Windows XP 1259 599 1259 599
Windows Vista 1259 609 1259 609
OS X 10.5 1280 582 1266 582
Securest sizes 1280 x 960
Operating System Full windows With Vertical Scroll
Width Height Width Height
Securest 1259 742 1259 742
Windows XP 1259 759 1259 759
Windows Vista 1259 769 1259 769
OS X 10.5 1280 742 1266 742
Securest sizes 1280 x 1024
Operating System Full windows With Vertical Scroll
Width Height Width Height
Securest 1259 806 1259 806
Windows XP 1259 823 1259 823
Windows Vista 1259 833 1259 833
OS X 10.5 1280 806 1266 806
Securest sizes 1366 x 768
Operating System Full windows With Vertical Scroll
Width Height Width Height
Securest 1345 550 1345 550
Windows XP 1345 567 1345 567
Windows Vista 1345 577 1345 577
OS X 10.5 1366 550 1352 550
Securest sizes 1440 x 900
Operating System Full windows With Vertical Scroll
Width Height Width Height
Securest 1419 682 1419 682
Windows XP 1419 699 1419 699
Windows Vista 1419 709 1419 709
OS X 10.5 1440 682 1426 682
Securest sizes 1600 x 900
Operating System Full windows With Vertical Scroll
Width Height Width Height
Securest 1579 682 1579 682
Windows XP 1579 699 1579 699
Windows Vista 1579 709 1579 709
OS X 10.5 1600 682 1586 682
Securest sizes 1600 x 1200
Operating System Full windows With Vertical Scroll
Width Height Width Height
Securest 1579 982 1579 982
Windows XP 1579 999 1579 999
Windows Vista 1579 1009 1579 1009
OS X 10.5 1600 982 1586 982
Securest sizes 1680 x 1050
Operating System Full windows With Vertical Scroll
Width Height Width Height
Securest 1659 832 1659 832
Windows XP 1659 849 1659 849
Windows Vista 1659 859 1659 859
OS X 10.5 1680 832 1666 832
Securest sizes 1920 x 1080
Operating System Full windows With Vertical Scroll
Width Height Width Height
Securest 1899 862 1899 862
Windows XP 1899 879 1899 879
Windows Vista 1899 889 1899 889
OS X 10.5 1920 862 1906 862
Securest sizes 1920 x 1200
Operating System Full windows With Vertical Scroll
Width Height Width Height
Securest 1899 982 1899 982
Windows XP 1899 999 1899 999
Windows Vista 1899 1009 1899 1009
OS X 10.5 1920 982 1186 982

How do we got this information

With fresh virtual machines Os and browsers installs, and without any addons or special skins, and with maximized windows, we measure all the avalaible areas with and without scroll bars. Here are the 1024 x 768 measures examples:

Windows XP
Browser Full windows With Vertical Scroll
Width Height Width Height
Secure 1003 567 1003 567
Internet explorer 6 1003 607 1003 607
Internet explorer 7 1003 619 1003 619
Internet explorer 8 1003 567 1003 567
Firefox 2 1024 575 1007 575
Firefox 3 1024 578 1007 578
Opera 9 1022 599 1006 599
Safari 4 1024 648 1006 648
Chrome 1024 647 1008 647
Windows Vista
Browser Full windows With Vertical Scroll
Width Height Width Height
Secure 1003 577 1003 577
Internet explorer 7 1003 622 1003 622
Internet explorer 8 1003 565 1003 595
Firefox 2 1024 577 1007 577
Firefox 3 1024 587 1007 587
Opera 9 1022 603 1006 603
Safari 4 1024 646 1008 646
Chrome 1024 650 1008 650
Mac OS x 10.5
Browser Full windows With Vertical Scroll
Width Height Width Height
Secure 1024 550 1010 550
Firefox 2 1024 555 1010 555
Firefox 3 1024 550 1010 550
Opera 9 1024 570 1010 568
Safari 3 1024 581 1010 581
Safari 4 1024 599 1010 599