The Problem With Responsive Images
Don’t expect me to bore you with lengthy and elaborate descriptions of fundamental dimensions. If you actually are a web designer you know fairly well about the obstacles on your way to a fully responsive website. So, let’s keep this introductory short and crisp. Thinking about responsive imagery brings up the following problems (and then some, but these are the most important):
- It does not make sense to serve a small resolution display the same pixel-monster suitable for large WQHD displays. The other way around is even less sensible. We should always serve the appropriate images in the appropriate sizes and resolutions to the respectively appropriate display size.
- It has not proven reasonable to work with high compression ratios to at least lower bandwidth usage if not save on image dimensions.
- The IMG element has been there since forever. Thus, browsers of all ages work reliably with that element. Even more so, they have been equipped with functions such as prefetching, predictive prefetching even, and other techniques that make it harder for us to simply reliably exchange an IMG via its SRC attribute. Using the SRC attribute leads to multiple requests, thus harming the user experience for some. Generally, omitting the SRC attribute would be a good way to handle images. Yet, this is out of the specification.
- Oftentimes it is not reasonable to only show a large image smaller on smaller displays, instead change the image section and show a larger part of, but not the full image. This approach is known as “art direction” and the biggest argument against the SRCSET attribute, as it is not able to support that behavior while PICTURE is.
rwd.images.js: Best Way to Bridge the Wait for the Picture Element?
rwd.images.js by Australian Matt Stow is a youngster with its age of a mere few days. Youth is an advantage in this case, though, as it allows the developer to react to the most recent state of the discussion on responsive images. And that’s what Matt did. He addresses the following major issues:
- His script needs no SRC attribute at the IMG element, instead hides it in a data attribute. That way, all the browser’s magical features are stopped from being executed. Multiple requests are done away with, too.
- Art direction is supported.
Furthermore rwd.images.js is able to calculate pixels to ems, support HiDPI while sticking to a naming convention and comes with a handful of other features. This is how the lean (less than 1.7 kb gzipped and minified) script looks in your source code. Be aware that this is a rather basic example. rwd.images.js is able to achieve more:
rwdimage triggers the script to the given image. All other parameters are transferred through the data attribute
data-rwdimage and its derivatives. Whatever you’d usually add to the stylesheet is done via this data attribute.
Though this is a more or less straightforward approach, it is not without criticism. Push fast forward a year or two and think about what work needs to be done should you decide to switch to the then probably established standard. Changing CSS styles is equally difficult as you’ll have to always do that inline instead of having a centralized stylesheet file control the looks of your project. On the other hand, be it Picture or be it Srcset, as soon as you want to make the switch, you’ll have to get your hands dirty anyway..
With that in mind, rwd.images.js can be called one of the most complete solutions to deal with responsive images to date. There are no further dependencies, so why not give it a shot and try for yourself?