HTML <picture> Tag Tutorial - Usage, Syntax,
Attributes and Example

calender-iconPublished: 25 May 2025

clock-icon5-min read

printer-icon whatsapp-icon share-icon



close-button
HTML
Table of Contents

INTRODUCTION

The HTML <picture> element is used to offer multiple versions of an image for different display/device scenarios. Multiple versions of an image can be specified using one or more HTML <source> element and one <img> element.

The browser will go through each <source> element and selects the best image. When no image match, the <img> element serves as an fall-back mechanism and the image specified by it is selected and displayed.


The common uses of <picture> element is listed below.

  • <picture> element is used to offer image in multiple image formats, incase certain formats are not supported by each browser.
  • It saves bandwidth and optimise page load time by loading the most appropriate image.
  • It is used to provide higher pixel-density versions for high dpi displays and lower-density versions for standard displays.
  • You can provide an cropped or simpler image with lesser details for smaller displays like mobiles.
Example : 

<picture>
<source srcset="image-large.jpg" media="(min-width: 800px)">
<source srcset="image-medium.jpg" media="(min-width: 500px)">
<img src="image-small.jpg" alt="A responsive image">
</picture>


ATTRIBUTES

The HTML element only has global attributes. Below are few attribute of the HTML <source> element which play an important role in selecting the image of <picture> element.

1. media

The media attribute is used to specify an media condition for each <source> element. The browser evalutes the condition and selects the image specified by the <source> element if condition evaluates to true.

If the condition evaluates to false then browser evaluates next <source> element.

If no condition matches then image specified by <img> element is selected.



2. srcset

The srcset attribute is used to specify Different versions of an image and what size each image is. Its value is an comma seperated list of strings with each string specifying an image. Each strings contains the following information.

  • An URL of the Image.
  • An Optional whitespace followed by
    • width descriptor or
    • pixel density descriptor

This attribute has been described in great details on our HTML Img element page.



3. type

The media attribute is used to specify the MIME type for the Image in the <source> element. If an image type is not supported by browser then that <source> element is skipped.

Example : 

<picture>
<source srcset="image-large.avif" type="image/avif">
<source srcset="image-medium.webp" media="image/webp">
<img src="image-small.jpg" alt="A responsive image">
</picture>


Tag Omission

The HTML <picture> element must have have both start tag and end tag.



Permitted Content

The HTML <picture> element can have one or more HTML <source> element and must have one <img> element.

Frequently Asked Questions(FAQ)

How does the <picture> element differ from the <img> tag?
1. <img> Element
  • The <img> element is used to display a single image.
  • It does not provide built-in responsiveness for different screen sizes.
  • You can specify only one image source using the src attribute.

2. <picture> Element
  • The <picture> element allows you to define multiple image sources.
  • It enables responsive images, loading different images based on screen size or format support.
  • Uses <source> elements to define different image versions.
  • The <img> element inside <picture> serves as a fallback if none of the sources match.

How do you use the <picture> element to serve different image formats?
By including multiple <source> elements with the type attribute specifying the MIME type (e.g., image/webp, image/jpeg), the browser can select the best-supported format.
For example: 

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

How do you use the <picture> element for responsive images?
Yes, the <picture> element is particularly useful for responsive designs. By using the media attribute in <source> elements, different images can be served based on viewport width or other media features.
For example: 

<picture>
 <source media="(min-width: 800px)" srcset="large.jpg">
 <source media="(min-width: 400px)" srcset="medium.jpg">
 <img src="small.jpg" alt="Description of the image">
</picture>

Is the <img> tag required inside the <picture> element?
Yes, the <img> tag acts as a fallback for browsers that do not support the <picture> element or when none of the <source> elements match. It ensures that an image is displayed even if the advanced features of <picture> are not utilized.

How does the browser choose which image to display in the <picture> element?
The browser evaluates each <source> element in the order they are provided. It selects the first one that matches the current media conditions and supports the specified image format. If no <source> matches, the browser falls back to the <img> element's src attribute. ​
Does the <picture> element affect SEO?
The <picture> element does not inherently affect SEO. Search engines primarily rely on the <img> tag and its alt attribute for indexing images. Therefore, it's important to include descriptive alt text within the <img> tag inside the <picture> element.

Does the <picture> element affect SEO?
Yes, the HTML picture tag can help save bandwidth when used correctly. The picture tag allows you to define multiple versions of an image for different scenarios (like screen size or resolution). The browser chooses the most appropriate image to load based on the user's device and display settings. This means Mobile users can get smaller, lighter images.