Shopify image optimization

Who handles what

Upload sizes and limits

Shopify's documentation states that product and collection images can be up to 5000 by 5000 pixels or 25 megapixels, with a file size under 20 MB. Shopify then creates the smaller versions the theme needs. Uploading high-quality images comfortably within those limits gives the best results; there is little benefit in pre-compressing heavily, which can reduce quality without improving delivery.

Very large images still take longer to process and can be wasteful where a theme only ever displays them small, so use sensible sizes for each purpose.

Consistency that makes the store look better

Stop the page jumping

When an image loads without its space reserved, content below it jumps down. This is measured as Cumulative Layout Shift, one of the Core Web Vitals, and it is annoying for shoppers who try to tap something just as it moves. Current themes usually reserve image space correctly; problems typically come from custom sections, app widgets or images with inconsistent ratios in grids.

Checking the web performance reports and loading key pages on a phone shows whether layout shift is a problem.

Alt text that helps

• Describe what matters

  For a product image, the item, colour and any key detail shown.

• Avoid keyword lists

  Alt text is for people, not a place to repeat search terms.

• Decorative images

  Purely decorative images can have empty alt text so screen readers skip them.

• Banners with text

  If text is in the image, the alt text should include it.

Banners with text

Banners with headlines baked into the image look sharp on desktop but often become unreadable on phones, cannot be translated, and are invisible to screen readers unless alt text repeats them. Using the theme's text overlay with a plain background image is usually better: the text stays sharp, adapts to screen size and can be edited without a designer.

Video and animation

Video can show products well but is much heavier than images. Use it where motion genuinely helps, keep clips short, avoid autoplay with sound and consider loading video only when a shopper chooses to play it. Animated GIFs are especially heavy; short video files are usually lighter for the same effect.

Product galleries

A product gallery should load the main image quickly and the others as the shopper browses, which current themes generally handle. What you control is the order and choice of images: the main image should show the product clearly, followed by detail, scale and in-use shots. Too many near-identical images add weight without helping. Zoom should work on phones for products where detail matters.