Separate pixels, cropping and file size.
Dimensions describe the number of pixels. File size describes the data to download. A crop describes which part of the subject remains visible. You can improve one and make another worse, so keep them separate when you compare.
A 960-pixel image can work well in a small product grid and still be unsuitable for a large detail zoom. There is no single file-size ceiling that suits every product, device and template. Fine print on packaging needs a different judgement from a simple silhouette.
Inspect the image shoppers receive.
Check the category card, product image, gallery and zoom separately. Confirm the displayed size and inspect the requested image in the browser. Responsive delivery can send a different variant to each device; the media-library original is not necessarily the downloaded file.
If an image looks blurry, first compare the original, generated thumbnail and displayed dimensions. Enlarging a small thumbnail cannot restore detail. After changing thumbnail settings or a theme, regenerate the relevant sizes using the documented procedure for that setup.
Compare one picture at one display size.
For this worked comparison, imagine a tee photographed on a neutral background. Keep the crop and viewing size fixed. Then inspect the fabric edge, label and background for visible defects. Record bytes from the actual downloaded files instead of estimating savings.
| Version | What you change | What you inspect |
|---|---|---|
| Original | Nothing; keep as the source | The detail you want to preserve |
| Suitable dimensions | Resize for the useful display | Edges and label at actual viewing size |
| Compressed variant | Adjust format and compression | Fabric texture, artefacts and downloaded bytes |
| Delivered image | Load the live product page | The browser receives the intended variant |
Describe the picture, then check the whole page.
Write alt text for what the image communicates in its context: “Chalk heavyweight tee, front view” is more useful than a list of search terms. Decorative images can need empty alt text. A good description does not replace the product’s own useful copy.
Review on a phone and a larger screen, including the zoom if you offer one. Keep the original for future sizes. If a variant is wrong, correct the generation or delivery route before processing the entire library. Then measure page performance separately; an image change alone does not explain every loading delay.