Remaining solutions:

Responding to the unknown

The Choose Your Own Adventure approach to selecting a responsive images technique.

Created or know of a solution worthy of inclusion? Please get in touch or contribute on GitHub.

Extra markup

This issue is really one of practicality and can be especially important if there is significant archive content or unskilled users will be managing the site.

Key considerations

  • Would it be impractical to update existing <img> tags?
  • Do the content producers have the technical ability to implement and maintain specific markup?
  • Is extra markup okay if the technique or site design is changed in the future?
  • What are the accessibility implications?

Most techniques for implementing responsive images utilse some kind of specific markup in or around each image tag. This can be anything from additional attributes on the <img> tag itself to completely custom and non-standard markup which only uses an <img> tag as a fallback.

Relying on specific markup can be problematic for a variety of reasons.

Legacy content

If there is a large amount of legacy content, going back and implementing the new responsive technique around all images may be a non-trivial exercise. Even if there is a large amount of legacy content, it may not be important that it gets updated. Maybe the majority of visitors to the site only see content and ignoring archived content is a compromise worth making.

Future content

Another important consideration is future content. Many sites are managed by non-technical users and ensuring that each image tag has the required specific markup might not be possible. Maybe the site's CMS has a WYSIWYG editor which authors use to insert images; can it be adapted to ensure that every image is inserted with the required markup?

Future design

If the site's design is updated in the future, will the additional markup for each image be problematic?

Is it okay to have extra, specific markup to make an image responsive?

Extra markup

Attributes

Some techniques use extra attributes on the image tag. These are usually data-xx="" attributes or something designed to mimic future standards proposals like srcset.

The techniques that work this way usually also require javascript.

Are extra attributes on the <img> tag okay?

Extra markup

<noscript>

Many of the javascript based techniques utilise the <noscript> tag to implement a fallback for when javascript isn't available.

Some techniques use <noscript> to avoid unwanted image requests.

Is it okay to rely on a <noscript> tag for fallback content?

Extra markup

Specific markup

Some techniques require specific markup around images. This can be anything from a set of nested <div> elements with specific data attributes to the use of completely non-standard markup such as the proposed picture element.

Is completely custom markup okay?

Extra markup

Non-standard

Some techniques rely on markup that won't validate using the W3C Markup Validation Service.

Validation can be a useful tool, but remember that it's just a tool. Don't let it get in the way of a better user experience.

Is it okay if the markup doesn't validate?

Art direction

Difference between an art directed image and a non-art directed image.

Art direction can be very important on some images in some contexts. The two most common techniques used when resizing an image for display on smaller screens are to simply resize the image to fit, or to crop/zoom the image using the centre as the focal point.

The meaning of an image can easily be lost with these simple techniques. By simply resizing an image to fit a small screen important details may become impossible to discern. Similarly by assuming the centre of the image should be the focal point when automatically cropping and zooming an image, the real focal point may be completely lost.

Very few of the responsive image techniques allow for crop/zoom art direction. While it's not a responsive images solution by itself, it may be worth investigating focal point, a pure html/css technique for implementing crop/zoom art direction on responsive sites.

Is the ability to art direct responsive images important?

Javascript

Most of the techniques require at least some javascript and most also provide a reasonable fallback for users without javascript.

Key considerations

  • We're close to the point where users without javascript should be considered an edge case.
  • There may be accessibility implications.

Is it okay to use javascript?

Library dependency

A couple of the techniques have the jQuery library as a dependency.

If the site doesn't already use jQuery other techniques may be a better option.

jQuery is a big dependency. Depending on the specifics of the implementation, it may or may not be better to avoid adding jQuery just for responsive images. The key factors will be initial page weight added by jQuery and how much download is likely to be saved due to the responsive image technique.

Is it okay to have jQuery as a dependency?

Server side components

Some of the techniques are implemented or partially implemented using server side technologies like .htaccess files or PHP.

Key considerations

  • Is it possible to change the server side technology?
  • Is there time to port the server side component to the technology used by the site?
  • Is it possible to implement custom functionality to the CMS?

There are a wide variety of considerations here, and this tool doesn't break down the techniques by server technology. Most of the techniques included are Apache / PHP based solutions.

