Does Shopify support WebP?
Yes. Online Store 2.0 themes request WebP (and sometimes AVIF) from Shopify's CDN via the image_url filter. The catch: Shopify still stores your original. If you upload a 5 MB PNG, every variant is derived from that heavy source. A 1600 px WebP at 80% quality is typically 80–200 KB and gives the CDN a much better starting point.
Why it matters
- LCP on product pages is almost always the hero image. A 150 KB WebP instead of a 1.8 MB PNG is often a 1–2 second mobile win.
- Theme sections (collection grids, lookbooks) multiply one bad original across 12–24 thumbnails.
- App pixels and reviews cannot fix image weight. Conversion happens before upload.
- Nothing is uploaded to a third-party optimiser if you convert in the browser first.
Shopify WebP workflow
- Export product photos from Lightroom or your studio at full quality, or collect the current Media Library originals.
- Drop up to 100 files into the converter. Set quality to 80 for photos, 90 for graphics with text.
- Set maximum width to 2048 px for product heroes (Shopify's common large render) or 1024 px for secondary shots.
- Download the first image to check sharpness on a product page, then unlock the ZIP for the rest.
- In Shopify admin, replace each product image. Keep the same alt text; only the file changes.
Settings that work
For fashion and jewellery, stay at 82–88% quality so fabric texture survives. For white-background catalogue shots, 75–80% is usually indistinguishable. Collection-grid only images can be capped at 800 px wide.
| Use | Max width | Quality | Typical WebP |
|---|---|---|---|
| Product hero | 2048 px | 80–85% | 120–250 KB |
| Secondary product shot | 1024 px | 80% | 40–90 KB |
| Collection tile | 800 px | 75–80% | 25–50 KB |
| Logo / badge | 400 px | 90% | 8–20 KB |
Common mistakes
- Uploading WebP *and* leaving the giant original on the product — replace, do not stack.
- Forgetting alt text when you replace files. Copy it first.
- Capping width below the largest theme render (some hero sections use 2500 px).