Clive Portman: code

Responsive images and browser support for srcset width-descriptor

Full-width image. Here's the code:

<img 
    srcset="
            {{ siteUrl }}img/WREN-HOME-480x270-copy.jpg 480w,
            {{ siteUrl }}img/WREN-HOME-800x450-copy.jpg 800w,
            {{ siteUrl }}img/WREN-HOME-1366x768-copy.jpg 1366w,
            {{ siteUrl }}img/WREN-HOME-1024x576-copy.jpg 1024w,
            {{ siteUrl }}img/WREN-HOME-1920x1080-copy.jpg 1920w,
            {{ siteUrl }}img/WREN-HOME-2560x1440-copy.jpg 2560w,
            {{ siteUrl }}img/WREN-HOME-5120x2880-copy.jpg 5120w
            "
    sizes="100vw"
    src="{{ siteUrl }}img/WREN-HOME-1920x1080-copy-default.jpg"
    alt="REFLECT & REFORM">

What happens in different browsers?

Chrome on Windows and Yosemite
Starting with smallest possible browser window, Chrome loaded the smallest image. As I enlarged the viewport Chrome loaded the images as I reached each threshold automatically. After reaching the largest viewport, Chrome kept the largest loaded image as I shrank the viewport again. This behaviour is exactly what I'm after and there's no need to load the smaller images in again at the end when a larger image has been loaded already. Chrome supports the width attribute within srcset.

Firefox on Windows and Yosemite
Starting with smallest possible browser window, Firefox loaded the smallest image. As I enlarged the viewport Firefox loaded the images as I reached each threshold only when I refreshed the page. After reaching the largest viewport, when I shrank it again Firefox started loading the smaller images again (still requiring a refresh). Firefox supports the width attribute within srcset.

Internet Explorer 11
IE11 loaded the default image. IE11 does not support srcset.

Internet Explorer on Windows Phone 8.1
IE loaded the default image. IE on Windows Phone 8.1 does not support srcset.

Safari on Retina iPad with iOS 8
Safari on iOS just displays whatever is first in the srcset list. Adding a density-descriptor works, to the extent that Safari observes it but without support for the width-descriptor it's pretty much useless for these full-width images. Safari on iOS supports srcset and the density-descriptor but not the width-descriptor.

Chrome on iPad
The Chrome browser on the iPad is based on Safari, which means it, too, doesn't support the width descriptor.

Safari on iPhones with iOS 8
See Safari on Retina iPad (above).

Support at the moment, then, is patchy. The pixel-density descriptor might be appropriate for images of a fixed width but not for flexible images like these. What to do? Use the respimages polyfill - it even works on IE!