It's almost certainly possible to port the server side portion of each techniques to another server technology.

Is the use of server side technologies okay?

Third-party service

Relying on a third-party service means having a little less control over uptime.

It may be difficult or impossible to implement a reliable fallback for when the service goes down. And it will go down.

Is it okay to rely on a third-party service?

Loading additional images

Some of the techniques can result in double requests for images.

Double requests will increase page weight and load time (typically for users with higher resolution screens).

These techniques typically work by starting with a default (low-resolution) image and using javascript to swap in a higher resolution where appropriate.

Some techniques use an 1px × 1px transparent GIF as the default image which minimises additional requests and page weight. If semantics are important, this method may be problematic.

Is it okay if double requests are made?

Bandwidth testing

Some of the techniques offer the ability to test the available bandwidth so even if the viewer has a slow connection smaller images will be used even if their device has a high resolution display.

Key considerations

  • There may be little advantage to this for sites with relatively few images per page.
  • Accuracy may be low.

Half the battle i

Being responsive isn't just about screen resolutions. Network conditions are also an important factor and especially so when dealing with weighty assets like images.

There are no native tools available for testing network conditions. Javascript is apparently getting a network API, but for now the only solution is to roll your own, which is what some of the responsive images techniques do.

How it's done

Typically they work by downloading an asset of a known size and measuring the time taken to infer the available download speed.

There is an important trade off here between the size of the test asset and the accuracy of the result. The larger the test asset the less useful bandwidth testing becomes overall, but make it too small and the result becomes much less accurate.

Is bandwidth testing required?

Solutions

Picturefill

Picture fill is an open source project which mimics the proposed <picture> element, but uses <div> elements with specific data attributes.

Project Home | Demo

Adaptive Images

Adaptive images is a PHP / Apache based system which detects a visitors screen size and automatically creates, caches, and delivers device appropriate re-scaled versions site images.

Project Home & Demo

HiSRC

HiSRC is a jQuery plugin which will swap in an appropriate higher resolution image based on network conditions and screen resolution.

Project Home

padding-bottom

This is a technique invented for Aftonbladet, a major Swedish website. It combines a number of other known techniques to match a particular usecase. and suits high volume websites well.

Project Home | Demo

Responsive Images

This is one of the original techniques for implementing responsive images by Filament Group. It relies on a .htaccess file (and therefore Apache) for its magic.

Project Home | Demo

Responsive Images

Alternative

A variation on the Filament Group approach to reduce the required javascript.

Project Home | Demo

Foresight.js

A popular open source, javascript and custom markup based solution by Adam Bradley.

Project Home | Demo

src.sencha.io

A commercial offering from Sencha where all image requests are routed through a web service which detects the user's device and sends an appropriate image.

Documentation

Riloadr

An open source project from Tubal Martin.

Project Home | Examples

Responsive Enhance

A javascript function which can be selectively applied to image elements to swap in a higher resolution image if appropriate.

Project Home

rwdImages

A jQuery plugin which uses CSS media queries and javascript to display an appropriate image.

Project Home | Demo

Retina.js

Javascript and LESS helpers for rendering high-resolution image variants. This uses the @2x naming convention established by Apple or iOS app assets.

Project Home

Content Aware Resizing

A PHP / javascript based solution for serving automatically created and appropriately sized images.

Project Home

Doubletake

A proof of concept jQuery plugin which rewrites image source attributes based on regular expressions.

Project Home & Demo

Responsive Images Redux

A 'CSS only' solution which uses dummy images in the markup and CSS background images with media queries to serve the right image for the context.

Project Home | Demo

Responsive Images with PHP

Uses javascript to swap in an appropriately sized image which is automatically created with a PHP script.

Project Home | Demo

Responsive Image Tag

Utilises the <noscript> tag and javascript to insert images into the DOM after page load.

Project Home

Responsive Images Right Now

Uses CSS media queries and some custom markup to display an image with an appropriate resolution for the screen.

Project Home | Demo

WURFL Server Side Responsive Images

Uses device detection and a Java library to serve an image of the appropriate resolution for the detected device.

Project Home

Created by Simon Elvery. Most data from the Responsive Images Chart thanks to CSS Tricks. Contribute on GitHub.