WebKit recently announced some serious news, providing details that they've finally implemented the srcset attribute. A great step forward for the support of a semantically responsive user web experience.

The srcset attribute allows developers to specify a list of sources for an image attribute, to be rendered and displayed based on the pixel resolution of the users display.

<img src="low-res.jpg" srcset="high-res.jpg 2x" />

Using the example above, the attribute indicates to use the low-res.jpg as the source for this img on low-resolution displays, and for any browser that doesn’t understand the srcset attribute. Use high-res.jpg as the source for the img on high-resolution displays in browsers that implement the srcset attribute.

Typically, the average website is now nearly an entire megabyte of images. Implementing and using the srcset attribute means developers can target users on high-resolution displays with a high-resolution image source. Meanwhile, users on lower pixel resolution display won’t be saddled with the bandwidth cost of downloading a larger high-resolution image, without seeing any visual benefit.

Eh, What about Javascript?

Overall, the srcset attribute isn't doing too much work - it selects the most appropriate source from an attribute and then replaces the contents of the image tags src attribute. This is something we have been doing with Javascript since the early days. So, why should you use CSS?

Attempts have tried to replicate the 'responsive images' but, thanks to browsers increasingly aggressive prefetching, an image’s src is requested long before we have a chance to do anything about it. Inevitably, we would end up making two requests for every one image we displayed, defeating the entire purpose.

OK, What about CSS?

Attempts with CSS to replicate this effect have been a tricky one. CSS has an image-set feature that allowed you to specify a list of background image sources and resolutions and allow the browser to make the decision as to which one is most appropriate. However, there wasn't a solution adaquete for content presentation.

Additionally, using CSS on content managed websites would prove tedious. It is an approach that many would say makes sense but, logically, it isn't plausible to implement in any production website. The CSS required would grow extremely large for every image and, it would lead to requests for stylesheets and images that users may not actually need.

What about Our Bandwidth?

The srcset provides an inline shorthand for image resolution media queries, whilst handling our bandwidth too. The specification for srcset outlines some interesting features that outline how the implementation of the attribute is defined as a 'set of suggestions' to the browser.

This means the browser can then use environmental heuristics or a user preference to decide that it wants to fetch a lower resolution image despite a high-resolution display - which is ideal if you're on a retina iPad but on a very bad connection! This means the browser can actually grab a low-resolution image until you get onto a stable connection.

What about the 'picture' Element?

If you've kept up with the HTML5 specification, the picture element exists to address more complex use cases, using a more flexible and familiar syntax. The picture element uses media attributes on source elements, similar to the video and audio element. This allows us to target image sources to a combination of factors such as the viewport height and/or width, in pixels or ems, using either min or max values. Overall, the picture element is a replication of media queries used in CSS.

<picture>
    <source srcset="medium.jpg 1x, medium-hd.jpg 2x" media="(min-width: 40em)" /> 
    <source src="small.jpg 1x, small-hd.jpg 2x.jpg" />
    <img src="default.jpg" alt="" />
</picture>

However, saying that, things do get complicated again as the picture specification was written with the reduced srcset attribute syntax taken into consideration - allowing it to be used on the picture's source elements as well as the img elements.

Image Source: Top HTML5 Web Designing Software

0
Ignite your brand, utilise user-generated content no matter where you or your audience are ›