Why Images Slow Down Your Store So Much
When a customer visits your store, their browser downloads every image on the page. A single unoptimized hero image at 2.5MB takes 3+ seconds to load on a standard mobile connection. Multiply that by 10–20 product images and you have a store that feels painfully slow — even on fast WiFi.
WebP Format: The 2025 Standard
WebP images are 25–35% smaller than equivalent JPEG files and 60–70% smaller than PNGs — with the same visual quality. All modern browsers support WebP. Shopify's CDN automatically serves WebP when you use the image_url Liquid filter with the format parameter. If your theme is older, you may need to update how images are called.
The Right Image Dimensions
Never upload images larger than they'll display. A hero banner that displays at 1200px wide doesn't need to be a 4000px original. Shopify resizes images on its CDN, but only if your theme requests the right size. Use Shopify's image URL parameters to request exact dimensions: {{ image | image_url: width: 1200 }}
srcset for Responsive Images
The srcset attribute lets you provide multiple image versions for different screen sizes. The browser then downloads only the appropriate size for the user's device. A mobile visitor gets a 400px image; a desktop user gets a 1200px image. This single change can reduce mobile data transfer by 50–70%.
Lazy Loading: The Easy Win
Lazy loading defers loading of images until they're about to enter the viewport. Simply add loading="lazy" to every <img> tag below your hero section. Modern browsers support this natively — no JavaScript library needed. It's one of the fastest, safest wins available on any Shopify store.
Image Compression Best Practices
For product images, aim for under 100KB per image at display size. Use tools like Squoosh, TinyPNG, or Shopify's built-in compression. For hero banners, under 200KB is acceptable. Always compare visually before and after — a 70% quality WebP is virtually indistinguishable from a 100% JPEG to the human eye.
Alt Tags: SEO and Accessibility
Every image needs a descriptive alt tag for both SEO and accessibility. Include your product name, key descriptors, and relevant keywords naturally. Bad example: alt="image1". Good example: alt="Women's blue running shoes - lightweight mesh upper". This improves Google Image Search rankings too.