Optimising images for Shopify stores: what actually helps (and what Shopify already does for you)

Shopify automatically serves images as WebP or AVIF and generates responsive sizes through its CDN. What it doesn't do is shrink your oversized original, so resize and compress images before you upload them. Never lazy-load your hero image.

So here's the honest version of optimising images for Shopify stores: what the platform handles on your behalf, what it quietly leaves to you, and the handful of things actually worth your time. Most of the advice out there is written by companies selling image-compression apps, which understandably colours what they tell you. We're not selling one. We just fix slow stores for a living, and images are the first place we look.

The bottom line: Shopify automatically serves your images in modern formats and the right sizes, so you don't need an app for that. What it can't do is undo a bloated original. Get the source file right (correct dimensions, then compressed) before you upload, don't lazy-load the one image that should load first, and you've done 90% of what matters.

What you need to know in 30 seconds:

• Shopify already converts and serves your images as WebP or AVIF and builds responsive sizes through its CDN. You're not missing out by not having an app for this.
• What Shopify won't do is shrink the file you uploaded. A 4MB, 4000px photo is still a 4MB monster underneath, and it's still your problem.
• The single highest-value habit: resize an image to roughly the size it'll display, then compress it, before it ever reaches Shopify.
• Free tools (Squoosh, ImageOptim, TinyPNG) do most of what a paid app does, right up until your catalogue is big enough that automation pays for itself.
• Never lazy-load your hero image. It's usually the very thing you want on screen first.

What Shopify already does to your images, and what it doesn't

Shopify automatically converts your images to modern formats (WebP, and AVIF on browsers that support it), generates several responsive sizes, and delivers them from its global content delivery network. What it does not do is shrink the original file you uploaded, crop it, or fix its dimensions. That single distinction clears up most of the confusion you'll find in forum threads.

Here's the actual pipeline. When you upload a JPEG or PNG, Shopify keeps your original and, whenever a shopper loads a page, serves them a version that suits their browser and screen: a smaller WebP on a phone, a larger one on a desktop, AVIF where it's supported. Your theme requests specific widths through Shopify's image tools (the image_url filter in Liquid), and the CDN does the resizing and format conversion on the fly. This is genuinely good, and it's free, and it's already on. It also means you usually should not manually convert everything to WebP or install an app whose main selling point is "serves WebP," because Shopify is already doing that.

The catch is the word "original." Every one of those resized, reformatted versions is generated from the file you gave it. Upload a crisp, sensibly-sized photo and the whole chain is efficient. Upload a 4000-pixel, four-megabyte export straight from your designer and Shopify will faithfully build oversized variants from an oversized source. The format is handled. The bloat is not. So the work that's left to you is the work that happens before the upload button, which is exactly the part the platform can't automate away.

Right-sizing before you upload

The most useful thing you can do with any image is upload it at roughly the size it will actually display, not the size your camera or your designer exported. This one habit fixes more slow stores than every app and clever trick combined.

The reason it's so common is a handover problem. Designers and photographers export at print resolution, because that's their job, so you get a beautiful 3000 or 4000-pixel file. You drop it straight into Shopify because it looks perfect on your monitor, and it does. The trouble is the product thumbnail it's feeding might be 600 pixels wide on a phone. You've uploaded something many times larger than anyone will ever see, and on a slow connection they pay for every one of those wasted pixels. As a rough rule, upload at about twice the size the image displays (so it stays sharp on high-resolution screens) and no larger.

Here are sensible upload sizes to aim for. Exact numbers depend on your theme, so treat these as a starting point rather than gospel, and keep your aspect ratios consistent so your grids stay tidy.

The principle underneath the table matters more than the exact figures: upload at display size, never at camera size. If you remember nothing else, remember that.

Compression: how small is small enough

Once the dimensions are right, compression squeezes the file size down further, usually with no visible loss of quality. The goal is the smallest file that still looks crisp, and for most photos you can cut the size dramatically before your eye can tell.

A reasonable target for a product photo is somewhere under 150 to 200KB once it's sized and compressed. Your hero image deserves particular attention, because it's often the largest thing on the page and the first thing a shopper waits for. Treat compression as a per-image judgement, not a single magic number: push the quality down until you can just start to notice softening, then ease back one notch. For most JPEGs that lands around the 75 to 85 quality mark.

You don't need to spend money to do this. Squoosh, Google's free browser tool, shows you the before and after side by side and lets you drag a quality slider while watching the file size fall. ImageOptim is the equivalent on a Mac, TinyPNG does it in the browser, and Shopify even bundles a basic free image resizer of its own. Whichever you use, compress the source file before you upload, because remember: Shopify generates everything else from that source, so a leaner original makes every version leaner too.

Formats: JPEG, PNG, WebP and AVIF, and when each wins

For most Shopify stores the format question is simpler than the internet makes it sound, precisely because Shopify handles the modern formats for you. Upload a good JPEG for photographs and a PNG only when you genuinely need transparency, and let the platform serve WebP and AVIF off the back of it.

A quick tour. JPEG is the workhorse for product and lifestyle photography: it compresses photos well, and Shopify will re-serve it as WebP or AVIF anyway. PNG is for logos, icons, and anything that needs a transparent background, but it's heavy, so never use it for a photograph. WebP and AVIF are the modern, smaller formats, usually a good deal lighter than the JPEG equivalent, and the key point is that you generally don't upload them yourself: Shopify produces and serves them automatically. GIF is best avoided for anything beyond a tiny animation, and even then a short muted video is usually lighter and looks better.

