logo
Shopify Builds>Primitives>Responsive images

Responsive images

Definition

Responsive images are the platform's answer to serving one upload at many sizes. Shopify's CDN resizes on request through image_url, and a theme emits the results as a srcset ladder with a sizes hint, or as a picture element when desktop and mobile need different art. Width and height attributes reserve the box before the file arrives, so layout doesn't shift.

Documented at https://shopify.dev/docs/storefronts/themes/best-practices/performance/platform.

How we've used it

The work is almost never the ladder — it's the sizes string, and getting it wrong is invisible until you look at what the browser actually downloaded. A card renderer that feeds a grid has to compute sizes from the column count, the container width and the gutter at every breakpoint, because the same card is four-up on desktop and one-and-a-half-up in a mobile carousel. A hand-built campaign module does the same arithmetic against its block count: a row of two value props needs a wider candidate than a row of four. The rest is discipline. One shared renderer per theme instead of per-section markup, an explicit ratio box so nothing reflows, and a separate art-directed source only where the mobile crop is genuinely a different photograph.

Builds using it

3 further gated builds use it; their pages follow.

Related entities

Deferred media · Deferred CSS loading · Liquid snippets · Intersection Observer API

Builds

Brand story split panel: one section that renders image, hosted video or YouTube with separate desktop and mobile assets

A 50/50 story panel whose media half is a picture, a Shopify-hosted video or a YouTube embed depending on one select, whose mobile aspect ratio is computed in Liquid from the asset that will actually load, and whose type scale, spacing and side-flip are all settings — so an About page is one section, placed as many times as the story needs.

LUS Brands

DE Hero: art-directed image/video hero with layout controls

A campaign hero that serves a genuinely different mobile crop through hand-built `<picture>` markup, publishes both breakpoints' aspect ratios as CSS custom properties, switches to a hosted video from one setting, can make the whole frame a link, and decides its own loading priority from where it sits on the page.

LUS Brands

Shop-by-category carousel with collection-aware card fallbacks

A homepage category rail where adding a category is one action — pick the collection. The image, the link and the label all resolve from the collection record unless a merchandiser deliberately overrides them.

LUS Brands

Homepage exclusive-offers rail with caption heights equalized in idle time

A merchandiser-built row of promotional tiles for the Nudestix homepage — grid or swipe rail, chosen separately for desktop and mobile — whose uneven caption blocks are measured in idle time and equalized through a single `--content-height` custom property.

Nudestix

Font delivery and a template-conditioned image preload in a licensed theme's layout

Three Ships' `theme.liquid` decides its own font delivery on a licensed theme — the picked faces preloaded, an Adobe Fonts `@font-face` block inlined with its loader demoted behind it — and emits one image preload on exactly one template type, under an explicit condition.

Three Ships

Press / trust logo strip with scroll-snap carousel and no JavaScript

A blocks-based logo row for the homepage that a merchandiser can reorder, relabel and link — and that becomes a swipeable, snapping carousel on mobile through CSS alone, with no slider library and no script of its own.

LUS Brands

Mega-menu header with separate mobile menu and image blocks

A second link-list setting gives the mobile drawer its own information architecture, and section blocks put imagery into panels that Shopify's link lists have no way to carry it in.

Three Ships

Title-matched mega menu with a full-depth link-list fallback

Shopify gives a navigation item no settings of its own. This menu joins each top-level link to a theme-editor block by matching their titles, and renders a full link-list panel for every item that has no block behind it.

Nudestix