How to Optimise Images on Shopify: Faster Pages Without Ugly Photos

Images are usually the heaviest part of a Shopify page, which makes them the most reliable place to start on speed. The steps below keep photos sharp while cutting the bytes shoppers have to download.

How do you optimise images on a Shopify store?

Optimise images on a Shopify store by uploading good-quality source files, letting Shopify serve modern formats automatically, requesting images at the size they are displayed, lazy-loading only below-the-fold images, preventing layout shift and writing descriptive alt text. Each step is explained below.

Does Shopify convert images to WebP automatically?

Shopify converts images to modern formats automatically. Shopify’s documentation states that the CDN detects which formats a browser supports, such as WebP and AVIF, and selects a format for optimal quality and file size. Upload good-quality JPEG or PNG files and let Shopify handle delivery; uploading already-blurry, over-compressed files only lowers quality.

What size should Shopify images be?

Shopify images should be uploaded large enough for the biggest size they will be displayed at, including zoom, and requested by the theme at the size each slot needs. Shopify’s image CDN supports widths up to 5,760 pixels (Shopify). A theme that uses responsive image sizes sends a small file to a phone and a larger one to a wide screen, as described in web.dev’s responsive images guide; a theme that sends one 4,000-pixel file to every slot wastes bandwidth on every visit.

Should you compress images before uploading to Shopify?

Light compression before uploading to Shopify is useful for very large camera files, but heavy compression is not needed because Shopify’s CDN optimises delivery. Aim to upload the smallest file that still looks sharp on a high-resolution screen, and keep the original high-quality file in case it needs re-exporting.

Which Shopify images should be lazy-loaded?

Shopify images below the fold should be lazy-loaded, and images visible when the page first loads should not be. web.dev advises against lazy-loading images that are likely to be in the viewport at load, especially the Largest Contentful Paint image. The hero image and first product image can also be given high fetch priority (web.dev).

How do you stop images causing layout shift on Shopify?

Stop images causing layout shift on Shopify by setting width and height attributes, or a fixed aspect ratio, on every image so the browser reserves space before it loads. Without reserved space, content jumps as images arrive, which hurts the Cumulative Layout Shift score described on web.dev. Shopify’s image_tag filter outputs width and height for this reason.

How should you write alt text for Shopify product images?

Write alt text for Shopify product images as a short, natural description of what the image shows, such as "navy linen shirt, front view". Google’s image guidance warns that stuffing alt text with keywords creates a poor experience and may cause a site to be seen as spam. Alt text also makes the store usable for shoppers who rely on screen readers.

Which image settings matter most for Shopify page speed?

The image settings that matter most for Shopify page speed depend on where the image appears on the page:

What does Mooshfy check first in a Shopify image audit?

Mooshfy checks the Largest Contentful Paint image on the home page and a product page first: whether it is lazy-loaded by mistake, whether it is requested far larger than it displays, and whether it has width and height set. Those three issues account for most image-related speed problems Mooshfy finds.

Mooshfy runs free performance audits for brands in Hong Kong and shows which images are slowing the store down.