How to use the HTML5 picture element

The <picture> element of HTML5 can provide optimal images under different devices and screen conditions; it defines multiple resources through <source>, matches media conditions or formats in order, and uses as a necessary fallback; 1. Used for art guidance, such as mobile cropping, horizontal and vertical screen switching; 2. Supports modern formats such as WebP and AVIF, with priority selection based on type attributes; 3. Multi-resolution can be specified in srcset to adapt to high DPI screens; 4. The source order should be from the most specific to the widest; 5. The tag must be included to ensure compatibility and accessibility; modern browsers support it, and older browsers will fall back to , so they can be used safely.

The HTML5 <picture></picture> element is a powerful tool for delivering responsive images based on screen size, device capabilities, or orientation. It doesn't display anything by itself but acts as a container for <source></source> elements, which define different image resources, and a fallback <img src="/static/imghw/default1.png" data-src="fallback.jpg" class="lazy" alt="How to use the HTML5 picture element" > element.

Here's how to use it effectively.

When to Use the <picture></picture> Element

The <picture></picture> element is ideal when you need art direction —serving different images (not just resized versions) depending on the viewport. Common use cases include:

• Showing a cropped version of an image on mobile
• Switching between landscape and portrait orientations
• Provide high-resolution images for retina displays
• Serving modern formats like WebP to supported browsers

If you just need responsive sizing (same image, different consequences), srcset and sizes on the <img src="/static/imghw/default1.png" data-src="fallback.jpg" class="lazy" alt="How to use the HTML5 picture element" > tag are simpler and sufficient.

Structure of the <picture></picture> Element

The basic structure looks like this:

 <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="Descriptive text">
</picture>

• Each <source> can specify a media condition (like CSS media queries) and a srcset (image path or paths).
• The browser evaluates the <source> elements in order and uses the first one that matches the condition.
• The <img src="/static/imghw/default1.png" data-src="hero-fallback.jpg" class="lazy" alt="How to use the HTML5 picture element" > tag is required as a fallback and is what gets displayed if no sources match or the browser doesn't support <picture> .

Key Features and Best Practices

• Art direction with media queries
  Use media attributes to serve different crops or compositions:

   <picture>
    <source media="(max-width: 599px)" srcset="hero-mobile.jpg">
    <source media="(min-width: 600px)" srcset="hero-desktop.jpg">
    <img src="/static/imghw/default1.png"  data-src="hero-fallback.jpg"  class="lazy" alt="Hero banner">
  </picture>

• Modern image formats
  Serve WebP or AVIF to browsers that support them, with JPEG or PNG as fallback:

   <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 beautiful landscape">
  </picture>

  The browser picks the first format it supports.

• Resolution switching with srcset
  You can still use srcset within <source> for high-DPI screens:

   <source media="(min-width: 1000px)" 
          srcset="large-1x.jpg, large-2x.jpg 2x, large-3x.jpg 3x">

• Order matters
  List sources from most to least specific. Browsers stop at the first match.

• Always include <img alt="How to use the HTML5 picture element" >
  Without an <img alt="How to use the HTML5 picture element" > tag, nothing will display. It also provides the alt text, which is essential for accessibility.

Browser Support and Fallbacks

All modern browsers support the <picture></picture> element. For older browsers (like IE), the <img alt="How to use the HTML5 picture element" > fallback ensures an image still loads—just not the optimized one. This makes <picture></picture> safe to use with graceful degradation.

If you're using newer formats like WebP, keep in mind that the type check prevents unsupported formats from loading—so no extra HTTP requests are made.

---

Basically, the <picture></picture> element gives you fine-grained control over which image your users get. It's not always needed, but when you need to change image composition or leverage modern formats, it's the right tool. Just remember to keep your markup clean, test across devices, and always provide a solid fallback.

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