How to Use HTML5 <picture> to Get Responsive Image

Responsive Design is here to stay, but there are many issues that need to be addressed when it comes to making images responsive. Although responsive images automatically resize themselves based on the viewport size (which is technically easy), one problem users face is that the image’s focal point becomes barely visible when the image becomes too small.

The ideal consensus among web developers is that the actual dimensions should be responsive too. The browser should be able to load smaller or larger images according to the viewport size. This way, we can deliver the best image proportion rather than just a shrunken version of the image.

This is where the HTML5 picture element comes in. The picture element allows us to provide multiple image sources and control their delivery through Media Queries. Let’s see how it’s done.

Recommended Reading: 5 Methods To Serve True Responsive Images

Getting Started

I have prepared an image in three different dimensions. The image has been cropped to preserve focus on the person in the frame. We will display the smallest size on small screens and the larger image on large screens.

Using the Picture Element

Picturefill can work in two ways: we can embed srcset in the img tag or use the picture element. Here, we will opt for the picture element as it is more manageable, easier to understand, and more readable.

Similar to the video and audio elements, picture wraps multiple source elements pointing to the image sources, as follows.

<picture>
    <source srcset="img/person-xsmall.jpg" media="(max-width: 480px)">
    <source srcset="img/person-small.jpg" media="(max-width: 640px)">
    <source srcset="img/person-med.jpg">
    <img srcset="img/person-med.jpg" alt="">
</picture>

The source element, as shown in the code snippet above, is set with the media attribute. In this attribute, we specify the viewport breakpoint at which the image should be presented.

Check out the demo page and resize the viewport to see how the image adapts to different screen sizes.

Browser Support

All modern browsers now support the HTML5 picture element, including Microsoft Edge and mobile browsers. However, if you need to support older browsers like Internet Explorer where this element is not supported, you can use a polyfill called Picturefill.

Picturefill is a JavaScript library developed by Filament Group that enables the use of the picture element. To get started, download the script from the Github repository and include either picturefill.js or picturefill.min.js in your head tag.

<script src="js/picturefill.js"></script>

Final Thoughts

The picture element is a great addition to HTML5. It provides more control over the image size that browsers should present at specific viewport sizes. The element works in all modern browsers, and WordPress has included support for it since version 4.4. If you need to support older browsers like Internet Explorer that don’t support the picture element, you can use Picturefill as a polyfill.

Check out the demo and download the source code below.