Adaptive and context-aware images

Posted on by

Last update : July 1, 2014

Each image has an innate, original height and width that can be derived from the image data. This derived height and width information is content, not layout, and should therefore be rendered as HTML <img> element attributes. To override height and width for adaptive images, CSS is the best approach.

Context-aware images in responsive web design are created by declaring a 100% width in CSS :

img {width : 100%}

Modern browsers keep the image’s proportions intact. To render a context-aware image at its native dimensions and to resize it only if it exceeds the width of its container, the classic solution is the CSS code :

img {max-width :100%}

But scaling down images is not sufficient. Sending huge image files to low-performance devices with narrow screens is not very clever. The early HTML image tags had a lowscr attribute which is no longer supported by modern browsers.

Sending the right-sized image to devices without wasting bandwith is one of the challenges in responsive web design. The main problem is that the HTML img tag has only one source attribute today.

The different techniques proposed in the recent past by the pioneers of context-aware images, listed at the end of this post, can be grouped as follows :

  1. client-side current technology solutions
  2. server-side current technology solutions
  3. standardized future-technology solutions

Client-side current technology solutions :

  • CSS with background-images controlled by media-queries : Harry Roberts
  • dirty script to load temporary images and altering the image source path before handing it to the DOM parsing (1×1 pixel transparent GIF and <noscript> tag) : Jake Archibald, (Mairead Buchan, Antti Peisa, Vasilis van Gemert)
  • dynamic modification of the base tag : Scott Jehl
  • CCS3 content & attr() : Nicolas Gallagher

Server-side current technology solutions :

  • php-script dealing with AJAX requests : James Fairhurst
  • php-script dealing with image arrays : Craig Russel
  • php-script dealing with cookies : Matt Wilcox, Keith Clark, Scott Jehl, (Mark Perkins, Andy Hume)
  • service to resize images – tinySCR, now Sencha.io.SCR : James Pearce, (Graham Bird, Andrea Trasatti)
  • service to adapt mobile content to cell-phones with Opera Mini pre-installed : Opera Software ASA

Standardized future-technology solutions :

  • new html attribute pointing to a list of sources : Dominique Hazael-Massieux, Anselm Hannemann
  • new picture tag : Bruce Lawson, Jake Archibald, Nicolas Gallagher
  • progressive resolution-enhanced streaming images
  • new HTTP headers for content negotiation

Problems :

“Starting with small images for mobiles and upgrade to large images for desktops, without loading both and working with all browsers” is the goal of responsive design with context-aware images. Until now there is no solution that meets this objectif.

The common problems are listed below :

  • dynamic image tags : double downloads with external scripts ; race problems with internal scripts in some browsers ; inconsistencies when diffrent scripts change the base tag
  • temporary image : without javascript the image never loads
  • noscript tag : some browsers cannot manipulate the noscript tag
  • CSS generated content : only supported in Opera10+
  • cookies : no effect when cookies are disabled
  • same URL :  caching fails
  • php scripts : CDN routing not possible
  • device detection : not reliable for all browsers

Some pioneers in the field of “adaptive images” are presented hereafter :

Scripts, programs and tools :

Contributions to W3C and drafts by W3C :

Blogs :

more contributors :