HTML <picture> and <source> Tags

HTML `<picture>` and `<source>` Tags

<picture> and <source> tags in HTML are used to more effectively control images and provide optimized versions based on different media devices and screen sizes. These tags are useful for responsive web design and image optimization. This article covers how to use the and tags.

Responsive Image Techniques in HTML

With users accessing websites from a wide range of devices, understanding the principles of responsive web design—and learning the techniques to implement it—has become a vital skill in modern web development.

One of the most common approaches to building responsive layouts is using CSS. JavaScript can also be used to enhance responsiveness with more advanced behaviors. Another important method is using responsive image techniques provided by HTML. These methods are not mutually exclusive; in fact, combining them often results in more effective solutions. HTML-based responsive image handling is just one part of a broader responsive design strategy.

There are two main responsive image techniques available in HTML:

Using the srcset and sizes attributes with the <img> tag
Using the <picture> tag along with <source> tags and their srcset, media, and type attributes

In this article, we'll focus on the second method: using the <picture> and <source> tags with responsive attributes.

`<picture>` Tag

The <picture> tag serves as a container (or parent tag) that holds zero or more <source> tags along with a single tag. It allows you to provide multiple responsive image sources for a single <img> tag.

By using the <source> tags within a <picture> tag, you can reduce bandwidth usage and improve page load times. The <img> tag serves as a fallback image for accessibility and when none of the provided <source> tags supply a suitable image.

Note:
The <picture> tag is not directly related to the literal meaning of "picture" (a photo).
Rather, it functions as a container (parent tag) that defines the scope of zero or more <source> tags providing responsive images for a single <img> tag.

Content Model of the `<picture>` Tag

The <picture> tag can contain zero or more <source> tags and exactly one <img> tag. Additionally, script-supporting tags such as <script>, <style>, and <link> can be included between the <source> and <img> tags.

The <picture> tag itself does not display anything on the screen. Its role is to provide an environment for selecting an appropriate image source from the responsive images defined by the <source> tags' srcset, media, and type attributes.
When using <source> tags, the srcset attribute is required, while the media and type attributes are optional.

If no <source> tags exist, the image is displayed using the src attribute of the <img> tag. Below is an example:

HTML

<picture>
    <source srcset="image-small.jpg" media="(max-width: 768px)">
    <source srcset="image-large.jpg" media="(min-width: 769px)">
    <img src="fallback-image.jpg" alt="An image">
    <!-- Script-supporting tags (<script>, <style>, <link>) are optional -->
    <script src="image-script.js"></script>
</picture>

In the above example, the <picture> tag contains <source>, <img>, and <script> tags. The browser displays the image from the <source> tag that matches the responsive condition. If no suitable image source matches the condition, the browser falls back to displaying the <img> tag's image source.

All of <source>, <img>, and script-supporting tags are optional inside the <picture>, but since the <picture> tag itself does not display anything, at least one of either <source> or <img> must be present.

When both <source> and <img> tags are used, the <img> tag must come after all <source> tags. This is because if the <img> tag comes first, the browser will display the <img> image and skip the later <source> tags, preventing the implementation of responsive images defined by <source>.

Consider the following example:

HTML

<!-- <img> tag is omitted -->
<picture>
    <source srcset="image-small.jpg" media="(max-width: 768px)">
    <source srcset="image-large.jpg" media="(min-width: 769px)">
</picture>

This example omits the <img> tag, which is allowed.
However, omitting the <img> tag is not recommended because users with visual impairments cannot understand the content of the image without the <img> tag's alt text. If the content is meaningless for screen reader users, omitting <img> might be acceptable (some screen readers ignore this tag), but it can confuse other screen readers by indicating an empty image.

If the browser cannot find a <source> tag image that matches the responsive conditions (i.e., conditions set in srcset, media, or type attributes), the image cannot be displayed.

The <img> tag serves two purposes:

Providing the alt attribute for web accessibility, and
Serving as a fallback image in case none of the <source> tags provide a usable image.

Considering these uses, while it is not mandatory to use the <img> tag, it is strongly recommended.

What if you use only the <img> tag without any <source> tags inside the <picture>?

That is allowed, but you won’t be able to implement responsive images using <source> tags. In such cases, there is no benefit to using the <picture> tag, and you could just use the <img> tag alone.

`<source>` Tag

The <source> tag is used within the <picture> tag to define responsive image sources.

When multiple <source> tags are used, you can define different responsive images using the srcset, media, and type attributes. If the conditions specified match the user's device, the browser displays the corresponding image.

Do Not Confuse with `<source>` Tags Used Inside `<video>`

The <source> tag behaves differently depending on the parent tag. Within a <picture> tag, it is used to define image resources using the srcset attribute.

However, when used inside a <video> tag, it defines video resources using the src attribute instead.

Also, the media attribute is valid within the <picture> tag, but it is not supported in the <video> tag.

`media` Attribute

The media attribute defines media conditions (similar to media queries) that the browser evaluates.

If the condition matches, the browser uses the image specified in that particular <source> tag and skips evaluating the rest, even if other <source> or <img> tags exist.

If the condition does not match, the browser continues evaluating the next sibling elements within the <picture> tag.

HTML

<picture>
    <source srcset="image-small.jpg" media="(max-width: 768px)">
    <source srcset="image-large.jpg" media="(min-width: 769px)">
    <img src="fallback-image.jpg" alt="An image">
</picture>

`srcset` Attribute

The srcset attribute defines the image resource(s) to use.

It functions the same way in both the <source> and <img> tags. This article does not cover the advanced usage of the srcset attribute. For a clear and simple explanation of the <img> tag's srcset and sizes attributes, please refer to HTML <img> srcset and sizes Attributes – A Clear and Simple Guide.

`type` Attribute

The type attribute specifies the MIME type of the image defined in the srcset attribute. If the browser does not support the specified MIME type, it will skip that <source> tag.

This attribute is optional. If omitted, the browser will determine the MIME type on its own. However, providing it can improve performance by allowing the browser to skip MIME type detection.

HTML

<picture>
    <source srcset="photo.avif" type="image/avif">
    <source srcset="photo.webp" type="image/webp">
    <img src="photo.jpg" alt="photo">
</picture>

Browser compatibility

Browser compatibility for the `<picture>` and `<source>` tags
Tag	Desktop Chrome	DesktopDesktop Edge	Desktop Firefox	Safari
`<picture>`	38	13	38	9.1
`<source>`	3	12	3.5	3.1

Browser compatibility for `<source>` tag attributes
`<source>` Tag Attributes	Desktop Chrome	DesktopDesktop Edge	Desktop Firefox	Safari
`srcset`	38	18	38	9.1
`media`	3	12	15	3.1
`type`	3	12	3.5	3.1

Specifications

Specification for the picture and source tags
Specification
`picture`	HTML Standard #the-picture-element
`source`	HTML Standard #the-source-element

HTML <picture> and <source> Tags – Implementing Responsive Images