HTML <picture> Tag
Today we will cover Tag picture. By using examples, we anticipate meeting the learning objectives.
The HTML <picture> tag is used to provide multiple versions of an image, each designed for a specific device or display size. The browser can then choose the most appropriate version of the image to display based on the user’s device and screen size.
This is how you apply the <picture> tag:
Example:
Using <picture> to provide different images based on screen orientation:
Example:
Using <picture> to provide different images based on the color scheme of the browser:
Example:
Tag Picture Usage
The Tag picture <picture> allows web developers to designate image resources with enhanced flexibility.
The <picture> element is frequently used for art direction when creating responsive designs.
Multiple images can be used to fill the browser viewport more effectively, rather than a single image that is scaled up and down according to the viewport width.
The <picture> element consists of two tags: a combination of <source> tags and one <img> tag.
The browser searches for the first <source> element that matches the current viewport width with the media query and then renders the image (the image included in the srcset attribute). Alternatively, if none of the source tags match, there is a fallback option in the <img> element.
HTML <picture> Tag Attributes
The HTML <picture> tag has several attributes that can be used to specify the different versions of an image and how they should be displayed. Here are some of the most common attributes used with the <picture> tag:
- srcset: The srcset attribute is used to specify the different versions of the image, along with their respective sizes. Each version is separated by a comma, with the size specified after the image URL. For example: srcset=”small.jpg 320w, medium.jpg 640w, large.jpg 1024w”.
- sizes: The sizes attribute is used to specify the sizes of the image that the different versions are intended for. This helps the browser to select the most appropriate version based on the user’s device and screen size. For example: sizes=”(max-width: 768px) 100vw, 50vw”.
- media: The media attribute is used to specify the media query that the browser should use to determine whether to use a particular image version. For example: media=”(min-width: 768px)”.
- type: The type attribute is used to specify the MIME type of the image. This can help the browser to select the most appropriate image format for the user’s device and browser. For example: type=”image/webp”.
- alt: The alt attribute is used to provide alternative text for the image, which is displayed if the image cannot be loaded or if the user is using a screen reader.
Attributes
Global
HTML’s Global Attributes are backed by the Tag Picture <picture>.
Event
HTML’s Tag Picture <picture> also works with Event Attributes.
Browser Compatibility
In the following table, the numbers indicate the version of the browser that is compatible with the element in the Tag Picture.
| Element |  |  |  |  |  |
|---|---|---|---|---|---|
| <picture> | 38.0 | 13.0 | 38.0 | 9.1 | 25.0 |
HTML <picture> Tag Advantages
There are several advantages to using the HTML <picture> tag:
- The <picture> tag allows developers to provide multiple versions of an image that are optimized for different screen sizes and devices. This ensures that the image is displayed at the appropriate size for the user’s device, which can improve the user experience.
- By providing multiple versions of an image and using the srcset and sizes attributes, the browser can select the most appropriate version of the image to download, which can reduce the size of the image that is downloaded and improve the performance of the web page.
- The <picture> tag is designed to be forward-compatible with new image formats and technologies. This means that developers can use the <picture> tag to provide images that will work with new devices and technologies as they are developed.
- The <picture> tag provides an alt attribute that can be used to provide alternative text for the image. This is important for users who cannot see the image or who are using a screen reader.
- The <picture> tag can help improve the search engine optimization (SEO) of a web page by providing optimized images for different devices and screen sizes. This can improve the page load speed and user experience, which can help improve the page ranking in search engines.
