# How do you set up responsive image sizes in a Shopify theme?

Source: https://themestackguide.com/shopify-theme-responsive-image-sizes/

Most themes serve images that are too large for the slot they fill, or too small on wide screens. How the sizes attribute works, the values that match real layouts, and the Liquid pattern that gets it right.

Open any Shopify product page, inspect the main image, and you will often find the browser downloading a 2048-pixel file to fill a 600-pixel slot. The theme told the browser to fetch the biggest available image because nobody set the sizes attribute correctly. Fixing responsive image sizes is one of the highest-leverage speed wins in a Shopify theme: smaller downloads, faster paint, and no visible change to the design.

The mechanism has two parts. The srcset attribute lists the available image widths; the sizes attribute tells the browser how wide the image slot will be at each viewport width, so it can pick the smallest sufficient file. Get srcset right and sizes wrong, and the browser still downloads too much. Most themes get srcset right out of the box and sizes wrong everywhere.

## What the sizes attribute actually does

Sizes is a set of media conditions and slot widths, read left to right: the first matching condition wins. A typical product image slot might be full-width on mobile, half-width on tablet, and a fixed 600 pixels on desktop. The correct sizes value mirrors that: `(max-width: 749px) 100vw, (max-width: 989px) 50vw, 600px`. The browser then picks from srcset the smallest image at least as wide as the computed slot, factoring in device pixel ratio.

The common failure is a sizes value copied from a different section, like a hero banner's `100vw` applied to a product thumbnail. The browser dutifully downloads a full-width image for a 200-pixel thumbnail. Audit by checking the three or four image slots that matter most: product main image, collection grid, cart thumbnails, and the homepage hero.

## The Liquid pattern that gets it right

In Liquid, build the srcset from the image object with the widths your design actually needs, not every width Shopify offers: `300, 600, 900, 1200, 1600` covers nearly every slot. Then write the sizes attribute to match the CSS layout of that specific slot. The key discipline is per-slot values: the product page main image, the collection card, and the blog featured image have different layouts and need different sizes strings.

For art direction, cases where mobile should show a different crop, use the picture element with media queries rather than stretching one crop across all viewports. And keep native lazy loading on every image below the fold: `loading="lazy"` costs nothing and saves everything on long collection pages.

## Testing that it worked

After the change, reload the product page with the network tab open and a throttled connection. The main image request should be close to the slot width times the device pixel ratio, not the maximum available. Check at a phone viewport and a desktop viewport separately, because sizes bugs usually show up at only one of them. Then spot-check collection pages, where a single wrong sizes value multiplies across dozens of thumbnails.

One caution: never let the sizes-driven image go below what the design needs on high-density screens. A 600-pixel slot on a 2x phone display needs a 1200-pixel file to look sharp. The goal is the smallest sufficient file, not the smallest file. Measure with your eyes as well as the network tab: if the image looks soft after the change, the sizes value is under-declaring the slot.

What widths should I include in srcset?
:   Match your design's real slots: 300, 600, 900, 1200, and 1600 cover nearly every Shopify layout. More widths add markup weight without meaningful savings.

Why is my theme downloading huge collection thumbnails?
:   Almost certainly a wrong sizes attribute on the card image, often a copied 100vw from a banner. Give the card its own sizes value matching the grid column width.

Does this matter if I already lazy-load images?
:   Yes. Lazy loading defers the download; correct sizes shrinks it. You want both.

## Frequently asked questions

### Do I need an app for every store feature?

No. Many features like announcement bars, basic badges, and simple sections are built into modern themes or can be added with a small setting change. Apps earn their place when they handle data, automation, or integrations you cannot maintain yourself. Audit quarterly and remove apps nobody uses.

### How can I test a change without risking my live store?

Duplicate your theme, make the change on the copy, and preview it on a phone and a desktop before publishing. Test a full purchase on the preview as well, since checkout adjacent changes can break buttons or layout in ways a quick glance misses.