I was tempted to call this blog post “Responsive Images is Fool’s Gold”, just like Jason Grigsby did but for Media Queries for mobile a while back. That post created a lot of buzz of course. The Responsive Images specification deserve some debate too because, just like when media queries for mobile was a hype, this is not the silver bullet.
First, there are many good things about respimg and I am glad it is now arriving in browsers! The use cases are all valid and finally being able to address these without a third party JavaScript hack is just awesome! Also awesome that we don’t have to worry about the pre-loader downloading too many images. And not to forget the even more awesome art-direction support with the brand new element!
But that is it. That’s about all respimg can do. What we used to use JavaScript for is now a native part of the web browser. The rest is up to the developers and web editors.
Still, these issues will need to be addressed:
Optimized images
respimg will not fix your images. They may still be way heavier than they need. (Read my post on how images can be fixed server side)
How many versions of an image are needed to cover “critical mass” of screens?
One thing is for sure: you will still serve less optimal images to certain veiwport sizes even with respimg. Brad Frost has made up his mind. However, every site has it’s own mix of sizes. There is not one single best practice here.
Content Management Systems
It is quite a task to build the flexibility that respimg offers into a content management system. On top of that the web editor has to learn how to use it. This is a value chain issue which also holds RWD back.
I clearly see the same hype we had when media queries for mobile was new. Now we know that, to some extent, it was fool’s gold. One of the high hopes for respimg is that it will reduce data traffic for devices with small screens, such as mobile devices. To be honest, I am not sure that the impact of respimg will be noticeable in that regard. However, I am sure we will get more high DPI images served for devices supporting that.
I think this tweet explain the issue nicely:
Web designers getting the retina iMac with increase the average weight of a web page 300K, minimum
— Joshua Benton (@jbenton) October 16, 2014