This site is mobile accessible. Press the "Tap Here" button to use a smaller font-size. Tap Here!

Smartphone icons created by Freepik - Flaticon

3.2.3 The Picture Element

The HTML <picture> element allows you to display different pictures for different devices or screen sizes.

The HTML <picture> Element

The HTML <picture> element gives web developers more flexibility in specifying image resources. The <picture> element contains one or more <source> elements, each referring to different images through the srcset attribute. This way the browser can choose the image that best fits the current view and/or device. Each <source> element has a media attribute that defines when the image is the most suitable.

Example 1: HTML picture element

Show different images for different screen sizes:

<picture>
  <source media="(min-width: 700px)" srcset="img_girl.jpg">
  <source media="(min-width: 465px)" srcset="img_food.jpg">
  <img src="img_car.jpg">
</picture>

Note: Always specify an <img> element as the last child element of the <picture> element. The <img> element is used by browsers that do not support the <picture> element, or if none of the <source> tags match.

When to use the Picture Element

There are two main purposes for the <picture> element:

1. Bandwidth

If you have a small screen or device, it is not necessary to load a large image file. The browser will use the first <source> element with matching attribute values, and ignore any of the following elements.

2. Format Support

Some browsers or devices may not support all image formats. By using the <picture> element, you can add images of all formats, and the browser will use the first format it recognizes, and ignore any of the following elements.

Example 2: HTML picture source

The browser will use the first image format it recognizes:

<picture>
  <source srcset="img_avatar.png">
  <source srcset="img_girl.jpg">
  <img src="img_programming.gif" alt="computer programmer" style="width:auto;">
</picture>

Note: The browser will use the first <source> element with matching attribute values, and ignore any following <source> elements.

HTML Image Tags

Tag	Description
<img>	Defines an image
<map>	Defines an image map
<area>	Defines a clickable area inside an image map
<picture>	Defines a container for multiple image resources

For a complete list of all available HTML tags, visit HTML Tag Reference.