Want your site to be more responsive? Just picture it!

Simplicity is the virtue of the 21st century. Things that used to be difficult and time-consuming in the past can be done much more easily and quickly than before. The same goes for web development as HTML5 has made things a lot easier for us programmers. Many elements introduced in the newest version of the popular markup language eradicate the use of external CSS and JS and make it faster and easier to develop high-functioning web pages. The topic of this article - the picture tag - is also one of them.

Introducing the picture element

Changing only the resolution of images based on different screen resolutions was the old way of doing things. Now, you can use completely different images specifically made for different devices.

The picture element allows you to use different assets for different viewports or pixel ratios. That not only means images with different resolutions but also different types i.e. JPG, PNG, WEBP, etc. This makes your web pages look good, alters your image resources according to browser compatibility, and also allows less bandwidth usage meaning faster resource loading for users with slow internet speeds. Talk about responsive web design and great user experience!

Syntax and code example

Let’s see the picture tag in action and then understand the different elements it contains.

<picture>
   <source srcset="first.jpg 2x" media="(max-width: 639px)" sizes="40vw">
   <source srcset="second.jpg, second1.jpg 2x" media="(max-width: 1023px)">
   <img src="default.jpg" alt="Default image">
</picture>

As you see above, picture contains one or more source elements preceding an img tag.

The way it works is that the browser checks the media queries of all the source elements and chooses the best picture for the current layout and resolution. Note that we use srcset attribute when source inside picture to provide different versions of the images. source’s src attribute will be ignored when used inside picture.

If none of the source elements match the current conditions or if picture is not supported, img element provides a fallback or default mechanism for image selection. It also describes the size and other attributes of the image selected in any case.

Different uses of the picture element

The first and foremost use case of this element is what is called the “art direction.” That means using a cropped version of the image based on the device or orientation it is being viewed on. A higher resolution version of the image can be used if the device has a high-DPI (Retina) display.

Did you notice the sizes attribute in the source tag above? This allows adjusting your images according to the portion of the viewport it is supposed to cover by bounding it in a fixed width box. That’s helpful in circumstances when just using a cropped image isn’t enough. The above code will make sure the image covers only 40% of the viewport.

Sometimes using different types of images comes in handy to provide better UX. For example, you might have a GIF resource but the internet conditions support using a simple JPG better. Gotta compromise sometimes you know.

The sustainable side of the <picture> element

We have hinted about it before in this article, but I think now is the time we talk about the biggest advantage of our beloved picture tag.

The Web is going mobile-first and your site is more likely to be viewed on a phone or tablet than a laptop. Then why make the user’s internet go through the struggle of loading a large size image on a small resolution device. Using custom size images according to the device will make your website load faster and consume less bandwidth at the user’s end. This will also let you take advantage of the browser's image caching abilities.

Another thing you can customize for better performance and lesser bandwidth usage is image types. If you take a look at Google page speed insights, you will find that Google is especially wary of the traditional JPG images due to more loading speeds and data needs. Google launched the image type WEBP a few years ago considering this issue and it estimates that a WEBP image is at the minimum 25% smaller than a PNG, JPG, or GIF image. So using images like WEBP or AVIF can greatly increase the green element of your websites.

Luckily, both these optimizations can be done using the combination of tags described above. So what are you waiting for? Picture everything and achieve greater speeds!

Author

Michael Andersen

I am a self-taught and highly passionate web developer currently living in Sweden, where I use my skills to make the internet a better place through ethical and sustainable web design.