<picture>
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.
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" /><imgsrc="CodecademyLogoLarge.jpg"alt="The Codecademy logo"style="width:auto;"/></picture></body></html>
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.
Contribute to Docs
- Learn more about how to get involved.
- Edit this page on GitHub to fix an error or make an improvement.
- Submit feedback to let us know how we can improve 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 CoursesWith Professional CertificationBeginner Friendly115 hours - Free course
Learn HTML
Start at the beginning by learning HTML basics — an important foundation for building and editing web pages.Beginner Friendly7 hours