Shopify Image Optimisation: The Complete Guide
Content notice: This article is more than 12 months old. The information may still be relevant, but some tooling recommendations may have changed.
In almost every slow Shopify store I've audited, images are the primary culprit. A product photo uploaded straight from a camera at 8MB, displayed at 400px wide. Multiply that by 50 products and you have a store that loads in six seconds and loses most of its visitors before they see a single product.
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, and load time directly affects conversion rate — Google's research puts it at around 7% lost conversion per second of delay.
Shopify does some automatic optimisation (it serves images in WebP format 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.
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.
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.
Want a full performance audit of your store?
Image optimisation is one part of what I look at in a CRO audit. I'll tell you exactly what's slowing your store and what to fix first. From $699 AUD.
Book an audit →