Image / Picture — responsive media primitive

BLOCKSNIPPETPLANNED

blocks/image.liquid

snippets/picture.liquid

Spec only This component is planned but not yet built. The interactive playground will land in a future Mock U-07 release. This page documents the component's purpose, schema surface, file structure, and dependencies so adjacent work can plan against it.

§ 01What it is.

Responsive image primitive built on the <picture> element. Renders correct image sizes per breakpoint via Shopify's image_url filter with width descriptors. Configurable aspect-ratio lock (auto / 16:9 / 4:3 / 1:1 / 3:4), alt text, focal point, optional caption, optional figure semantics, optional rounded or square corners (always square in this design system). The snippet version accepts an image object and styling params.

§ 02When to use it.

Hero backgrounds (via the Hero component). Block slot in Flexible Columns and Flexible Rows. Product galleries (composed with other gallery components). Editorial figures inside long-form articles.

§ 03Files, type, build position.

Component type

Block — composable child of a section or other block. Lives in blocks/, added via the theme editor.
Snippet — reusable Liquid partial called from other Liquid files via {% render %}. Lives in snippets/, not directly merchant-editable.

Files

blocks/image.liquid snippets/picture.liquid

Build position

Independent. Uses Shopify's native image_url filter only.

§ 04Related components.

The components this one depends on, composes with, or pairs with. Click through to each.