Product images: sizes, regeneration and performance

Images are usually the heaviest part of a shop page and the easiest performance win.

Upload sensibly

Decide the largest size you will ever display – usually the zoom image – and upload at that. Uploading 6000-pixel camera files is wasted space and slows every upload, backup and page.

WooCommerce generates several sizes

For each product image WooCommerce creates a thumbnail, a catalogue image and a single-product image, on top of the WordPress sizes and anything your theme adds. Ten sizes per image is not unusual. That multiplies both disk usage and inode count – see Why you have run out of inodes.

When images look wrong after a theme change

Changing theme changes the registered image sizes, but existing images are not re-cut automatically. The result is blurry or stretched product images. A regeneration plugin re-cuts them from the originals.

Regeneration is heavy. On a large catalogue it will use a great deal of CPU and disk. Run it at a quiet time, in batches, and not during a sale.

Compression

A compression plugin typically reclaims a large share of image weight with no visible difference. Keep the originals until you are happy with the result.

Lazy loading

A category page showing forty products loads forty images. Lazy loading defers the ones below the fold. Modern WordPress does this by default; check your theme has not disabled it.

A word on formats

Modern formats such as WebP are considerably smaller. Most compression plugins can serve them automatically with a fallback for older browsers.

  • 0 Users Found This Useful
Was this answer helpful?

Related Articles

WooCommerce on shared hosting: what to expect

WooCommerce runs perfectly well on shared hosting for the great majority of shops. It is,...

Caching WooCommerce correctly, and what must never be cached

Caching is the biggest performance win available to a shop, and the fastest way to break one. The...

Order emails are not arriving

Missing order emails are among the most damaging faults a shop can have, because neither you nor...

Action Scheduler: why background jobs stop running

WooCommerce queues work to run in the background – sending some emails, syncing stock,...

Orders stuck on pending payment

An order sitting at Pending Payment means WooCommerce created it and never heard that the payment...