It really is time to start using the picture tag in HTML

I get it. It takes time for new features in HTML/CSS/JavaScript to take effect and begin to get used regularly by developers. I myself am guilty of the same.

If you check the full-source on this blog, for the most part you will mainly see me use the old fashioned <img> tag for pretty much every single image file.

<img src='helloworld.png' alt='' />

And the same is true for pretty much every website that is older than 5 years currently.

But the <picture> tag needs some attention folks. It's been around for some time now, and it addresses many of the requirements of the current modern web that web developers sometimes let slip by, such as responsiveness, bandwidth and overall just better user experience and performance.

Let's start off with a look at how it works.

How to use it

The <picture> tag is more involved than the traditional <img> tag, I will say that now. It is comprised of zero or more embedded <source> tags and one <img> element that it will fall back to in case <picture> is not recognized by the users browser.

A single image element could look something like the following:

<picture>
    <source srcset='helloworld_a.png' type='image/png' media='(min-width: 600px)'></source>
    <source srcset='helloworld_b.jpg' type='image/jpg' media='(min-width: 1200px)'></source>

    <img src='helloworld.png' alt='' />
</picture>

Needless to say, there's alot going on here. Before I break down each of the attributes though, here's a list of reasons why you might want to use the <picture> tag instead of <img>, because it isn't required in any way and it isn't the new <img> either.

- Serve the optimal image depending on users screen size
- Server multiple image formats and let the browser decide on the best option
- Reduce bandwidth on slower connections
- Introduce new image formats, such as AVIF or WEBP, which might not render in older browsers.

Now let's take a look at some of the required attributes needed to make this work.

media attribute

Each <source> element that you specify in the <picture> tag allows you to specify a media attribute as well. This attribute pretty much resembles that of your typical media-query in CSS.

<source srcset='helloworld_a.png' media='(min-width:800px'></source>

<source srcset='helloworld_a.png' media='(min-width:800px'></source>

By specifying the max or min width required to render, you can better serve users a more optimal image matching their requirements.

This can help both from a graphical perspective, as you can serve higher resolution images on larger displays but also from a bandwidth perspective.

The browser will not download any image resources that do not match the given media query criteria.

type attribute

You can also specify a type attribute in each of the included <source> elements. The value of type can be any of the currently available MIME types for images.

<source srcset='helloworld_a.png' media='(min-width:800px' type='image/png'></source>

The browser will use the specified MIME type to determine if that particular image can be rendered on that particular browser. If it cannot, then it will skip that <source> element and jump to the next.

And if no elements are found to match the right type, then the browser will render the given <img> tag at the end.

It's also important to remember that browsers use the specified MIME type and not the file extension to determine what kind of file to render.

srcset attribute

You may have noticed that <source> tags use srcset instead of src, and that's because they are indeed two different things.

The srcset attribute is a comma separated list of image descriptors. What is an image descriptor? Well, in terms of a srcset, it is the URL of an image followed by either one of the following:

width descriptor - An integer value followed by a w (ex: 300w)

pixel density descriptor - An integer value followed by x (ex: 2x)

Together, that would look something like the following:

 <source srcset='helloworld_560.png 560x' type='image/png' media='(min-width: 600px)'></source>

The descriptor is optional and really would only apply if you had multiple images with varying pixel densities to display to a user.

Browser support

The <picture> tag is currently supported in every browser, excluding Internet Explorer.