Struct Picture 

pub struct Picture;

The <picture> element - contains multiple image sources for responsive images.

Purpose

The <picture> element provides a container for zero or more <source> elements and one <img> element to offer alternative versions of an image for different display/device scenarios. It enables art direction and format-based image selection, going beyond simple resolution switching.

Content Categories

• Flow Content
• Phrasing Content
• Embedded Content
• Palpable Content

Permitted Content Model

• Zero or more <source> elements
• Followed by one <img> element
• Optionally intermixed with script-supporting elements

Common Use Cases

• Art direction (different crops or compositions for different viewport sizes)
• Serving modern image formats with fallbacks (WebP, AVIF with JPEG fallback)
• Resolution switching based on device pixel ratio
• Bandwidth optimization by serving different image sizes
• Responsive design with different aspect ratios

Key Attributes

• Global attributes only (attributes are primarily on child <source> and <img> elements)

Example

<!-- Art direction: different images for different viewport sizes -->
<picture>
  <source media="(min-width: 1024px)" srcset="/images/hero-wide.jpg">
  <source media="(min-width: 768px)" srcset="/images/hero-medium.jpg">
  <img src="/images/hero-narrow.jpg" alt="Hero image">
</picture>

<!-- Format selection: modern formats with fallback -->
<picture>
  <source srcset="/images/photo.avif" type="image/avif">
  <source srcset="/images/photo.webp" type="image/webp">
  <img src="/images/photo.jpg" alt="Photograph">
</picture>

<!-- Combining media queries and formats -->
<picture>
  <source media="(min-width: 768px)" srcset="/images/large.webp" type="image/webp">
  <source media="(min-width: 768px)" srcset="/images/large.jpg">
  <source srcset="/images/small.webp" type="image/webp">
  <img src="/images/small.jpg" alt="Responsive image">
</picture>

Accessibility

• The alt attribute should be on the <img> element, not <picture>
• Ensure all image variations convey the same essential information
• Test that fallback images are appropriate when sources don’t match

WHATWG Specification

• 4.8.1 The picture element

Trait Implementations

impl HtmlElement for Picture

const TAG: &'static str = "picture"

The HTML tag name (e.g., “div”, “span”, “img”).

const VOID: bool = false

Whether this is a void element (self-closing, no children allowed).

impl CanContain<Img> for Picture

impl CanContain<Script> for Picture

impl CanContain<Source> for Picture

impl CanContain<Template> for Picture

impl EmbeddedContent for Picture

impl FlowContent for Picture

impl PalpableContent for Picture

impl PhrasingContent for Picture