blog

I came up with this title all by myself
The rest is stuff I got off the Internet

My take on adaptive images

Proposal flood

In the last few days there have been a lot of proposals regarding ways to load lower resolution images for lower resolution devices. There have been Nicolas Gallagher's Responsive images using CSS3, a proposal on the W3C list, and yesterday came Robert Nyman's proposal.

Obviously, I also have an opinion on the matter :)

My contribution to the flood

While the proposals from Nicolas & Robert are interesting, they throw a huge maintenance burden on the CSS, and make it practically uncacheable in many fast-updating pages. In a CNN-like scenario, where the images are changing every 1-2 hours, the CSS (or at least one CSS file) will have to change along with them, which is bad for performance, and basically means dynamically generated CSS. I think it is bad news.

I think we are much better off with something in the lines of:

img{
    src-prefix: "big_";
}
@media screen and (max-width: 600px){
    img{
        src-prefix: "small_";
    }
}
When an image defined as <img src="img.jpg"/> will be requested, it will be requested as "big_img.jpg" in devices that exceed 600px max-width, as "small_img.jpg" in devices that have lower resolution, and as "img.jpg" in browsers that do not support this new attribute.

To me this is a solution that has very small maintenance, keeps all changing image content in the HTML where it belongs, and has an inherit fallback.

Please leave a comment here or on twitter if you have some feedback on this.


Yoav


Update: As Nicolas Gallagher pointed out in the comments, his proposal does not put maintenance burden on the CSS. Extra URLs are written as data attributes in the HTML. I still think my proposal is better, though :)

Comments

blog comments powered by Disqus

Who?!?!

  • I'm Yoav Weiss.
  • I'm a developer.
  • I have a thing for web performance.
  • I live on a hill.
  • I have 3 small kids.
  • I don't sleep much.