Does Shopify automatically optimise images?

Shopify automatically converts images to WebP for supported browsers and serves them via its CDN. However, it cannot fix images that are uploaded at unnecessarily large file sizes or dimensions. If you upload a 5MB JPEG, Shopify will serve it more efficiently, but it is still starting from an oversized source. Optimising before upload is always better.

What image dimensions should I use for Shopify product photos?

Shopify recommends 2048 x 2048 pixels for product images to support zoom functionality. For images that will never be zoomed, 1200 x 1200 is sufficient and produces smaller files. For banner and hero images, match the maximum display width of your theme — typically 1600 to 2400 pixels wide — and keep the height proportional.

Should I use JPG or PNG for Shopify product images?

JPEG (JPG) for photographs, PNG for images that require transparency. WebP is better than both for file size, but Shopify handles the WebP conversion automatically when you upload JPEG or PNG. Focus on getting the original file size right before upload rather than worrying about format — Shopify's CDN will handle format optimisation on delivery.

Shopify Image Optimisation: The Complete Guide to Faster Load Times

Unoptimised images are the most common performance problem we see across Shopify stores. Merchants upload product photography at full camera resolution, assume Shopify handles the rest, and end up with product pages loading 4MB of images that could weigh 400KB with proper preparation.

Shopify does a lot of the work for you, but not all of it. Here is what you need to handle yourself.

What Shopify Does Automatically

Before getting into what you need to do, understand what Shopify already provides:

WebP conversion. Shopify converts uploaded images to WebP format for browsers that support it (which is now effectively all modern browsers). This typically reduces file sizes by 25 to 35% compared to JPEG at equivalent visual quality.

CDN delivery. Images are served via Fastly's global CDN, so delivery latency is minimised regardless of where your customer is located.

Responsive images via the theme. Well-built themes use Shopify's image_url filter with explicit width parameters to request images at the appropriate size for each device and screen.

What You Need to Handle

Source File Size

Shopify optimises for delivery, but it cannot meaningfully reduce an image that was uploaded at 8MB. The larger your source files, the larger the processed files, even after Shopify's compression.

Before uploading, run images through a tool like Squoosh or TinyPNG. For product photos, target under 500KB for the source file. For most web use, 200 to 350KB produces no visible quality loss.

Dimension Matching

If your theme displays product images at 800 x 800 pixels maximum, uploading a 4000 x 4000 pixel image creates unnecessary overhead. The image will be resized on delivery, but a smaller source file processes faster and stores more efficiently.

For images used in hero sections or banners, check the maximum display width in your theme and do not upload images significantly larger than that.

Alt Text on Every Image

Alt text is not an image performance issue, but it is an SEO issue that is worth addressing at the same time. Every product image should have descriptive alt text that includes the product name. In Shopify, alt text is set per image in the product editor.

Missing alt text is particularly common on variant images, which are added quickly and often left blank.

Theme-Level Optimisation

Your theme controls how images are requested from Shopify's CDN. Check your theme code for these patterns:

Lazy loading on non-critical images. Images below the fold should load with loading="lazy". This defers their download until the user scrolls near them. Most modern themes do this by default, but check that custom sections or third-party apps are not bypassing it.

No lazy loading on the LCP element. The first above-the-fold image (hero, product image on product pages) should not be lazy loaded. This is a common mistake that actively hurts Largest Contentful Paint scores.

Correct srcset implementation. Good themes request images at the appropriate size for each viewport using the image_url filter's width parameter. If your theme is requesting the same image size for desktop and mobile, image delivery is inefficient on mobile.

Bulk Optimisation for Existing Libraries

If you have an established store with thousands of product images uploaded over years, re-uploading them is impractical. Apps like Crush.pics or Imageoptim for Shopify can reprocess your existing media library in bulk, applying compression to images already in Shopify's CDN.

Run a PageSpeed audit before and after to confirm the improvement.

Checking Your Work

After making image optimisation changes, run your store through Google PageSpeed Insights and look specifically at:

Serve images in next-gen formats: should show zero issues if WebP is being delivered correctly
Properly size images: flags any images being served larger than their display size
Efficiently encode images: flags images with unnecessary file size overhead

A fully optimised Shopify store should pass all three of these checks. Compare your store's performance scores against similar stores in your category at CommerceRank.ai.