Responsive Images: Evaluating the performance of four responsive image techniques on an image-heavy responsive site

The Problem

Responsive websites need to be visually interesting to desktop users while keeping page weight low to accommodate slow wireless speeds on mobile devices. One of the largest factors in page-load times on mobile devices is the size of raster images on the page. Responsive sites often make mobile devices load larger images than they will ever display on their small screens.

I built several responsive, image-heavy pages using the same content but different methods for loading responsive images. These pages are listed in the navigation above. Using these pages I set out to answer three questions:

• Which method delivers the fastest page-load time on desktop and mobile?
• Does each method work for a wide range of devices, including older smartphones and older versions of Internet Explorer?
• Which method is the most practical to implement and maintain from a developer’s perspective?

Responsive Image Techniques

Browser Re-Sizing

The browser re-sizing method relies on the browser to re-size images by giving the images widths in relative units (such as percentages or ems). This method requires all devices to load the largest possible size of the image, but prevents the browser from having to load extra images or to process media queries.

CSS Media Queries

Media queries in the CSS can be used to display different assets for different screen sizes. This method has several drawbacks, the largest being that because browsers pre-load images before processing the CSS at all, if the image tags are in the HTML the browser actually loads all sizes of the images, while only displaying the image of the appropriate size. This has a major negative impact on page-load times.

I avoided this problem on the media query page for this project by loading the images as background images in the CSS rather than as regular images in the HTML. Burying the image urls themselves in the CSS prevents images from pre-loading unnessesarily, but it is not semantic.

HTML5 Picture Element

The picture element is an HTML5 element which contains a “source set” of several image files and rules about which image the browser should load and display based on window size and screen pixel density. This method is new and, as of this writing, has limited browser support.

Picturefill

Picturefill 2.0 is a JavaScript polyfill that allows you to use the <picture> element in browsers that don't yet natively support it. I built two Picturefill pages, a simple one (to make a fair comparison of page load time with the other methods) and a ‘2X’ page that serves up high-res images to pixel-dense screens.

Results

Fastest Load Times: Desktop Browsers

Method	Chrome	Firefox	IE10
Browser	3.750s	3.733s	5.448s
CSS	5.351s	2.808s	6.611s
HTML5	5.117s	1.510s (not supported, images fall back to low-res version, layout is broken)	2.937s (not supported, images fall back to low-res version, layout is broken)
Picturefill	5.359s	5.625s	6.607s
Picturefill 2x	5.511s	5.624s	6.674s

The browser re-sizing method has a somewhat unfair advantage at desktop size because of fewer http requests—each image is requested only once and then resized. Because on these particular pages the same image will appear in more than one size (large in the slideshow and smaller in the gallery below) the other methods are in most cases requesting an additional smaller image file for each picture. This is probably an uncommon scenario for featured images. With this taken into account, there is not generally a dramatic difference between the load times for each method on desktop.

Fastest Load Times: Mobile

Method	iPhone 4 iOS 5.1, Safari	Nexus 7, Chrome	iPhone 5 iOS8, Safari*	Galaxy Note 4, Android 4.4.4, Chrome*
Browser	19.635s	18.638s	3.37s	3.78s
CSS	9.777s	10.585s	1.59s	3.67s
HTML5	11.450s	9.536s	1.32s	1.98s
Picturefill	7.746s	11.790s	1.45s	1.65s
Picturefill 2x	24.369s	10.056s	1.59s	1.95s

The choice of responsive image technique has a much larger impact on page load time for mobile devices than it does for desktop.

Webpagetest (which was used to measure performance on the iPhone 4 and Nexus 7, above) offers up a worst-case-scenario buffet for mobile devices, with older phones on 3G connections. The slow load times illustrate the stark contrast between the methods of serving up responsive images, highlighting the danger of relying on browser re-sizing for responsive images on mobile devices.

Unsurprisingly, methods that did not deliver high resolution images to high pixel-density devices (the CSS media query method, the HTML5 picture element method, and the Picturefill method without the optional 2x attribute) were generally the fastest to load on the mobile devices tested. This is a speed/quality tradeoff that must be weighed by developers on each project.

Browser/Device Support

Method	Chrome v.39	Firefox v.34	Safari v.7	IE 10	IE 9	Chrome Droid 4.4	Safari iPhone5	Safari iPhone6
Browser	Pass	Pass	Pass	Pass	Pass	Pass	Pass	Pass
CSS	Pass	Pass	Pass	Pass	Pass	Pass	Pass	Pass
HTML5	Pass	Fail	Fail	Fail	Fail	Pass	Pass	Pass
Picturefill	Pass	Pass	Pass	Pass	Pass	Pass	Pass	Pass
Picturefill 2x	Pass	Pass	Pass	Pass	Pass	Pass	Pass	Pass

Implementaton and Maintenance

Browser Re-Sizing: Browser resizing is the easiest method to implement and maintain from a developer's perspective. It also delivered high-res images to high pixel-density mobile screens.

CSS Media Queries: This method is difficult and tedious to develop—images need to be buried in the CSS as background images to prevent browsers from loading all sizes of the image before media queries are processed. Images loaded as background images do not have alt tags, making the images unsemantic and invisible to screen readers. Images need to be saved out in several sizes. Any changes to the images on the page would require editing both the HTML and the CSS.

Picturefill 2.0: Picturefill requires moderate effort to develop and maintain. Images need to be saved out in several sizes, and picturefill.js needs to be included on each page. Changing images in the future would require only edits to the HTML. High-res images can optionally be delivered to high pixel-density devices. This option can be chosen on an image-by-image basis within the <picture> element.

HTML5: This method also requires moderate effort to develop and maintain. It is comparable to the Picturefill method, except that it doesn't require a script.

Conclusions

Picturefill 2.0 is the fastest and most widely-supported way to deliver responsive images to mobile devices on the pages constructed for this project. It is semantic, easy to maintain, and gives developers the option to deliver high-res images to pixel-dense screens if they’d like to.

Browser re-sizing, although very easy to implement, is disastrous for page load times on mobile and should be avoided.

The 'Extended Edition'

This site was created in September-October 2014 as part of the senior project for my Bachelor of Science in Graphic Information Technology. For more background information on responsive images, details of my methods in building and testing the pages, and a handy sleep aid, you can download the full project report.

The original site was almost instantly dated when Chrome began natively supporting the picture element in late October 2014. I re-built the site in January 2015 to include the HTML5 picture element and to use Bootstrap for the site layout and a new and improved js slideshow. Load times and browser support were re-measured for all pages at that time.