Better Responsive Images With the Picture Element

This article will introduce you to <picture>, a new proposed element created to try and solve the problem of serving the version of content images which better suits the device currently visiting a web page. Responsive Web Design (RWD) has taken web developers and designers by storm, changing the way they approach the development of a website.

 

We, as people involved in software development, are always excited by new tools in the same way a child is thrilled by a new toy (you’ve heard of the recent diatribe on front-end automation tools, haven’t you?). We are so intrigued by new toys that sometimes we use, and even develop, tools that don’t resolve a real issue. Well, RWD isn’t like a new toy that everybody loves to play with, without a good reason. It’s a methodology that helps us solve real problems: adapting a website for a great variety of screens. However, as many (all?) things in life, it isn’t perfect and has some limitations.

One of the most important open issues is serving content images for an almost infinite range of devices, trying to serve the version that better suits the specific device currently visiting our website. For those of you who don’t know what content images are, they are the images part of the content. Therefore, they should be shown using the <img> tag and not a CSS rule such as background-image. So far, three main proposals were made, discussed, rejected, and even resurrected (as the picture element). The proposals are: the srcset attribute, the picture element, and the src-n attribute. All of them tried to cover the wider range of use cases possible but, unfortunately for us, none of them have been completely welcomed by all the actors involved. At the time of this writing, it seems that <picture> will be the way to go due to the positive comments on the revamped proposal by representatives of the main browsers.

Considering that based on the latest statistics of HTTPArchive.org, images constitute about the 62% of the total weight of web page, you can easily understand that solving the problem of content images is a primary issue, and the sooner we arrive to a solution, the better. In fact, an improvement in how and what images are served will lead to faster loading of websites, which in turn will lead to an improvement of the experience of the websites’ users.