Responsive Images Solutions - Adaptive Images

Written by Pranath Fernando on 1st April 2015

(Last updated 16th March 2016)

Introduction

In the previous episode in this series, we looked at an ambitious responsive image solution called Picturefill. In this episode, we are going to look at a solution with a very different approach and a more modest ambition to solve some but not all of the issues of concern - called Adaptive Images.

A word of warning: I will be assuming a degree of technical knowledge in this article as I will cover specific details of this solution. Despite this, I will attempt to explain the gist of this solutions in a non-technical way, so even if you are not initiated into the dark arts of coding but are still curious - do dive in.

Adaptive Images

This approach essentially uses the web server to return appropriately sized images for the web pages you look at on your particular device - using some clever logic and the power of the web server. In contrast to Picturefill and the <picture> element which requires you to change the markup for every image on your site - Adaptive Images requires no such changes and thus is very easy to add to most existing websites, and equally quick to remove.

The required files can be accessed via a GitHub Repository. A working example can be seen here on the Adaptive Images main website - try loading the page on different devices !

You will require the following to implement this method:

  • One line of Javascript to be added to the head of your site (to save the device width)
  • An .htaccess file (to direct requests for images to a php script)
  • The adaptiveimages.php file (to process image requests)
  • Modifying the $resolutions variable in the adaptiveimages.php file to set your desired resolutions

The method basically works in 3 stages. Firstly, your web page loads in the browser - just before this happens a snippet of javascript is loaded which saves the devices screen size into a cookie.

Next, the browser loads the web page - when it encounters an <img> tag the browser makes a request to the server to get the image as per normal. At this point - the request is intercepted by the web server using an apache mod rewrite rule (in a .htaccess file) and the request for the image is passed onto a special Adaptive Images php script.

The Adaptive Images PHP script determines what size device is making the request, using the cookie stored earlier. It then compares this size to pre-configured screen resolutions and finds the best match, and then checks a cache folder to see if a file of this resolution has already been made for this image. If its found it is returned as the requested image. If it does not exist the script finds the original full size image, creates a scaled down version for the desired size, stores this in the cache folder, and then returns this as the requested image.

In addition the method also allows configuration for high resolution displays (i.e. retina) to enable you to serve up high DPI images to these displays, it prevents incorrect caching by browsers/proxies by returning appropriate cache headers for the image, and has a fallback behaviour if cookies can’t be set (using the user agent string) to return a smaller image to a smaller device - and vice versa.

As an example of potential gain of this method, on the Adaptive Images site example for the first image ‘Creepy Lane’ the file sizes returned are as follows:

Creepy Lane Image - Desktop (1382px x 778px) - 200kb
Creepy Lane Image - Mobile (480px x 271px) - 30kb

In this example, the mobile version of the image returned is 85% smaller than the desktop image resulting in an image thats far quicker to load and of a more appropriate size for the device being used.

Pros:

  • Addresses the performance issue
  • Addresses the screen resolution issue
  • Quick to add, quick to remove
  • No ongoing maintenance issues required for images once set up
  • Ideal for legacy sites, big sites with many images or sites where its difficult to make radical changes to the markup
  • Returns appropriate headers to support correct image caching
  • Good fallback behaviour when js disabled
  • Excellent cross browser support
  • Support for high resolution (i.e. retina) displays to enable return of high DPI images when appropriate

Cons:

  • Does not address the art direction issue
  • Requires PHP being on web server
  • Does not work with sites made using CDN’s (content delivery networks)
  • Not really a long term solution as not compatible with CDN’s and relies on ‘tricks’ rather than better native support e.g. more suitable markup, better information from the browser about the user environment, etc.

Conclusion

Adaptive images could be an attractive solution for delivering responsive images on many different types of websites. While it has many limitations such as not addressing the art direction issue, and not really being a long term solution - what it does do it does extremely well. Addressing the performance and resolution issues, while also being very quick and easy to add or remove on most websites however complex are two of it’s top trump cards. In addition, the good non-js fallback behaviour and wide cross browser support are nothing to be sniffed at, especially compared to other responsive image solutions currently available.

Update 16th March 2016

Adaptive images continues to be written about and suggested as a responsive image solution in vaious blogs and sites. For example, on a blog on the typo3 cms (which is the main cms of choice for us as it happens) adaptive images is highlighted as a potentially good solution that can be added on easily to the cms (and in fact, most cms's or websites).

typo3worx.eu/2016/03/responsive-images-on-typo3-websites/

References & Further Reading

Main website for Adaptive Images

Includes documentation & downloads for the solution.

Main site for Squeezer

Squeezer is an approach for minimising bandwidth usage inspired by Adaptive Images

Article discussing merits of Adaptive Images approach

Mostly pro article, so does not highlight main weaknesses of this approach !

by Pranath Fernando

  • Pranath Fernando

    Pranath Fernando

    Pranath is our Senior Back-end developer who knows the deepest, darkest secrets of our CMS of choice - Typo3. In his free time he is a keen student of Data Science and Artificial Intelligence, and likes to balance the mind and body doing plenty of hot yoga, freediving, and SUP. Find him on LinkedIn.