How to optimise product images for performance
On a product page or category page, images generally make up most of the page's total weight. It's also the simplest performance lever to pull, without touching the code or the hosting.
The levers to pull, in order
-
Resize to the dimensions actually displayed
An image several thousand pixels wide displayed in a 300-pixel thumbnail wastes bandwidth with no visual benefit whatsoever. The dimensions generated should match the sizes actually used by the theme.
-
Convert to a modern compressed format
WebP, and increasingly AVIF, offer a noticeably smaller file size than JPEG or PNG at equivalent visual quality. Most recent CMSs and hosting setups can generate or convert these formats automatically.
-
Defer loading of off-screen images
The HTML loading="lazy" attribute tells the browser to only load an image once it approaches the visible area, which speeds up the initial display of a page containing many products.
-
Don't defer the main image visible at load time
The largest image visible immediately (often the main product image) shouldn't be deferred, because it's precisely the one that determines the LCP measurement, one of Google's Core Web Vitals indicators.
-
Serve images via a CDN if traffic justifies it
A CDN distributes image delivery from a geographic point close to the visitor, which cuts transfer time beyond what compression alone can achieve.
Why images weigh so heavily on perceived performance
On a category page displaying dozens of products, each unoptimised thumbnail adds to the rest: saving a few dozen kilobytes per image, multiplied by the number of products visible, directly changes the load time perceived by the visitor, far more than an equivalent optimisation on a single CSS or JavaScript file.
The link with SEO is direct: LCP, one of the three Core Web Vitals indicators used by Google, measures precisely the display time of the largest visible element on the page, very often a product image on a listing or a banner on a homepage. Optimising images therefore improves both the visitor experience and a criterion explicitly factored in by Google.
Common mistakes
- Uploading photos straight from a camera or smartphone, often several megabytes, with no prior resizing whatsoever.
- Deferring the main image visible immediately, which harms the LCP rather than improving it.
- Converting to modern formats without providing a fallback version for older browsers that don't support them.
- Compressing so aggressively that the perceived quality visibly degrades, which can undermine visitor trust on a product page.
Frequently asked questions
Do images need to be optimised manually, or are there automatic tools?
Is image optimisation enough to fix a slow store on its own?
Is the WebP format compatible with all browsers?
Describe your need in one minute
A few targeted questions so I can reply with an estimate rather than another questionnaire.