Image optimisation on Shopify: what the platform handles and what it cannot

Shopify handles more of this than most advice assumes. Knowing what it already does saves you installing an app to do it again.

What Shopify does automatically

Format conversion. Serves WebP to browsers that support it, from whatever you uploaded.

Resizing. The image_url filter generates sized variants, so a theme requesting a 400px wide image gets one rather than the original.

CDN delivery. Globally, with caching, included.

So most "image optimiser" apps are charging you for work the platform already does.

What it cannot do

Undo a bad upload. A 5MB photograph uploaded at 6000px will be resized, but the source is still enormous and some theme contexts request it at a size closer to the original than you would like. Upload at roughly twice the largest display size, no more.

Choose the right dimensions. If a theme requests the full-size image for a 400px slot, Shopify serves what was asked for. That is a theme problem and it is common.

Know what is above the fold. Lazy loading is right for images below the fold and wrong for the hero. Getting this backwards is one of the most common causes of a poor LCP.

The settings worth changing

Explicit width and height on every image. Prevents layout shift, which is the cheapest CLS fix available.

loading="eager" on the hero, lazy on everything else. Most themes get this right now; worth verifying.

Consistent aspect ratios in collection grids. Mixed ratios cause reflow and look untidy.

On alt text

Write it for someone who cannot see the image, not for a search engine. Describing the product plainly does both jobs; keyword-stuffed alt text does neither and reads badly in a screen reader.