Shopify Image Optimisation Guide: Compress Without Losing Quality

Why Images Are the Biggest Speed Problem on Most Shopify Stores

If your Shopify store is slow, there is a better-than-even chance that images are the primary culprit. A typical unoptimised product page loads 5–15 product images, each potentially several megabytes in size, totalling more data than many entire websites. On mobile connections — where the majority of your customers shop — this is simply too much to download quickly.

The challenge with image optimisation is that it feels like you have to choose between speed and quality. Nobody wants to show low-quality, pixelated product photos — customers make buying decisions based on images, and bad photos directly cost sales. The good news is that modern image optimisation techniques allow you to compress images dramatically without any visible quality loss. You can have fast-loading pages and beautiful product photography.

This guide covers every aspect of Shopify image optimisation: file formats, compression techniques, sizing best practices, lazy loading, and the tools that make the process efficient.

Understanding Image File Formats: JPEG, PNG, and WebP

The first decision in image optimisation is choosing the right file format. Using the wrong format for a given type of image means unnecessary file sizes regardless of how well you compress.

JPEG is the standard format for product photography — complex images with many colours and gradients. JPEG uses lossy compression, which means some image data is discarded to reduce file size. At quality settings of 75–85%, JPEG compression is invisible to the human eye but significantly reduces file size.

PNG is appropriate for images requiring transparency — logos, icons, and some product shots on white backgrounds. PNG uses lossless compression, preserving every pixel but resulting in larger files. Avoid using PNG for photographic images; JPEG will give you a much smaller file at equal or better visual quality.

WebP is Google’s modern image format that offers 25–35% smaller files than JPEG at equivalent quality, and also supports transparency. All major browsers now support WebP, making it the optimal format for Shopify product images in 2026. Shopify automatically serves WebP versions of images uploaded to the platform when the browser supports it, but only if you are using the correct Liquid image rendering syntax.

The Right Image Dimensions for Shopify

Uploading a 4000 x 4000 pixel image when your theme displays it at 800 x 800 pixels maximum is one of the most common and wasteful mistakes on Shopify stores. The browser downloads the full-resolution image and then shrinks it for display — wasting bandwidth, increasing load time, and providing no visible benefit.

The right approach is to determine the maximum display size for each image type in your theme and upload at that size. For most Shopify themes, product images display at 800–1200px wide on desktop. On mobile they are typically 400–600px wide. Uploading at 1200px wide, with Shopify’s CDN generating smaller variants for mobile, is optimal for most stores.

For retina displays (which have 2x pixel density), you need images at 2x the display size for sharp rendering. So if your product images display at 800px, upload at 1600px for retina support. However, if you are already optimising and compressing, this trade-off is worth examining — many stores find that 1.5x rather than 2x retina images are indistinguishable in practice while being significantly smaller files.

Compression Techniques: How Much Is Too Much?

JPEG quality settings run from 0 (maximum compression, visible degradation) to 100 (no compression, maximum quality). The sweet spot for product photography is typically 75–85. At quality 80, the difference from quality 100 is imperceptible to most people under normal viewing conditions, while the file size reduction is 60–70%.

The best way to verify that compression is not harming quality is to do a side-by-side visual comparison at 100% zoom on a calibrated monitor. Look at the edges of objects, areas of fine detail, and gradients. If you can see compression artefacts — blocky patterns, colour banding, edge blurring — the quality setting is too low. If the images look identical, you have found a safe level of compression.

For product images on white backgrounds, you can often compress more aggressively than with lifestyle photography, because the large uniform white areas compress very efficiently without quality loss.

Implementing Lazy Loading on Shopify

Lazy loading is a technique where images only load when they are about to enter the user’s viewport as they scroll down the page. Without lazy loading, every image on a page — including those the user may never scroll to — is downloaded immediately on page load. This wastes bandwidth and delays the loading of images the user can actually see.

Modern browsers support lazy loading natively via the loading="lazy" attribute on <img> tags. In Shopify Liquid themes, this is implemented by adding the attribute to image tags. Most modern themes already include this, but older themes and themes built before 2020 often do not.

Important: do NOT apply lazy loading to above-the-fold images — your hero image, the first product image on a product page, or the first collection image. These images should load as fast as possible. Lazy loading them will delay the Largest Contentful Paint and hurt your LCP score. Apply lazy loading to images that are not visible on initial page load.

Shopify’s Native Image Optimisation Features

Shopify automatically resizes images and generates multiple size variants via its CDN. When you use the Liquid image_url filter with a width parameter — for example, {{ product.featured_image | image_url: width: 800 }} — Shopify generates and caches that specific size variant. This is more efficient than uploading separate size variants manually.

Shopify also automatically serves WebP to browsers that support it when images are rendered using the <img> tag with Shopify’s CDN URLs. This is automatic and requires no additional configuration, but your theme must be using the modern Liquid image rendering syntax rather than the older {{ image.src | img_url }} approach.

Tools for Bulk Image Optimisation

If you have hundreds or thousands of product images already uploaded to Shopify, you need a bulk optimisation tool rather than manually processing each image. Several Shopify apps handle this efficiently:

• TinyIMG — automatically compresses new images on upload and can bulk-compress your existing catalogue
• Crush.pics — JPEG, PNG, and WebP compression with bulk processing and compression reports
• Image Optimizer by Hextom — includes alt text optimisation alongside compression, which benefits both speed and SEO

For new images, establish a pre-upload workflow: resize to the maximum display dimension, compress to quality 80, verify quality visually, then upload. This prevents the accumulation of oversized images that require periodic bulk cleanup.

Specifying Image Dimensions to Prevent Layout Shift

Every image on your Shopify store should have explicit width and height attributes in its HTML. This allows the browser to reserve the correct space for the image before it loads, preventing Cumulative Layout Shift — the jarring visual jump that happens when images load and push other content around.

CLS is not just annoying for users — it directly affects your Core Web Vitals score and your search ranking. Modern Shopify themes handle this correctly, but if you are using an older theme or have custom sections, verify that all images have explicit dimensions. Shopify’s Liquid image_url filter supports width and height parameters that make this straightforward to implement.

Need a full image optimisation audit for your store? The performance team at OneOnic can assess your entire image pipeline and implement the full stack of optimisations — compression, format conversion, lazy loading, and dimension attributes. Request your free speed audit today.