Picture element and responsive images

A responsive site doesn’t just rearrange its layout at different sizes — it also serves appropriately sized images. The HTML <picture> element tells the browser exactly which image file to load based on viewport width or format support, so mobile users never download a 2400 px desktop image.

What the picture element does

The <picture> element wraps one or more <source> elements and a fallback <img>. The browser evaluates each <source> in order and loads the first one that matches. If none match, it loads the <img> fallback.

This gives you two superpowers:

• Resolution switching: Serve a small file at narrow viewports, a large file at wide ones.
• Format switching (art direction): Serve WebP to browsers that support it, JPEG/PNG to those that don’t.

Inserting a Picture element

1. Open the Elements panel

   Click the + button in the toolbar to open the Elements panel.

2. Drag in a Picture element

   Find Picture under the Media category and drag it onto the canvas or into the Outline pane.

3. Set the fallback image

   The <img> inside the picture element is the fallback. Set its src, alt text, and dimensions in the Inspector pane.

Adding source elements for responsive loading

With the Picture element selected, click Add Source in the Inspector. Each source has two key attributes:

• media: A media condition, like (max-width: 768px), that must be true for this source to be used.
• srcset: The image file (or files at different densities) to load when the condition is met.

For example, to serve a compact crop on mobile and a wide crop on desktop:

<picture>
  <source media="(max-width: 480px)" srcset="hero-mobile.jpg">
  <source media="(max-width: 1024px)" srcset="hero-tablet.jpg">
  <img src="hero-desktop.jpg" alt="Team photo">
</picture>

Format switching: WebP with a JPEG fallback

WebP images are typically 25–35% smaller than equivalent JPEG files. To serve WebP to supporting browsers while keeping JPEG as a safe fallback, add a source without a media attribute but with a type attribute:

<picture>
  <source type="image/webp" srcset="hero.webp">
  <img src="hero.jpg" alt="Hero image">
</picture>

Site Designer lets you set the type attribute on any <source> element in the Inspector.

Lazy loading

For images below the fold, add loading="lazy" to the fallback <img>. The browser defers loading the image until it is near the viewport, reducing initial page weight.

Art direction and the focus viewer

Art direction means serving a completely different crop of an image at a different breakpoint — not just a smaller version of the same frame. For example, a wide landscape photo on desktop might become a tight portrait crop on mobile.

When you upload an image to a Picture source in Site Designer, the Focus Viewer lets you define which part of the image is the focal point. This helps Site Designer crop the image correctly for each source without cutting off the subject.