WooCommerce product images: sizes, compression and AI backgrounds

The sizes to upload, and what your theme does with them

WooCommerce itself ships with catalogue thumbnails at 324 by 324 pixels, gallery thumbnails around 100 by 100 pixels, and a single product image at 800 by 800 pixels, but almost every theme overrides those defaults, so the first job is to check your own theme, not to memorise the defaults. The practical upload rule that survives most themes is simple: upload square, at least 1,200 pixels on the long edge for ordinary products and 1,600 to 2,000 pixels for products where zoom matters, such as jewellery, fabric, electronics and anything with fine print. Square uploads survive a square crop without losing a corner of the product, and a 1,200-pixel master gives the theme enough resolution for a retina display without handing it a 4,000-pixel file to shrink on every page load.

Two mistakes cause most of the damage. The first is uploading mixed shapes: a tall product, a wide product and a square product in one grid, which the theme then crops unevenly, so one product loses its top and another floats in empty space. Fix it before upload by composing every master square, with the product centred and a little breathing room on every side. The second is uploading the camera original and trusting the theme to optimise it. Themes resize, they do not reliably compress, convert or lazy-load well on their own, and a shop page with twenty 2-megabyte originals will fail a speed test no matter how good the photography is.

Compression without making products look soft

Convert to WebP and compress before upload, rather than after. WebP typically saves 25 to 35 percent against an equivalent JPEG, is supported by essentially all modern browsers, and is the format most optimisation plugins serve automatically when they can. Aim for a WebP export at roughly 70 to 80 percent quality, then check the result at full size: smooth gradients, fabric weave and fine text are the first things to go soft, and if they do, raise the quality for that image rather than applying one aggressive setting to the whole catalogue. AVIF compresses further, roughly 40 to 50 percent against JPEG in published comparisons, but its browser and plugin support is still uneven, so treat it as a future option, not the default for a selling store in 2026.

A workable pipeline, in order, is: generate or shoot the master square, resize it to the upload size in the table above, export WebP at 70 to 80 percent quality, strip camera metadata, and only then upload. If you use a plugin such as Smush, ShortPixel or EWWW, let it handle conversion and lazy loading for older uploads, but do not let it be the only step: a plugin cannot recover a badly composed original, and it cannot fix a mixed-shape grid. Keep originals in a folder outside the media library, named by product and variant, so a theme change or a thumbnail regeneration never forces you to re-shoot. That naming habit is also what makes the batch workflow in our 50-SKU batch guide fast the second time round.

Measure the result on a real phone, not only on a desktop speed tool. Open the shop page on mobile data, count how long the grid takes to settle, and check the largest contentful paint figure if your speed tool reports it; a shop grid that settles under about two and a half seconds on a mid-range phone is in good shape. If it is slower, the culprit is almost always image weight, not hosting, and the fix is smaller uploads and fewer gallery images on the grid page, not a new theme.

AI backgrounds that do not break the listing

AI is best in a WooCommerce store for backgrounds and variants, not for inventing the product. Start from a clean, real photo of the product, remove or replace the background, and generate lifestyle variants around that same product, checking each one against the original: same shape, same colour in daylight, same label, no invented features, no extra items that look included. A white or very pale background is still the right main image for most stores, because it keeps the grid uniform and lets the product, not the scene, do the work. Use lifestyle backgrounds for gallery images two, three and four, where they answer the buyer's next questions: how big is it, what does it look like in use, and what does the detail look like up close.

Finish with three checks before publishing. First, the grid check: does every tile read as the same store, with the same background tone and the same product size in the frame? Second, the zoom check: does the 1,600-pixel gallery image stay sharp and accurate when a buyer hovers, or does it reveal a warped label or melted texture? Third, the honesty check from our disclosure guide: if a gallery image shows a scene the buyer will not receive, such as a styled room, make sure the listing text says so plainly. Clean a busy phone background first with the remove-background guide, enlarge a winner only when a banner genuinely needs it with the upscale guide, and follow the small-shop photo guide for the same steps inside the app. New backgrounds shift colour first: the color accuracy guide shows how to check variants against the real product before publishing.