HTML <picture>

DenisCabrera's avatar
DenisCabrera's avatar
DenisCabrera
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.

  • 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

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