<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.
<picture> Zero or more <source> tags go here, followed by at least one <img> tag here. </picture>
<picture> element is used with zero or more
<source> elements followed by one
<picture> element that allows developers the flexibility to use different image specifications.
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.
Interested in helping build Docs? Read the Contribution Guide or share your thoughts in this feedback form.
Learn HTML on Codecademy
Front-End EngineerFront-end engineers work closely with designers to make websites beautiful, functional, and fast.
Includes 34 Courses
With Professional Certification