The <picture> element is used for art direction to deliver different images based on screen size or layout. 1. It contains <source> elements with media queries to specify when each image should be displayed, ending with a required fallback. 2. Common use cases include mobile vs. desktop cropping, orientation changes, and design-driven image swaps. 3. Best practices include always using an tag for accessibility, writing consistent alt text, avoiding <picture> for resolution-only changes, testing across devices, optimizing each image, and combining format switching (like WebP and JPEG) with art direction, ensuring optimal, context-appropriate image delivery for responsive designs.

The HTML <picture></picture> element is a powerful tool when you need to deliver different images based on screen size, device, or layout — a practice known as art direction. Unlike simple responsive images that only change resolution, art direction often involves cropping, re-framing, or even swapping entirely different images to better fit the design on various devices.

Here’s how to use the <picture></picture> element effectively for art direction:

1. Understanding the <picture></picture> Element Structure

The <picture></picture> element acts as a container for multiple <source></source> elements, ending with a fallback <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175410918639647.jpeg" class="lazy" alt="How to use the HTML picture element for art direction" > tag. Browsers read the sources in order and use the first one that matches the given media condition.

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

• The media attribute in <source> defines when each image should be used.
• srcset points to the image file.
• The <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175410918874197.jpeg" class="lazy" alt="How to use the HTML picture element for art direction" > tag is required and serves as the fallback (also used by assistive technologies).

In this example:

• On screens smaller than 800px, narrow.jpg is shown (e.g., a vertically oriented or tightly cropped version).
• On wider screens, wide.jpg appears (e.g., a landscape version with more context).
• If none of the sources match, the browser falls back to fallback.jpg.

2. Use Cases for Art Direction

Art direction shines when layout changes significantly across breakpoints. Common scenarios include:

• Mobile vs. Desktop Cropping: On mobile, you might want to focus on a person’s face, while on desktop, show the full scene.
• Orientation Changes: Serve a vertical image on portrait mobile and a horizontal one on landscape or desktop.
• Design-Driven Swaps: Replace an image with one that better fits a redesigned sidebar or hero section on smaller screens.

For example:

<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>

This ensures the mobile version isn’t just a scaled-down desktop image, but a thoughtfully composed one.

3. Best Practices and Tips

To get the most out of <picture> for art direction:

• Always include an <img src="/static/imghw/default1.png" data-src="fallback.jpg" class="lazy" alt="How to use the HTML picture element for art direction" > tag: It’s not optional. It provides accessibility and a fallback.
• Use descriptive alt text: The alt should reflect the image’s purpose, not vary by source.
• Avoid using <picture> just for resolution switching: If you're only changing image size (not composition), use srcset and sizes with <img src="/static/imghw/default1.png" data-src="fallback.jpg" class="lazy" alt="How to use the HTML picture element for art direction" > instead.
• Test across devices: Make sure transitions between sources are smooth and don’t cause layout shifts.
• Optimize each image: Tailor file size and format (e.g., WebP) for each version.

You can also combine format switching with art direction:

<picture>
  <source media="(max-width: 799px)" srcset="crop-small.webp" type="image/webp">
  <source media="(max-width: 799px)" srcset="crop-small.jpg" type="image/jpeg">
  <source media="(min-width: 800px)" srcset="scene-wide.webp" type="image/webp">
  <source media="(min-width: 800px)" srcset="scene-wide.jpg" type="image/jpeg">
  <img src="/static/imghw/default1.png"  data-src="fallback.jpg"  class="lazy" alt="A city skyline at dusk">
</picture>

This delivers both art-directed and format-optimized images.

Basically, the <picture></picture> element gives you precise control over which image appears where — essential when image composition must adapt to the layout, not just the screen size. Use it when you need more than scaling: when you need true art direction.

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