Responsive Images — Which approach to follow?

Responsive Images — Which approach to follow?

31Jul 2012

The challenge to serve images for multiple devices is still in big discussion. There is no standard yet which defines how we as developers and users can deliver different image sizes on-demand for different user clients. With Javascript? Only with mark-up? Mix both? Pure CSS?

The blog post of A List Apart Mat Marquis discusses different approaches to implement responsive images for responsive websites.

1. The Image Attribute way

Add attributes which include fallback image paths for different image sizes.

           
       

2. The HTML element thinking

Add new elements which are rendered depending on the browser resolution


        
        
        
        

3. The server client side brain

There are scripts and tools on the web like adaptive images and sencha which provide you a mix of server side and JavaScript solution.

For Drupal, I found the responsive image module which takes the adaptive images approach. I watched the online video tutorial and the first thought was “ewww, not simple enough”.

You know JPEG2000?

So after hours of reading and research I remember back to my student time when we worked on a project to automate image quality analysis. There is the image file format JPEG2000 and you know what the specification says?

“Very low and very high compression rates are supported in JPEG 2000. The ability of the design to handle a very large range of effective bit rates is one of the strengths of JPEG2000. For example, to reduce the number of bits for a picture below a certain amount, the advisable thing to do with the first JPEG standard is to reduce the resolution of the input image before encoding it. That is unnecessary when using JPEG 2000, because JPEG2000 already does this automatically through its multiresolution decomposition structure.” (wikipedia)

While writing this post I searched for any other sources which considers JPEG2000 as a solution. But unfortunately browsers don’t support them yet.

Considering that the same image, compressed with JPEG2000, has a smaller file size but with a higher quality than JPEG, this would solve the responsive image problem. As a developer you don’t need to care about it any longer. The publisher just uploads a JPEG2000 image and done! No big hassle.

So what do we need to make our life simpler? Browsers need to support JPEG2000 without using plugins Servers need to support JPIP protocol to stream the JPEG2000 format

To be realistic we still need a transition time where we have to struggle with above mentioned approaches. For me, I favor the HTML attribute idea. The mark-up is simple however we need to answer the question “How can we implement a simple solution which allows a content author to upload different versions of an image with very little configurations?”

I imagine this workflow < /br> workflow to create responsive images Advantage:

The content author has not to worry about whether the image fits into the content (region, block etc) as all the configuration comes from the theme settings and CSS. And it won’t be only “resized” but will load on default the small image first and depending on the view-port, the browser will load the appropriate image.

Disadvantage:

In case the layout and theme settings of a running website changes, all images needs to be re-updated and re-generated to fit to the new dimensions. However I think this is not a big issue, this can be done on the technical site. Like “update images” and all images will be retrieved in a batch process.

Which responsive image approach do you use? What do you prefer?

Blog type: