How to Use the HTML5 picture Element for Responsive Images?

The HTML5 <picture> element enables responsive image delivery based on device traits like screen size or pixel density without JavaScript. It uses <source> elements with media, srcset, or type attributes in order, falling back to a required <img> with alt, width, and height.

The HTML5 <picture> element lets you serve different images based on device characteristics—like screen size, resolution, or pixel density—without relying on JavaScript. It’s built into the browser and works with standard HTML semantics and accessibility features.

Structure the <picture> element correctly

Start with a <picture> wrapper, then add one or more <source> elements (each with media queries or format hints), and end with a fallback <img>. The browser checks <source>s in order and uses the first match. If none match—or if the browser doesn’t support <picture>—it falls back to the <img>.

• Always include an <img> as the last child—it’s required and provides alt text, dimensions, and fallback behavior
• Each <source> can use media, srcset, and type attributes—don’t mix incompatible ones
• Put higher-priority or more specific sources first (e.g., media="(min-width: 768px)" before a generic one)

Use media for viewport-based switching

When you need different crops or aspect ratios across screen sizes—like a landscape hero image on desktop and a portrait-cropped version on mobile—media is your go-to.

• Example: A desktop image at 1200×400, tablet at 768×300, mobile at 320×400
• Write <source media="(min-width: 768px)" srcset="hero-desktop.jpg" width="1200" height="400">
• Then add another <source media="(max-width: 767px)" srcset="hero-mobile.jpg" width="320" height="400">
• The final <img> serves the mobile version as fallback and carries alt, width, and height

Use type and srcset for format and resolution switching

To serve modern formats (like WebP or AVIF) when supported—or high-DPR images for Retina screens—use type and srcset together.

• type="image/webp" tells the browser “only use this if you support WebP”
• srcset inside <source> can list multiple resolutions: srcset="photo.webp 1x, photo@2x.webp 2x"
• You can combine both: one <source type="image/avif" srcset="photo.avif 1x, photo@2x.avif 2x">, then a WebP fallback, then a JPEG <img>
• Don’t forget to set width and height on the <img> to prevent layout shifts

Keep accessibility and performance in mind

The <picture> element itself doesn’t change accessibility—but how you use it does. And since it defers loading decisions to the browser, it helps avoid unnecessary downloads.

• Always provide meaningful alt text on the <img>, not on <source> (they’re not exposed to assistive tech)
• Avoid using <picture> just to swap colors or filters—CSS is better for that
• Test in older browsers: IE doesn’t support <picture>, so ensure your <img> fallback looks acceptable
• Preload critical images with <link rel="preload">, but only for the version the current device will actually load

Basically, <picture> gives you precise control—just remember it’s about *what* image to show, not *how* to style it. Keep markup clean, test across devices, and lean on the <img> fallback as your safety net.

The above is the detailed content of How to Use the HTML5 picture Element for Responsive Images?. For more information, please follow other related articles on the PHP Chinese website!