Responsive Images – 6 Techniques

| 2 Comments

Responsive ImagesWeb sites are stuffed with images. Images, which are viewed on large computer monitors, tablets, and tiny mobile phones. However, it quickly gets very expensive to download large images meant for computer monitors on the tiny mobile display via a 3G connection.

Some smart people have given this problem a lot of thought. Thus, today there exist a number of responsive solutions, which try to “sniff” their way to the screen sizes of the users’ devices in order to display the large, hi-res, and heavy images on desktop monitors only but settle with small, light weight images on mobile displays.

Here are 6 different takes on Responsive Images.

1. Picturefill

A little history: In November 2011, Bruce Lawson got frustrated over the lack of standards for marking up adaptive images. Therefore, he proposed to re-use the syntax of the HTML5 <video> element in the form of a <picture> element. The <picture> element makes it possible to define multiple image sources. By using media queries you can then control under which circumstances an images should be displayed to the user.

The <picture> element is still on the drawing board, unsupported in all browsers, and therefore as of yet unusable.

However, Scott Jehl thought it was such a good idea, that he made the polyfill, Picturefill, which makes a similar syntax work with JavaScript:

<div data-picture="" data-alt="">
	<div data-src="small.jpg"></div>
	<div data-src="medium.jpg" data-media="(min-width: 400px)"></div>
	<div data-src="large.jpg" data-media="(min-width: 800px)"></div>
	<div data-src="extralarge.jpg" data-media="(min-width: 1000px)"></div>
	<!-- Fallback content for non-JS browsers -->
	<noscript>
		<img src="small.jpg" alt="">
	</noscript>
</div>

Advantages: Lightweight, easy implementation of the script.
Drawbacks: Requires a great deal of extra mark up, which makes it hard to implement retrospectively on existing content.
Demo: http://scottjehl.github.io/picturefill/
Download & documentation: https://github.com/scottjehl/picturefill

2. HiSRC

HiSRC is a jQuery plugin for adaptive images, written by Christopher Schmitt. It tries to take into account the screen size as well as the bandwidth. Images are placed in the HTML document with the usual <img> tag and alternative image sources are then defined with data attributes:

<div class="hisrc">
	<img alt="" src="small.jpg" data-1x="medium.jpg" data-2x="large.jpg" />
</div>

Advantages: Clean and semantically valid code, lightweight.
Drawbacks: Requires extra mark up and data attributes on the <img> element, which makes it hard to implement on existing content.
Download & documentation: https://github.com/teleject/hisrc

3. Responsive-Enhance

Responsive Enhance is a tiny JavaScript, written by Josh Emerson. The script works on <img> elements together with data attributes:

<img id="demo" src="medium.jpg" alt="" data-fullsrc="large.jpg">
<script>responsiveEnhance(document.getElementById('demo'), 400);</script>

Advantages: Clean and semantically valid code, lightweight.
Drawbacks: Requires extra mark up and data attributes on the <img> element, which makes it hard to implement on existing content. Downloads 2 images on large displays.
Download & documentation: https://github.com/joshje/Responsive-Enhance

4. Adaptive Images

Adaptive Images is primarily a server-side technique, which “sniffs” the users’ screen size and automatically scales, caches and provides appropriate versions of the websites’ images. It does so by using .htaccess, a php file and a single line of JavaScript, completely without editing any existing markup. Adaptive Images is written by Matt Wilcox.

Advantages: Clean and semantically valid code, easy to implement on existing content.
Drawbacks: Sets a cookie in the user’s browser, requires server-side setup; Apache, PHP and .htaccess.
Demo, download & documentation: http://adaptive-images.com/

5. Compressive Images (my favorite)

More details, fewer kilobytes: This technique is about providing only one version af the image to the user regardless of screen size, but in return compressing it heavily. Daan Jobsis has made experiments which show a very limited loss of quality (sometimes even an improvement), when large, heavily compressed images are squeezed together in just half of their original dimensions. See also Filament Group’s post on the same subject.

Example: A .jpg with the dimensions 1280 × 1024 pixels is squeezed down to 640 × 512 pixels or less.

Practically, you will set the image sizes in CSS with max-width: 100%; (The Fluid Images technique).

Low res 301 × 200 pixels,
jpeg quality 80%, 34kb.
Hi res 602 × 400 pixels,
jpeg quality 25%, 27kb.
Asger - Law res, non responsive images Asger - Hi res responsive images

In other words, you are not able to see the compression. This method is my favorite so far, because it is so incredibly simple.

Advantages: Very simple. In some cases even better results. Perfect for retina-displays. Small file sizes.
Drawbacks: Implementing in a CMS requires setting up some image compression on the server.
Demo & documentation: http://blog.netvlies.nl/design-interactie/retina-revolution/

6. Responsive Images Clown Car (SVG embedding)

Rather experimental: The Clown Car technique is developed by Estelle Weyl and is about taking advantage of the possibilities in the SVG format. The reference to the SVG file is placed in the usual <img> element:

<img src="image.svg" alt="responsive image">

It is in the SVG file the magic is happening. The technique is based on the fact, that SVG already supports both bitmap graphics and media queries:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 329" preserveAspectRatio="xMidYMid meet">
 <title>Clown Car Technique</title>
 <style> 
  svg {
    background-size: 100% 100%;
    background-repeat: no-repeat;
  } 
 @media screen and (max-width: 400px) {
  svg {background-image: url(images/small.png");}
 } 
 @media screen and (min-width: 401px) and (max-width: 700px) {
  svg {background-image: url(images/medium.png);}
 } 
 @media screen and (min-width: 701px) and (max-width: 1000px) {
  svg {background-image: url(images/big.png);}
 } 
 @media screen and (min-width: 1001px) {
  svg {background-image: url(images/huge.png);}
 }
 </style>
</svg>

Advantages: Media queries are baked in to SVG, SVG supports bitmap graphics. Only the necessary image is downloaded. All logic lies inside the SVG image.
Drawbacks: SVG is unsupported in IE8. Import of external bitmap images are blocked by the Content Security Policy of most browsers.
Demo: http://estelle.github.io/clowncar/bgonly.html
Documentation: http://www.standardista.com/responsive-images-clown-car-technique/

Author: Morten Brunbjerg Bech

Webdesigner, front end udvikler og bibliotekar. Arbejder primært med udvikling og design af Horsens Kommunes Bibliotekers webløsninger og er specialist i semantisk strukturering af webdokumenter samt Adobe Photoshop og Illustrator.

2 Comments

  1. Great article only small thing I would have to say that something like HiSRC also has dependency on jQuery which can be a con if you are not using jQuery to begin with.

Leave a Reply