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 :)
10 comments
Nicolas — Tue, 31 May 2011 09:01:05 GMT
Hi Yoav, thanks for sharing your idea.
But the technique I proposed wouldn't place any maintenance burden on the CSS because the alternative images are specified in the HTML. It's also backwards compatible, doesn't need you to use a specific filename pattern, and would rely on CSS that is already part of a specification.The drawback is that you'd have to include paths in data-* attributes and, like all these proposals, you end up with 2 HTTP requests if you are on a wide-screen device.P.S. My name is spelt 'Nicolas' :)
Robert Nyman — Tue, 31 May 2011 09:27:29 GMT
It's an interesting idea, although I believe having different parts of the file name split up into many places is a big risk for missing out on something.
My suggestion is in CSS, but that doesn't necessarily mean it has to be in a CSS file for those cases you mention: if it's very dynamic it could be in a style element in the head section.
Lobally — Sat, 03 Dec 2011 22:02:48 GMT
This is what i was looking for... otherwise i think i will need to do it by jquery
Anonymous — Fri, 21 Dec 2012 09:01:22 GMT
You would also have to support suffixes just to be fair and all image urls in CSS would not be lies because the real URL would be prefix + src + suffix, managing them would be a PITA.