Shopify Image Optimisation: The Complete Guide

Why images matter so much

Images typically account for 60–80% of a webpage's total file size. For a product-heavy Shopify store, that proportion is often higher. Every unnecessary kilobyte adds to load time. Slower pages tend to convert worse; one widely cited retail study linked a 100ms delay to a drop of up to 7% in conversion.

Shopify serves images in WebP to browsers that support it and applies some compression, but it only works with what you give it. Upload a 15MB image and Shopify will serve a slightly smaller version of a 15MB image. Upload high-quality JPG or PNG at about 2x display size instead of converting to WebP yourself.

File format: when to use what

Product photos: JPG

For product photography — real-world photos with natural colour variation — JPG is the right format. It achieves excellent quality at small file sizes for photographic content. Target 60–80% quality in your export settings. The difference in visible quality between 80% and 100% JPG is essentially invisible; the difference in file size is substantial.

Logos, icons, graphics: PNG or SVG

For graphics with flat colour, transparency, or text — logos, badges, icons — PNG or SVG is better. JPG compression creates artefacts around sharp edges that look terrible on logos. SVG is ideal for logos and icons that need to scale to any size without quality loss.

Animated content: use video, not GIF

GIFs are extremely inefficient. A 2-second product animation as a GIF might be 5MB. The same animation as a short MP4 video might be 200KB. If you're showing product animations or demonstrations, use a short autoplay, muted video instead.

Sizing: upload at display size

Check what size your theme actually displays product images. Most Shopify themes show product images at somewhere between 600px and 1200px wide. There is no reason to upload a 4000px wide image. It will be scaled down by the browser — but only after the full 4000px version has downloaded.

A practical rule: upload product images at 2x your maximum display size (to support retina screens). If your theme shows images at 600px, upload at 1200px. Not at 4000px.

Compression before upload

Before uploading images to Shopify, compress them. Free tools that work well:

• Squoosh (squoosh.app) — browser-based, gives you precise control over quality and format
• TinyPNG / TinyJPG — simple drag-and-drop, good for batches
• ImageOptim — Mac desktop app, excellent for bulk processing

Target under 200KB for standard product images. Hero images can go up to 400KB if necessary. Anything larger than that should prompt a rethink.

Lazy loading

Use native loading="lazy" for images below the fold so they download when the shopper scrolls near them. Do not lazy-load the hero or Largest Contentful Paint image — that delays the first paint and hurts Core Web Vitals.

Alt text: important for SEO and accessibility

Every product image should have descriptive alt text. Not "image1.jpg" or "product photo" — a description that tells both Google and screen readers what the image shows. "Dark chocolate sea salt caramel truffles in a white gift box" is good alt text. It's also good for SEO in image search.

Shopify uses the product title as default alt text for product images, which is better than nothing. Adding more specific alt text to key images is worth doing.

Auditing your current images

Run your store through PageSpeed Insights (pagespeed.web.dev) and look at the "Properly size images" and "Serve images in next-gen formats" recommendations. These will show you exactly which images are the biggest problems and how much you'd save by fixing them.