The honest takeaway is that the format you upload matters less than people make out, because Shopify re-serves it regardless. Spend your energy on size and compression, not on agonising over WebP versus JPEG.

Alt text that helps (and the file-name myth)

Alt text is the image step with the clearest payoff, so it's worth doing properly. It describes the image for shoppers using screen readers, and it gives Google something to read, which can earn you a spot in image search. Write what the image actually shows, in plain language: "Tan leather weekender bag, front view" tells a story; "bag leather cheap buy shopify" just looks like spam to a human and a search engine alike.

A couple of practical notes. Describe the product specifically, including a colour or model where it helps, and skip alt text entirely on purely decorative images so screen readers don't read out noise. And here's the myth worth busting while we're here: image file names barely move the needle. You'll read advice insisting you rename every DSC_0042.jpg to blue-cotton-summer-dress-front.jpg, and while a tidy file name doesn't hurt, it's a weak signal next to alt text. Don't spend an afternoon renaming files and think you've done your SEO. Spend ten minutes writing good alt text instead.

Lazy loading and the LCP trap

Lazy loading defers off-screen images so the page loads faster up front, and modern Shopify themes do it with a single HTML attribute (loading="lazy"). It's a genuine win for the long product page or the image-heavy blog post, where there's no point loading the picture at the bottom until someone scrolls near it. The trap is lazy-loading the one image you absolutely shouldn't.

Your hero, or the main product photo at the top of the page, is almost always your Largest Contentful Paint element, the single biggest thing the browser has to paint and the metric Google watches most closely for perceived speed. Lazy-load that and you've told the browser to wait before loading the very thing the shopper is waiting for, which makes your speed score worse, not better. So the rule is simple: eager-load the hero, lazy-load everything below the fold. While you're at it, make sure your images have width and height (or a set aspect ratio) so the page doesn't lurch as they load, which is the layout-shift problem we get into more in responsive design for Shopify stores. A good Online Store 2.0 theme gets this right out of the box. Custom sections and page builders frequently get it wrong.

Do you actually need an image app?

Probably not at first, and that's not what you'll hear from the companies that make them. For most stores, Shopify's automatic serving plus a free compression tool covers the job. An image app earns its place at a specific point: when your catalogue and your time make doing it by hand the bottleneck.

Think about it in terms of scale. If you've got a few dozen or a few hundred products and you add new ones occasionally, resizing and compressing each image yourself with Squoosh takes seconds and costs nothing. If you're running thousands of products with new ones landing every week, a bulk app that automatically compresses every image on upload (Crush and TinyIMG are the common ones) genuinely saves hours, and at that scale it's money well spent. The bit worth understanding is what you're actually paying for. A lot of an image app's pitch is "we serve WebP and rename your files," and Shopify already serves WebP while file names barely matter. The real value is bulk compression and automation at volume. So buy the app when you have the volume, not because a blog post told you your images need rescuing. And whatever you do, don't stack three image apps on top of each other, each adding its own scripts. That's just trading one kind of bloat for another.

What we see when we audit a store's images

We open a lot of slow Shopify stores, and images are the first suspect almost every time. The pattern is so consistent it's almost funny. A designer hands over gorgeous, enormous photos. The owner uploads them exactly as received, because they look fantastic on a 27-inch screen and Shopify seems to handle them. Months later the store feels sluggish, nobody's quite sure why, and underneath it all is a homepage hauling several megabytes of imagery on every visit.

The reason it stays invisible is that the owner only ever sees their own store in the best possible conditions: fast office wifi, a big bright monitor, the images cached from the last fifty times they looked. Their customer is on a phone, on patchy mobile data somewhere out past the metro fringe, meeting that four-megabyte hero for the first time. The two experiences have almost nothing in common. The fix, happily, is boring and quick: resize the worst offenders, compress them, make sure the hero isn't lazy-loaded, and the numbers move. It's the same theme that runs through everything we tell store owners, which is that the small, unglamorous maintenance is usually where the wins are hiding.

Frequently asked questions

Does Shopify automatically optimise images?

Partly. Shopify automatically serves your images in modern formats (WebP and AVIF) and generates responsive sizes delivered through its CDN, so you don't need an app just to do that. What it doesn't do is shrink the oversized original you uploaded, so the most important work, resizing and compressing the source file, still falls to you.

What size should Shopify product images be?

Around 2048 × 2048 pixels (square) is Shopify's recommendation for product photos, which gives a sharp zoom and keeps grids consistent. The exact best size depends on your theme, but the real principle is to upload at roughly the size the image will display, not your camera's full resolution.

What's the best image format for Shopify?

Upload JPEG for photographs and PNG only when you need transparency, such as a logo. You rarely need to upload WebP or AVIF yourself, because Shopify converts and serves those modern formats automatically. Size and compression matter far more than which format you start with.

Do image file names matter for Shopify SEO?

A little, but much less than people claim. A descriptive file name doesn't hurt, but it's a weak signal next to alt text. If you've got limited time, write good, specific alt text and don't worry about renaming every file.

Do I need an app to compress Shopify images?

Not for a small store. Shopify's automatic serving plus a free tool like Squoosh or TinyPNG covers most merchants. A bulk-compression app pays off once you have a large catalogue with frequent new uploads, where doing it by hand becomes the bottleneck.