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?