Product image optimisation: WebP, AVIF, sizes and lazy loading

In almost every e-shop we audit, images make up most of the page weight. That's natural: a shop sells with pictures. The problem isn't having lots of photos; it's that they're often served at the wrong size, in an old format and at the wrong moment. The good news is that this is one of the easiest things to fix, with a visible effect on speed.

Three questions for every image

To serve an image properly, you need to answer three things:

1. Which format? JPEG/PNG, or WebP/AVIF?
2. What size? As many pixels as the screen needs, and no more.
3. When? Immediately, or when the user scrolls near it?

Formats: WebP and AVIF

WebP is supported by every modern browser and usually gives noticeably smaller files than JPEG at similar quality. It's the safe default.

AVIF often compresses even better, especially photos with smooth gradients. Browser support is now broad, but encoding is slower and some tools and plugins still don't handle it well.

Our practical recommendation:

• Generate WebP for every image.
• Add AVIF if your tooling supports it reliably, with WebP or JPEG as a fallback.
• Keep high-quality originals somewhere safe; don't overwrite them with compressed versions.
• PNG only for graphics with transparency or hard edges (logos, icons). For logos and icons, SVG is better still.

Many CDNs and plugins convert automatically and serve the best format per browser. That's usually the least painful route.

Sizes: stop serving 3000 pixels to phones

The most common waste: photos are uploaded straight from the camera or supplier at 3000–5000 pixels and served like that to a phone screen.

What to do

• Set a maximum upload size, e.g. 2000 pixels on the long edge. That's enough for zoom and for feeds.
• Generate multiple sizes (thumbnail, category, product, zoom). WordPress/WooCommerce does this automatically; make sure the sizes match your theme.
• Use srcset and sizes so the browser picks the right size per screen. Most modern themes do this; check that sizes matches your actual layout, because a wrong sizes value makes the browser download a bigger image than it needs.
• After a theme change, regenerate thumbnails. Otherwise wrong sizes may be served.

How heavy should they be?

There's no magic number, but as a rule a category thumbnail shouldn't weigh hundreds of KB, and the main product photo on mobile usually fits comfortably in a fraction of the original's size. If PageSpeed Insights shows images of one or two MB, that's your first win.

Lazy loading: yes, but not everywhere

Lazy loading means images load only when the user scrolls close to them. In modern browsers the loading="lazy" attribute is enough; no JavaScript needed.

The most common mistake: lazy-loading the page's main image too. The main product photo or homepage hero is usually the LCP element. Delay it, and you hurt LCP. So:

• Main image: no lazy loading, ideally with fetchpriority="high".
• The first 2–4 product images on a mobile category page: also not lazy.
• Everything else: loading="lazy".

For more on images and LCP, see our article on Core Web Vitals for e-shops.

Dimensions: the secret to zero CLS

Every image should declare width and height (or an aspect-ratio in CSS). The browser then reserves the right space before the image loads and the page doesn't jump. Also keep a consistent aspect ratio across product photos (all square, or all 4:5): category grids look tidier and you avoid uneven row heights.

Image SEO basics

• Descriptive file names: black-leather-boot.webp rather than IMG_4521.webp. For a Greek store, greeklish names work fine.
• Alt text that genuinely describes the image: "Black leather lace-up boot, side view". Not a keyword list.
• No text on product photos. Search engines can't read it, and Google Shopping and comparison sites often reject it.
• Images in feeds (Skroutz, Google) must be reachable without hotlink protection.

Workflow for new products

1. Shoot with a consistent background and aspect ratio.
2. Edit and export at up to 2000 pixels, high-quality JPEG.
3. Give the file a descriptive name.
4. Upload; the system generates sizes and WebP/AVIF automatically.
5. Fill in alt text.
6. Quick check of the page on a phone.

Audit checklist for an existing shop

• [ ] Are images served as WebP or AVIF?
• [ ] Are there images over 1 MB on key pages?
• [ ] Are srcset and sizes present and correct?
• [ ] Does the main image avoid lazy loading?
• [ ] Do the others use it?
• [ ] Do all images have dimensions?
• [ ] Have thumbnails been regenerated since the last theme change?
• [ ] Is alt text filled in?

What about your existing catalogue?

If you already have thousands of photos, you don't need to redo them one by one. Most optimisation tools can bulk-process the media library. Run it on staging or a small batch first, check quality on products with fine detail (fabrics, jewellery), then process the rest. Keep an eye on disk space too: generating WebP and AVIF copies of every size adds up, so make sure your hosting plan and backups can absorb it.

Bottom line

Image optimisation is one of the few technical jobs with an almost guaranteed payoff: faster pages, better LCP and less mobile data used by your customers.

If you'd like us to take it on, or to check what your site serves today, see our speed service or get in touch.