Responsive Images is a topic far from resolved. Will it be the picture element as proposed by the W3C or will it be the srcset attribute as proposed by WHATWG in the end? No matter what time will bring, responsive images are a problem that needs to be solved today and not sometime in the future. No wonder that JavaScript is the remedy of choice. There are quite a few scripts targeting responsive imaging, quality varies though. A brand-new script by Matt Stow from Australia shows the potential to become the best available client-side interim solution…
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.
With JavaScript almost anything is possible. Unsurprisingly, the number of Javascripts for responsive images is relatively high. Most of these solutions don’t target all of the problematic issues though, and, as we all know, using JavaScript brings a bunch of its own problems to the game, too. One of the bigger problems: What about users with disabled JavaScript and what about situations where JavaScript breaks altogether, probably because of one of the half-dozen other third-party scripts? Remember to embed a NOSCRIPT just in case…
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.
- Noscript can be set to avoid issues with disabled or broken JavaScript.
- 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:
The class 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?