Image compression can improve page performance, but the smallest file is not always the best file. Product images need enough detail to communicate material, finish and shape accurately.
Resize before compressing
If an image is much larger than its maximum display size, resize a delivery copy to a suitable dimension first. This removes data the page cannot use and often makes compression more effective. Keep the high-quality master separately so future crops or larger exports remain possible.
Choose compression by image type
Photographs can often tolerate some lossy compression, while logos, interface graphics and images requiring transparency may need a different format. Compare several export settings at actual display size and inspect fine edges, labels, gradients and reflective surfaces for artifacts.
Measure quality and file size together
- Start from intended display dimensions.
- Use modern formats when the site supports them.
- Compare the result at normal viewing size.
- Inspect important details at close range.
- Avoid repeatedly recompressing an already compressed file.
A repeatable export preset plus visual quality control is safer than one aggressive compression value for every image.
Related reading
Continue with our guides to JPEG, PNG and WebP for websites and image resolution, PPI and DPI. For a broader introduction, see web.dev’s Learn Images course. For expert help, explore our e-commerce product photo editing service.
Frequently asked questions
Why resize before compressing?
Pixels the page never displays are wasted bytes. Resizing first removes them, so the compression step can focus on the data that actually matters.
Is it safe to compress a file more than once?
Repeated lossy compression adds artifacts each time. Always compress from the original master, not from a previously compressed copy.
How do I know the compression is too strong?
Look at edges, text, gradients and shiny surfaces at the size shoppers will see. Blockiness, banding or fuzzy edges are signs to ease off.
