SRCset Attribute Support Added by WebKit

Recently, WebKit has announced one of the biggest news that it adds support for srcset Attribute, which is the major step for the support of a semantically responsive user web experience. Using srcset attribute, developers are allowed to stipulate a complete list of sources for image attribute that can be rendered and displayed based on the pixel resolution. We can say that it is good news for all those parties that are involved in it.

For an example:

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

As per the given example, this attribute specifies to make use of the low-res.jpg as the source for this image for low-resolution displays and for all those browsers that do not comprehend the srcset attribute. However, users can use high-res.jpg as the source for the img on high-resolution displays in browsers.

When it comes to talk about an average or an ordinary website, it is almost an entire megabyte of images. Developers are using and implementing srcset attribute can target users on high-resolution displays with a high-resolution image source. Moreover, users, who are on lower pixel resolution display, are not feeling burdened with the bandwidth charge of downloading a larger high-resolution image.

Is it Possible with JavaScript?

Well, we can’t say that srcset is doing something special or lots of work. It just selects a perfect source from an attribute and changes the contents of an img tag’s src. Changing the content of an attribute is such thing that we were doing with JavaScript in early days, so what the mean of using CSS.

However, various attempts have been tried on BostonGlobe.com, a leading websites that use sort of responsive images solution, but all gratitude goes to browsers increasingly aggressive perfeching and an image src is asked for, but lon before we have a chance to do anything about it. However, we need to end up making two requests for each and every image that displayed and defeat with the entire purpose.

Now, What About CSS?

When it comes to talk about to change this effect which CSS, it is quite difficult one as CSS has an image-set feature that enables people to identify a list of background image sources and resolutions. It also allows browser to create the decision as to which one is most suitable. For presenting content, there was not a perfect solution.

Moreover, using CSS on content managed websites is a quite daunting task as it is a loom towards many, but it is not possible to believe to implement it in any production website. For different images, this CSS requirement grows extremely large as it leads to requests for stylesheets and images that users may not actually need.

Recommended Reading: HTML5 Aside Tag Using Tutorial to Reference Auxiliary Content

Now, What About Picture Element?

If you are one of those people, who are with the HTML5 development specification, the picture element that is obtainable to address difficult use cases as one can use it more flexibly and familiarly syntax. Picture element makes use of media attributes on source elements, which are like to the video and audio element.

It enables people to target image sources to a mixture of factors like viewport height and width with the help of min and max values. The picture element that obtainable is duplicate of media queries that 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, things get difficult once again as the picture specification was written with the decreased srcset attribute syntax taken into consideration that enables people to use on the picture’s source elements and the img elements.

Closing Thoughts

It is great news that WebKit has added support for srcset attribute that doesn't address to all the responsive images use cases, but it represents a chief step toward a long overdue solution.