AI Speed Guides

Shopify Image Optimization: The Complete Guide

Images are the heaviest thing your Shopify store ships to shoppers. This guide covers modern formats, how Shopify's CDN actually sizes images, how far you can safely compress Shopify images, srcset, lazy-loading, and alt text — without changing how a single pixel looks.

Why images dominate Shopify page weight

On most Shopify stores, images account for more downloaded bytes than every other resource combined. A single product page loads a hero shot, a full gallery, variant swatches, recommendation thumbnails, and trust badges — and a collection page multiplies that by every tile in the grid. When those files are oversized masters saved in legacy formats, shoppers download megabytes they never needed.

The cost shows up in revenue, not just seconds. Akamai research found that cutting store load time by one second can increase conversions by up to 7%, and Deloitte/eBay research puts every 100ms of load time at roughly 1.1% of conversion. Mobile raises the stakes further: it is typically the majority of Shopify traffic and the slowest experience, so image weight hits your largest audience hardest. We break down the revenue math in speed and conversion.

Here is the encouraging part: images are the most fixable speed problem on Shopify. TTFB is controlled by Shopify's hosting and checkout scripts are locked by Shopify, but images are entirely yours to optimize.

JPEG and PNG vs WebP vs AVIF: which format wins

AVIF is the most efficient format you can serve on Shopify today, WebP is the near-universal fallback, and JPEG/PNG should be treated as source formats rather than delivery formats. The practical differences:

In practice, converting product photography from JPEG or PNG to AVIF or WebP cuts file size dramatically at the same perceived quality. PNG is the most common silent killer: a photographic PNG can be several times the size of an equivalent JPEG with zero visible benefit.

How Shopify's CDN sizing works — and why the master image matters

Shopify's CDN generates every displayed size from the master image you upload, so an unoptimized master degrades every variant derived from it. When your theme requests an image with a width parameter, the CDN resizes the master on the fly, caches the result, and serves it globally. That resizing is free and automatic — but it inherits whatever quality, noise, and inefficiency the master contains.

This is why optimizing at the source beats fiddling with theme settings. Replace a bloated master with a properly compressed one and every thumbnail, grid tile, zoom view, and email render inherits the savings instantly. Fix one file, fix every size.

How much can you compress without visible loss? (SSIM)

Far more than most merchants expect — modern formats routinely deliver files around 86% lighter that remain visually indistinguishable, and SSIM is how you prove it. SSIM (Structural Similarity Index) scores how closely a compressed image matches the original on a 0-to-1 scale, modeling human perception of structure, contrast, and luminance rather than raw pixel differences. Scores above roughly 0.99 are effectively identical to the human eye.

The mistake to avoid is guessing with a quality slider: too conservative and you leave most of the savings on the table, too aggressive and product textures visibly smear. Measuring SSIM per image removes the guesswork. AI Speed's image engine targets ~99.3% SSIM, which is how it gets to ~86% lighter files with no visible change on product photography.

Right-sizing with srcset

Right-sizing means never sending a device a larger image than it can display, and srcset is how the browser chooses. A 375px-wide phone screen should never download a 2048px master; with a srcset listing several widths and a sizes attribute describing the layout, the browser picks the closest match for the shopper's screen and pixel density automatically.

Shopify makes this straightforward: Liquid's image rendering can emit a full srcset from a single master, and the CDN generates each width on demand. Audit your theme's product cards and hero sections first — grid thumbnails pulling desktop-sized images are one of the most common and most expensive right-sizing failures.

Lazy-load below the fold — never the LCP image

Lazy-load every image the shopper cannot see on first paint, and eagerly load the one they can. Adding loading="lazy" to below-the-fold images defers their download until the shopper scrolls near them, cutting initial page weight sharply on long collection pages.

The exception is the Largest Contentful Paint element — usually your hero or main product image. Google's Core Web Vitals expect LCP within 2.5 seconds at the 75th percentile of real users, and lazy-loading the LCP image adds a discovery delay that pushes it later. Load it eagerly with high fetch priority instead. While you are in the markup, give every image explicit width and height so the browser reserves its space — unreserved media is a classic cause of layout shift, and CLS must stay at or below 0.10. Full thresholds and tactics live in our Core Web Vitals guide.

Shopify alt text: SEO, accessibility, and AI vision

Alt text does three jobs at once: it makes images rank in search, makes your store usable with screen readers, and increasingly feeds the AI systems shoppers use to discover products. Good alt text describes what is actually in the image, specifically — product, color, material, angle, context — in a natural sentence. Keyword-stuffed alt text helps nothing and reads badly to assistive technology.

The hard part is scale: a catalog with thousands of images rarely gets hand-written alt text. This is where AI vision earns its keep — AI Speed looks at each image and writes descriptive alt text automatically (about 5,000 tokens of AI work per image), and can generate meta descriptions plus JSON-LD structured data (~16,000 tokens per product) so search engines and AI assistants understand your catalog, not just your pixels.