What is the picture element in HTML5?

Use the HTML5 element to realize responsive images. This element should be used when artistic direction control is required or when switching between different image formats; 1. It defines multiple image sources through tags and matches device characteristics according to conditions; 2. Supports media, srcset and type attributes to select the optimal image; 3. If there is no matching source, fall back to the tag; 4. Commonly used for image cropping or modern formats with priority loading; 5. Improve performance, responsiveness and future compatibility, but only when necessary, simple resolution switching should give priority to 's srcset attribute.

The <picture></picture> element in HTML5 is a container used to define multiple sources for an image, allowing the browser to choose the most appropriate image based on device characteristics like screen size, resolution, or pixel density. It's especially useful for responsive web design, where different images may be needed for different devices or viewport sizes.

Think of it as a "wrapper" that holds several <source></source> elements, each pointing to a different image file with specific conditions, followed by a fallback <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175493256698363.jpeg" class="lazy" alt="What is the picture element in HTML5?" > element that displays if none of the sources match or if the browser doesn't support the <picture></picture> element.

How the <picture></picture> element works

The <picture></picture> element uses the <source></source> tag to define alternative image files. The browser evaluates the sources in order and picks the first one that matches the given criteria. Common criteria include:

• media : Applies a media query (eg, max-width, min-resolution)
• srcset : Specifies the image URL(s), optionally with describes for resolution (eg, 2x)
• type : Filters by image format (eg, WebP, AVIF)

If no <source></source> matches, the browser falls back to the <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175493256755831.jpeg" class="lazy" alt="What is the picture element in HTML5?" > element inside the <picture></picture> tag.

Example use cases

1. Art direction (different crops for different screen sizes):

 <picture>
  <source media="(max-width: 799px)" srcset="small.jpg">
  <source media="(min-width: 800px)" srcset="large.jpg">
  <img src="/static/imghw/default1.png"  data-src="fallback.jpg"  class="lazy" alt="A responsive image">
</picture>

This shows a cropped version on small screens and a wider version on larger screens.

2. Format optimization (serving modern formats):

 <picture>
  <source type="image/webp" srcset="photo.webp">
  <source type="image/avif" srcset="photo.avif">
  <img src="/static/imghw/default1.png"  data-src="photo.jpg"  class="lazy" alt="A photo in the best available format">
</picture>

Browsers that support WebP or AVIF will use those (smaller, more efficient files), while others fall back to JPEG.

Key benefits

• Performance : Serve smaller, optimized images to reduce load time.
• Responsive design : Adapt visuals to different devices and screen sizes.
• Future-proofing : Support new image formats without breaking older browsers.

Note: The <picture></picture> element is not for general images. If you just need resolution switching (eg, 1x vs 2x), srcset on the <img alt="What is the picture element in HTML5?" > tag alone is often enough.

Basically, use <picture></picture> when you need art direction or format switching — not just for resolution changes.

The above is the detailed content of What is the picture element in HTML5?. For more information, please follow other related articles on the PHP Chinese website!