Creating adaptive images for the web is frequently a source of frustration and compromise. Web designers often struggle with the choice of using large, high-resolution images scaled down for small devices, or compromising on quality by using lower-resolution images, which look terrible when scaled up for larger monitors.
To solve this problem, the W3C has been exploring the HTML Responsive Images Extension, which makes use of a new
Their proposal states:
“The picture element represents a list source of image data and associated attribute that define when an image should be used. Image data sources may be explicitly declared based on media queries or can be suggested to the browser via the srcset attribute on the picture element.”
Basically, the new HTML5 element groups multiple versions of an image, based on certain characteristics, such as their resolution and format. This means that the optimum image can be selected, based upon the user’s device and requirements.
Aims of the
Amongst other things, the new element aims to:
- Be responsive to screen resolution, pixel density and width/height
- Have the ability to be polyfilled
- Have the ability to fall back on older user agents
- Be responsive to user zoom
- Retain the same level of accessibility as the img element
- Preserve separation of content markup and styling
- Support cases where web designers need to define entirely different images, rather than just different resolutions of the same image
What’s the srcset element?
The srcset attribute is a comma-separated list of URLs for alternate resources of a single image at different resolutions. This has the advantage of only one image being downloaded, according to the user’s specific set-up. Here’s an example of how it works with the
The above example specifies that users with
There are also potential solutions being explored for zooming and for vertical/horizontal orientation issues.
The main disadvantage at the moment is that the
Another significant negative is that currently, even though one of the first two images is being loaded, the fallback is simultaneously loaded, even though it is not required or used. This is because browsers look ahead and start to download images immediately, including the fallback image. Whilst this might not seem much of a problem, it does mean that users are using – and maybe paying for – unnecessary bandwidth. There are some workaround solutions to this problem, but these require extensive coding, which seems like a lot of effort to go to just to display an image.
So it seems that whilst there are definite advantages to the
Watch this space for further updates!