In this section, we will learn what the <picture> element is and how to use it.

HTML Image Tag: What is <picture> Tag in HTML?

HTML <picture> element is a way of adding pictures to an HTML document based on the capabilities of browsers and devices.

Basically, this element takes multiple files of the same picture as its sources. Each of these files has a different size and format. Using <picture> element thus allows browsers in different devices to pick the one file that they can support and display.

In order to add different formats and sizes of the same picture, we use the <source> element and put that in the body of a <picture> element.

HTML <picture> Tag Syntax:

<picture>

<source>

<source>

<source>

<img>

</picture>

HTML <picture> Tag Values

The value of the <picture> element is one or more <source> elements and each contains the address of the same picture, but with a different format or size.

Note: for the last element in the body of a <picture>, it’s best to always put an <img> tag as well. This element will be picked up if the target browser does not support <picture> element or none of the <source> elements matched the need of that browser.

Example: HTML for a picture

See the Pen HTML for a picture by Omid Dehghan (@odehghan) on CodePen.