How to Fix Images in Shopify (Compression, WebP, Alt Text)
Shopify handles a lot of image optimisation automatically — CDN delivery, WebP conversion, responsive variants, native lazy loading. But there's still work: bulk compression of large originals, alt text backfill, format choice per image type, and theme-level controls. This guide covers Shopify-specific image workflow. Pair with image guide and WordPress version.
Step-by-step: How to optimise Shopify images
- Audit image weight. DevTools Network → filter images. Note total image weight per page. Shopify CDN auto-resizes and converts; if images are still heavy, originals are over-large.
- Bulk-compress large originals. Apps: Crush.pics, TinyIMG, AVADA SEO Image Optimizer, Plug in SEO. Compress all product images, especially originals over 1MB. Save up to 70% bandwidth without visual degradation.
- Verify WebP delivery. View source on a product page. Image src URLs include format conversion via Shopify CDN (look for .webp or _500x_crop_center suffixes). All modern Shopify themes and CDN serve WebP to supporting browsers automatically.
- Configure theme image sizes. Dawn and 2.0 themes use srcset with multiple sizes. Verify in view-source on product page — should see srcset='url 200w, url 400w, url 800w, url 1200w'. Older themes may serve single large image.
- Enable lazy loading correctly. Shopify themes use loading='lazy' by default on below-fold images. Hero images and first product image should NOT be lazy. Verify in source — first product image should have loading='eager' or no loading attribute.
- Backfill alt text. Use bulk alt-text app (Image Optimizer, AVADA, Crush.pics) or manual workflow. Priority: top 100 highest-traffic products first. Decorative images get alt='' (empty), never omit attribute.
- Monitor. After every theme update, re-test 3-5 product pages for image loading correctness. Theme updates can break lazy-loading or srcset configuration.
Frequently Asked Questions
Does Shopify need image compression apps if the CDN already compresses?
Yes for originals over 1-2MB. Shopify CDN resizes and converts format but doesn't aggressively compress the source. A 5MB JPEG uploaded gets served as a 200KB WebP at display size — but bandwidth and storage on uploads benefit from compressing the source first. Most stores benefit from compression apps.
Best Shopify image optimisation apps?
Crush.pics — best compression ratios, free tier (5MB/month). TinyIMG — good UI, integrates with Tinify. AVADA SEO Image Optimizer — broader SEO functions including image. Plug in SEO — full SEO suite with image features. Most stores need one image app; multiple cause conflicts.
Why are my Shopify images slow despite CDN?
Common: originals over 2MB (CDN serves resized but slowly), CDN region mismatch (your store served from a far data centre), or theme not requesting appropriately-sized variants. Use DevTools Network tab to verify which URL/size is loaded; if larger than needed, theme srcset config is wrong.
Does Shopify support AVIF?
Yes since 2023 — Shopify CDN serves AVIF to browsers that support it (Chrome 85+, Firefox 93+). Verify in DevTools Network → Accept-Headers vs Content-Type. AVIF is 20% smaller than WebP at equivalent quality.
How do I add alt text to thousands of Shopify products at once?
Bulk Image Editor app, AVADA bulk alt text, Image Optimizer's AI alt text feature. For AI-generated alt text, review the top 100 manually for accuracy — AI sometimes misses brand-specific context. Schedule monthly alt-text audits as new products are added.