Why Shopify image optimization still leaves photos slow

A shopper on the bus taps your linen shirt

Why does Shopify image optimization still leave photos slow? Because Shopify has already made your photo small, and what the shopper waits for is which copy your theme asks for, and when.

Let’s stay with one product the whole way through. You photograph a linen shirt against a white wall, upload the sharp JPEG in the admin, and it looks lovely on your laptop. Then a shopper on the bus taps the shirt from an ad on their phone, and for a moment there is a grey box where the shirt should be.

That grey box is what this post is about. Nothing is wrong with the photo you took, and you do not need to make the file smaller before it goes up. The wait comes from choices made after you clicked upload, by Shopify and by your theme, which is the design your store runs on.

What happens to the shirt after you upload it

OK, so what does Shopify do with the file? It keeps your sharp original and makes smaller copies of it for different screens. When the shopper’s phone can show a lighter kind of file, it gets that instead of the JPEG. Shopify’s image guide names those lighter files WebP and AVIF, and says you do not need to make any of them yourself. That automatic shrinking is what Shopify means by image optimization.

But Shopify does not know how big the shirt will look on the bus. Your theme does. The theme has to hand the phone a menu of those copies, and then tell it how wide the photo will sit on the screen, whether that is the full width of a phone or half of a laptop. With both, the phone picks the smallest copy that still looks sharp.

When the theme skips that, the phone plays it safe. Shopify’s notes for theme builders say that if the width hint is missing, the phone’s browser assumes the photo fills the whole screen and downloads the largest copy. If the theme offers no menu at all, the phone gets the same big file a desktop gets. Developers call the menu srcset and the width hint sizes, and you will see both words in a minute.

There is a second choice, and it is about order. Your shirt has a handful of photos in its gallery, but the shopper on the bus only sees the first one. Shopify’s advice on theme images is that the first visible photo loads straight away and is marked as the important one, while every photo further down waits until the shopper scrolls toward it. That waiting is called lazy loading.

Get the order backwards and the shirt turns up last. If the first photo is marked lazy, the phone treats the one picture the shopper is staring at as something that can wait. Google calls the moment that main photo appears Largest Contentful Paint, and its guide says a good page gets there in 2.5 seconds or less.

In the theme’s code, a first photo that gets both choices right looks roughly like this. You do not have to write it, only recognise it when you see it:

<img src=".../linen-shirt.jpg?width=1200"
  srcset=".../linen-shirt.jpg?width=400 400w, .../linen-shirt.jpg?width=800 800w, .../linen-shirt.jpg?width=1200 1200w"
  sizes="(min-width: 990px) 50vw, 100vw"
  loading="eager"
  fetchpriority="high">

The srcset line is the menu of copies. The sizes line says the shirt fills a phone screen and half of a wide one. The word eager means fetch it now, and fetchpriority="high" puts it ahead of the other files the page wants.

Why you can stop shrinking photos before you upload

This is the useful bit, and it gives you an evening back. Plenty of guides and apps tell you to squash every photo on your laptop before it goes into Shopify. Shopify’s image guide says you do not need to, and to upload the highest-quality photo you have, because the storefront copies are made from it.

Squashing it first can make things worse. Every copy Shopify makes starts from your file, so a shirt that went blotchy on your laptop stays blotchy on every phone. For the upload itself, the same guide suggests a JPEG for product photos and a PNG only for something with a see-through background, like your logo.

I know what you’re thinking. You already pay for an image compressor app. Some of those apps earn their keep on a different job, like writing the short descriptions search engines read, or renaming files. But compressing the upload is a step Shopify already takes, and it never touches the two choices in your theme: which copy the phone asks for, and which photo goes first.

So here is the decision this earns. Leave the upload alone, and spend the time on the one line in your theme that tells the phone how to fetch the shirt.

Check the shirt on your own product page

Here’s the awkward part. If your theme gets either choice wrong, no setting on the upload will fix it. The good news is you can see which one it is with a right-click.

Open your live product page on a laptop, using the link a shopper would tap, not the theme editor. Right-click the first photo and choose Inspect. A panel opens beside the page with one line highlighted that starts with <img, and that line is the theme’s instruction for the shirt.

Look for three words on it, in this order:

1. sizes should be there, with widths inside it like the example above. If it is missing on the first photo, the phone may be taking the biggest copy.

2. loading should not say lazy. If it does, the shirt the shopper is looking at is waiting behind files that matter less.

3. fetchpriority should say high on this photo, and on no other photo on the page.

Then scroll down to a photo further along the gallery, right-click it, and choose Inspect again. That one should say lazy. If it says eager and high as well, every photo is asking to go first, and the shirt has to share the line.

If something is off, send that highlighted line to whoever built or sells your theme, or check whether the theme has an update. The Shopify notes linked above describe this exact fix, so you can point them straight at it.

Once those three words are right, one gap is left. The phone reads your page from the top, so it only asks for the shirt when it reaches that line, and Google’s guide to that photo says it should start loading as early as possible. Closing that gap is the one job Whoosh does here.

Whoosh looks at which photo real visitors see first on each page, and tells the phone to start fetching that photo early. It does not compress your photos, and it does not copy your theme or rewrite that line for you, so a first photo marked lazy is still a theme fix. That is Whoosh’s AI Page Preloading plan, US$99 a month with a 7-day free trial.

If you already installed a speed app, the table of speed apps matches each listing to the wait it fixes, including a huge photo.

You can stop when the first photo has a sizes hint, does not say lazy, says high, and the gallery below it waits its turn. If the shirt is still slow after that, look at what loads ahead of it, like a signup popup, which is how Klaviyo can slow a page. The speed check measures that page for you, and the FAQs cover what installing Whoosh changes.