<picture>

Published Mar 3, 2022Updated Jul 1, 2022

The <picture> element represents multiple possible image sources to be applied to different devices and screen-sizes. While it has no semantic meaning, the <picture> element will separate its contents from the rest of the document.

Syntax

<picture>
  Zero or more <source> tags go here,
  followed by at least one <img> tag here.
</picture>

The <picture> element is used with zero or more <source> elements followed by one <img> element.

The <picture> element that allows developers the flexibility to use different image specifications.

Example

Using different sources provides more options for the browser with regards to the screen or host device. The <img> element is used as the last option of the <picture> element, acting as a fallback if any of the sources are invalid.

<html>
  <head> </head>
  <body>
    <picture>
      <source media="(min-width:700px)" srcset="CodecademyLogoLarge.jpg" />
      <source media="(min-width:540px)" srcset="CodecademyLogoSmall.jpg" />
      <img
        src="CodecademyLogoLarge.jpg"
        alt="The Codecademy logo"
        style="width:auto;"
      />
    </picture>
  </body>
</html>

Output of the picture tag

Some use cases for this example include the following:

Creating a responsive design where an alternative image is used based on the display size.
Optimizing page load times in situations where certain images take longer to load and having an alternative image that loads faster comes in handy.