HTML <picture>

BrandonDusch's avatar
BrandonDusch's avatar
BrandonDusch
Published Mar 3, 2022Updated Jul 1, 2022
Contribute to Docs

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.

  • Career path

    Front-End Engineer

    Front-end engineers work closely with designers to make websites beautiful, functional, and fast.
    • Includes 34 Courses
    • With Professional Certification
    • Beginner Friendly.
      115 hours
  • Free course

    Learn HTML

    Start at the beginning by learning HTML basics — an important foundation for building and editing web pages.
    • Beginner Friendly.
      7 hours

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.

All contributors

Contribute to Docs

Learn HTML on Codecademy

  • Career path

    Front-End Engineer

    Front-end engineers work closely with designers to make websites beautiful, functional, and fast.
    • Includes 34 Courses
    • With Professional Certification
    • Beginner Friendly.
      115 hours
  • Free course

    Learn HTML

    Start at the beginning by learning HTML basics — an important foundation for building and editing web pages.
    • Beginner Friendly.
      7 hours