How to optimize images for a faster Shopify store

To optimize images on Shopify, you do not need to compress each file by hand. Shopify’s image CDN already resizes and compresses them for each device. Your job is to upload sensible files, cut unnecessary images, make sure the main image at the top of each page loads first, then measure the result.

Step 1: measure before you change anything

In your Shopify admin, open Online Store to see the performance summary. For detail, go to Analytics > Reports and open the web performance reports. They use real visitor data and rate each Core Web Vital. Data can take up to 36 hours to appear.

These are the targets set by Core Web Vitals, measured at the 75th percentile of page loads. Images mainly affect LCP and CLS. If your store is new, run a public page through PageSpeed Insights instead.

Step 2: upload sensible files

Start from a good original. Our page on Shopify image sizes gives the numbers, and 2048 x 2048 pixels is the recommended square size for product images.

Shopify’s guidance on compression points in two directions. Its theme image guide says images do not need manual compression before upload. Its photography guide suggests aiming for no more than 200 KB, without compressing so far that images turn blotchy. The practical reading: do not spend hours on this, but avoid uploading a heavy, oversized file when a smaller one looks the same.

You also do not need to convert anything to WebP. Shopify detects what each browser supports and serves a suitable format, such as WebP or AVIF.

Step 3: remove images you do not need

No setting makes an unnecessary image free, so this step is worth more of your time than compression. Shopify warns that pages with many high-quality images can load slowly. Go through your homepage and your longest product pages and ask what each image adds.

• Replace a slideshow with one strong banner if the other slides say little.
• Delete near-duplicate shots from product galleries.
• Remove decorative sections nobody would miss.

Step 4: protect the first image on the page

The largest element on the first screen is often an image, so it can decide your LCP. This part lives in your theme’s code, so ask a developer or your theme’s support if you are not comfortable checking it.

• Never lazy-load it. web.dev’s LCP guide says lazy-loading the LCP image always causes an unnecessary delay. Lazy loading is for images further down the page.
• Give it priority. fetchpriority="high" on the image helps the browser load it sooner. Use it on one or two images at most.
• Avoid CSS background images for it, and do not hide it behind a fade-in animation. Shopify’s theme performance guide warns against both.

Step 5: stop images from pushing the page around

When an image has no width and height, the browser cannot reserve its space, and the text jumps as it loads. web.dev names this as a common cause of poor CLS. Shopify’s image_tag filter adds both attributes for you, so custom sections built with it are covered.

Step 6: tidy up the rest

Give files short, descriptive names, as Google suggests: black-leather-bag.jpg rather than IMG00023.JPG. Add alt text while you are there. Then wait for new data and compare with your first reading. Images are only one part of speed, and our guide on how to speed up a Shopify store covers apps and themes too.

Starting from clean files

Image cleanup is easier when each photo is uploaded once and used on purpose. Forgefont checks every image, avoids duplicates and attaches each one to the right product and section. Configure your store to see what it would cost for your catalog.