# How to optimize images for a faster Shopify store

> Shopify already compresses your images. Here is what is left for you to do: measure, size files sensibly, cut extra images and protect your hero image.

Published 2026-11-04, updated 2026-11-04. Source: https://forgefont.com/blog/optimize-shopify-images

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](https://help.shopify.com/en/manual/online-store/web-performance/web-performance-reports). They use real visitor data and rate each Core Web Vital. Data can take up to 36 hours to appear.

| Metric | Measures | Good |
| --- | --- | --- |
| Largest Contentful Paint (LCP) | Loading | 2.5 seconds or less |
| Interaction to Next Paint (INP) | Interactivity | 200 ms or less |
| Cumulative Layout Shift (CLS) | Visual stability | 0.1 or less |

These are the targets set by [Core Web Vitals](https://web.dev/articles/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](https://pagespeed.web.dev/) instead.

## Step 2: upload sensible files

Start from a good original. Our page on [Shopify image sizes](https://forgefont.com/blog/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](https://help.shopify.com/en/manual/online-store/images/theme-images) says images do not need manual compression before upload. Its [photography guide](https://help.shopify.com/en/manual/products/product-media/product-photography) 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](https://shopify.dev/docs/api/liquid/filters/image_url), 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](https://help.shopify.com/en/manual/online-store/web-performance/improving-web-performance). 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](https://web.dev/articles/optimize-lcp) 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](https://shopify.dev/docs/storefronts/themes/best-practices/performance) 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](https://web.dev/articles/optimize-cls) 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](https://developers.google.com/search/docs/appearance/google-images): `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](https://forgefont.com/blog/speed-up-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](https://forgefont.com/configurer) to see what it would cost for your catalog.

## Frequently asked questions

### Do I need an image compression app on Shopify?

Usually not as a first step. Shopify’s image CDN already serves resized, compressed files. Shopify also lists apps among the biggest factors in store speed, so check your images and your theme before adding one.

### Will optimized images improve my Google ranking?

They can help the page experience, but nothing guarantees a ranking. Google says good Core Web Vitals do not ensure top placement, and relevant content comes first.

### Why are there no speed scores in my Shopify admin?

New stores may not have enough data, and stores in private mode with a password may show no metrics. Shopify’s reports need real visitors, so the numbers appear only after launch.