Image Optimisation on Shopify: WebP, AVIF, Lazy Loading and Beyond

Images are between 60 and 80 percent of the bytes on a typical Shopify product page. They are also the easiest performance optimisation target because most of the wins do not require code changes. This guide walks through every image performance lever Australian Shopify merchants should pull in 2026, in order of impact.

Shopify ships WebP automatically. What is missing?

Shopify converts images to WebP for browsers that support it (essentially all of them in 2026). That is a strong default, but it does not solve four problems most stores still have: oversized originals, wrong format choice for hero images, missing responsive markup, and no preload for the LCP image.

Fix those four and your image load weight typically halves without changing the look of the store.

Right-size every upload

Stop uploading 4000 pixel hero images and rendering them at 800 pixels wide. Shopify will downscale them in delivery, but the source file still affects how Shopify processes and stores the image. Worse, some apps and theme code reference the original.

Resize source images to the largest size you actually render, plus 50 percent for retina displays. For most product hero images that is 1600 pixels wide. For collection thumbnails, 600 to 800 pixels. For mobile banners, 1200 pixels. Use image compression tools like Squoosh or TinyPNG before upload.

Use AVIF where supported

AVIF is 20 to 30 percent smaller than WebP at equivalent quality. Shopify supports AVIF delivery on most plans in 2026. Browser support is around 95 percent globally and 98 percent in Australia.

To enable AVIF for your hero images, use the image_url filter with a format parameter set to avif. The fallback for older browsers is automatic. The bandwidth saving is real, especially for product photography with smooth gradients (jewellery, glassware, cosmetics) where AVIF compression shines.

Generate responsive srcset markup

A single image rendered at 1600 pixels works for a desktop hero but is overkill on a phone. The browser does not know what size your CSS will render the image at unless you tell it.

Use the srcset attribute with multiple sizes (typically 400w, 600w, 800w, 1200w, 1600w) and a sizes attribute that maps viewport widths to render widths. The browser picks the smallest image that satisfies the actual render size. On mobile, this often means downloading a 400px image instead of a 1600px one. A 4x bandwidth saving on every product page.

Lazy-load everything below the fold

Set loading=“lazy” on every image and iframe below the fold. The browser delays the download until the user scrolls near them. On long product pages with image-heavy descriptions and recommendation carousels, lazy loading can cut initial page weight by 70 to 90 percent.

One critical exception: do not lazy-load the hero image (the LCP element). Lazy loading delays its discovery, which makes LCP worse. The hero image should use loading=“eager” and ideally have a preload link in the page head.

Preload the LCP image

Add a preload link tag to the head of your product template that points at the hero image. The browser starts downloading it during the initial HTML parse instead of waiting until it encounters the image tag.

This single change typically improves LCP by 300 to 800 milliseconds on Shopify product pages. Combine with a responsive srcset on the preload link so the browser still picks the right size.

Set explicit width and height to prevent CLS

Every image needs width and height attributes. The browser uses them to compute the aspect ratio and reserve the right space before the image loads. Without them, surrounding content fills the gap and then gets pushed when the image arrives, causing layout shift.

This is purely an accessibility and CLS fix, not a bandwidth one, but it is in the same category of image hygiene that themes should get right by default.

Use a CDN that caches images aggressively

Shopify serves images from Fastly with reasonable cache headers. For very high-volume stores or stores with international traffic, putting a second CDN layer in front of Shopify gives you more control over cache TTLs and lets you push images closer to the user. Cloudflare is the most common choice for this; see our setup guide on Cloudflare Proxy with Shopify. For the full set of edge-caching techniques, read our guide to CDN caching strategies for Shopify stores.

Alt text: image performance is also SEO

Every image on a Shopify product page needs descriptive alt text. Google reads alt text as a ranking signal for image search and as accessibility context. Empty alt attributes are fine for purely decorative images; missing alt attributes are not.

Use natural language that describes what the image shows, including the product name. For variant images, mention the variant. For lifestyle images, mention the context. Avoid keyword stuffing.

For more on how image and structured data work together in Shopify SEO, see our SEO services in Sydney page.

Animations: GIF is dead, video wins

If you use animated GIFs on product pages, replace them with looping MP4 videos. A 5-second product spin as GIF can be 8MB. The same content as MP4 is 200KB. The visual quality is comparable.

Use the video tag with autoplay, muted, loop, and playsinline attributes. Set preload=“metadata” so the browser does not download the entire file before deciding to play. For hero videos, preload the poster image and let the video lazy-load.

What to measure and how often

Run PageSpeed Insights on three pages (home, collection, product) once a week. Watch LCP, total image weight, and the “Properly size images” opportunity. If image weight is growing month over month without a corresponding catalogue expansion, someone is uploading oversized assets and you need to add a content guideline.

If image optimisation feels overwhelming, our Sydney web development team runs Shopify image audits that come back with a fix list, a weight savings projection, and an implementation plan. Most merchants see 30 to 50 percent total page weight reduction from a focused image engagement.