Dewey Library - HD60.5.I5 K748 2019

Online Resource

Brookfield, Stephen, author

Future CSS implementations should allow for some form of responsive images via CSS alone. This is an early idea for how that might be done. However, a significant drawback is that it would not prevent both “mobile optimised” and larger size images from being requested at larger screen resolutions.

Note that the CSS presented here is not supported in any browsers at the time of writing.

This method relies on the use of @media queries, CSS3 generated content, and the CSS3 extension to the attr() function.

The principles are basically the same as those underpinning Filament Group’s work on Responsive Images. The source image is “mobile optimised” and the urls of larger size images are included using HTML data-* attributes.

<img src="image.jpg"
     data-src-600px="image-600px.jpg"
     data-src-800px="image-800px.jpg"
     alt="">

Using CSS @media queries you can target devices above certain widths. Within each media query block, images with larger alternatives can be targeted using an attribute selector.

CSS3 generated content allows you to replace the content of any element using the content property. At the moment, only Opera 10+ supports it. In CSS 2.1, the content property is limited to use with the :before and :after pseudo-elements.

By combining the content property with the CSS3 extension to attr(), you will be able to specify that an attribute’s value is interpreted as the URL part of a url() expression. In this case, it means you will be able to replace an image’s content with the image found at the destination URL stored in a custom HTML data-* attribute.

@media (min-device-width:600px) {
  img[data-src-600px] {
    content: attr(data-src-600px, url);
  }
}

@media (min-device-width:800px) {
  img[data-src-800px] {
    content: attr(data-src-800px, url);
  }
}

Fork the Gist

Issues

Unfortunately, there are a number of issues with this technique.

1. It doesn’t prevent multiple assets being downloaded at larger screen widths because network activity kicks in before CSS is applied. That means, for example, that desktop environments would make 2 HTTP requests for an image and have to load more assets than if they had been served only the larger image in the source.
2. It makes the assumption that wider screens are tied to better internet connections.
3. It forces authors to create and maintain multiple image sizes for each image.
4. At present, using the context menu (or drag and drop) to copy the image will result in the source file being copied and not the replacement image.
5. It doesn’t account for devices with different pixel densities.

The responsive images spec is fantastic and covers a lot of use cases, but most of the time you’ll only need one: resolution switching using the `srcset` and `sizes` attributes.

King, Michaela

How to use the right responsive grid and UI layout based on your design goals.