The WooCommerce store loads fewer bytes after image optimisation, but product photography now looks soft. Thumbnails may be acceptable while the gallery or zoom view has lost detail.
The repair is not necessarily “increase image quality”. Blur can come from the wrong dimensions, an upscaled thumbnail, an incorrect responsive candidate or a damaged source. Raising global quality can increase every file without fixing the selection error.
Find where detail was lost.
Identify the exact view that is blurry
Test separately:
- shop/category thumbnail;
- related-product card;
- product gallery main image;
- gallery thumbnail;
- zoom/lightbox;
- variation image;
- mobile view;
- high-density display.
Take a screenshot and record the page URL, viewport and displayed image. “Product images are blurry” often refers to one of these contexts.
Compare rendered and intrinsic dimensions
Select the affected image in the browser and run:
const image = $0;
console.log({
selected: image.currentSrc,
natural: [image.naturalWidth, image.naturalHeight],
rendered: [
image.getBoundingClientRect().width,
image.getBoundingClientRect().height
],
devicePixelRatio: window.devicePixelRatio
});$0 refers to the currently selected element in Chromium developer tools.
If a 300-pixel image is rendered at 700 CSS pixels, the browser is upscaling it. Compression quality is not the first problem.
Check WooCommerce image settings and theme declarations
WooCommerce uses registered image sizes influenced by the theme and Customizer. Review:
- catalogue thumbnail width;
- product image width;
- thumbnail crop;
- theme-declared support;
- builder widget image size.
A theme update can change expected dimensions while existing attachments retain old variants. Newly uploaded products may look correct while older ones remain blurry.
Do not repeatedly change the dimensions and regenerate between guesses. Decide the layout requirement first.
srcset may select a source that is too small
Inspect currentSrc for the gallery image. Check srcset and sizes.
If the gallery occupies 600 CSS pixels on a 2× display, a source near 1200 pixels may be reasonable. An incorrect sizes value can make the browser choose a smaller candidate and upscale it.
Test a normal-density desktop and a high-density phone. Do not force the largest original for every device as a workaround.
Zoom needs a larger source than the visible gallery
WooCommerce zoom relies on sufficient intrinsic resolution. An optimisation plugin may replace the original or point the gallery to a reduced derivative.
Determine:
- visible gallery dimensions;
- intended zoom dimensions;
- original upload dimensions;
- selected zoom source;
- visual need for zoom.
If zoom is commercially important, preserve a detailed large variant while serving compact thumbnails and gallery sources elsewhere.
The original may already be too small
No encoder can recover genuine detail absent from the source. If a supplier image is 500 pixels wide, generating a 1200-pixel file only interpolates it.
Find the best approved original. Do not sharpen and upscale indiscriminately; artificial edges can make product materials and colours misleading.
Where a higher-resolution source is unavailable, adjust the layout or disable zoom rather than pretending detail exists.
Aggressive compression damages different products differently
Fine texture, jewellery, fabric, text on packaging and gradients can show artefacts sooner than simple product shapes.
Create a review sample covering:
- fine detail;
- dark gradients;
- white background;
- transparent edges;
- printed labels;
- skin or natural textures where relevant.
Choose quality from the most demanding commercially important sample, not only the easiest image.
WebP conversion settings may not suit product photography
Compare the delivered WebP with the original JPEG at actual display and zoom size. Check:
- smearing;
- ringing around edges;
- colour shift;
- banding;
- loss of text clarity.
Quality numbers are not directly comparable between JPEG and WebP encoders. Tune by visual result and bytes.
Keep colour profiles consistent. A smaller file with inaccurate product colour can create returns and reduce trust.
Cropping can look like blur
WooCommerce thumbnail cropping may enlarge a narrow portion of the source. A square crop from a portrait image can have fewer useful pixels than expected.
Check the generated file dimensions and crop position. If products require different aspect ratios, a universal hard crop may not be appropriate.
Regenerate a test product after adjusting crop settings. Review existing catalogue consistency before applying it everywhere.
Regeneration does not improve a damaged master
If an optimisation process overwrote original uploads, regenerating thumbnails creates new derivatives from the degraded file.
Retrieve the approved originals from:
- verified backup;
- product photography archive;
- supplier source;
- previous deployment.
Restore one product in staging and regenerate to validate the route.
Protect filenames and product associations
Replacing an attachment can affect:
- product gallery order;
- variation associations;
- attachment metadata;
- SEO URLs;
- external feeds;
- cached CDN versions.
Use a method that preserves or deliberately redirects URLs. Do not bulk-delete media and re-upload it without a mapping.
Clear the correct cache after the repair
The browser, WordPress image CDN and page cache may continue serving the blurry variant.
Verify the URL and response headers, then purge only relevant assets/pages where possible. Rename or version files when the delivery system expects immutable assets.
Do not use repeated full-site purges as a substitute for understanding which layer is stale.
Validate product journeys, not only screenshots
After correction, test:
- category load and clarity;
- product gallery;
- zoom/lightbox;
- variation changes;
- mobile swipe;
- add to cart;
- layout stability;
- transferred bytes.
The image repair should restore trust without returning the catalogue to oversized originals.
A balanced acceptance criterion
Record:
- correct source selected per viewport;
- no unintended upscaling;
- approved detail at gallery and zoom size;
- stable colour;
- acceptable transferred bytes;
- no broken product/variation links.
Avoid promising one universal byte limit. Product type and display requirement vary.
Evidence for a WooCommerce image assessment
Provide a representative product URL, screenshot, currentSrc, rendered/intrinsic dimensions, original file if authorised and the optimisation change that preceded the blur. Initial contact does not require store credentials.
If WooCommerce product images became blurry after optimisation, we can identify whether the error belongs to source quality, responsive selection, generated sizes, crops or encoder settings. The repair will preserve detail where customers need it and keep listing pages efficient.