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

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?

2 thoughts on “Responsive images approach”

  1. FWIW, Hixie’s original email about srcset talked about templates which are similar to what you propose here:

    There has been some discussion of reusing the defer attribute for responsive images which isn’t exactly what you propose with resp, but similar.

    Also, you need to address pixel densities as well or your proposed solution won’t go anywhere.

    Overall, I can see something like this working, but there have already been proposals to move breakpoints into the head which haven’t gone over well yet because the head is often inaccessible to web developers.

  2. Jason, I didn’t address pixel densities on purpose because android devices cheat on them on behalf of the users, so they are no reliable. But you could add them as a valid unit instead of pixels.

    I don’t know why developers would need access to the breakpoints, but that could be solved if the browser could communicate them as a variable of some form, it wouldn’t be much more work for browsers vendors.

Leave a Reply

Your email address will not be published. Required fields are marked *