Feb 07 2014

Responsive Images: Still Waiting for a Standard? Try Rwd.Images.Js Instead!

Advertisement

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…

html5-logo

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:

1
2
3
4
5
6
<img class="rwdimage" data-rwdimage="
    { src: url(/images/4-by-3.jpg); padding-bottom: ratio(3/4); },
    (min-width: 501px) { src: url(/images/16-by-9.jpg); padding-bottom: ratio(9/16); }
" />
 
<script src="/js/rwd.images.min.js"></script>

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?

Related Links

About the Author

Dieter Petereit is Noupe's Editor-In-Chief and a veteran of the web with over 25 years of experience in the world of IT. As soon as Netscape became available he started to do what already at that time was called webdesign and has carried on ever since. Almost a decade ago he started writing for several online publications, some well, some lesser known. Dieter is a heavy G-Plusser, so why not meet him over there?

Homepage

Comments and Discussions
  • Zadi Ankit, 08 February 2014

    Awesome Dieter, I am really impressed with the way this script works, I will be working this into my projects which use Responsive Design.
    Thanks for sharing.

  • Marlene, 08 February 2014

    Fine. Insightful

  • testshoot, 09 February 2014

    We are all twisting in the wind waiting for a browser solution to come along. I can see this script as useful for small sites, but I am trying to wrap my head around an enterprise solution that is CMS generated. :/

  • konrad bialy, 09 February 2014

    saw similar solution on Stack Overflow

  • Jaap, 09 February 2014

    Great blog and thank you for the tip!

  • Svenska, 09 February 2014

    What about crawlers with javascript disabled? Will they be able to craw those images?

  • David Kotler, 10 February 2014

    i agree. we need something that wordpress, joomla and the drupal communities will embrace and implement..

  • Moritz, 10 February 2014

    Great solution! I will try it out for my next web project.
    Best regards.

  • Alvaro Echeverria, 10 February 2014

    https://github.com/scottjehl/picturefill i sthe best solution recomended

  • Daniel McDonagh, 17 February 2014

    This Is Great THANKS!!!

Leave a Reply

Comments are moderated - and rel="nofollow" is in use. Please no link dropping, no keywords or domains as names; do not spam, and do not advertise!

comments form
search form
 
image description image description