How to Compress Images for the Web
Choose dimensions before quality, compare the result at its real display size, and keep the original. A repeatable test beats a universal quality percentage.
Resize before chasing a quality slider
An image that will display at 800 pixels wide rarely needs to be delivered at 4000 pixels wide. Reducing dimensions removes far more data than small quality adjustments and makes comparisons easier. Export a delivery copy at the largest size the layout genuinely needs while retaining the untouched original.
Pick the format for the content
Photographs usually tolerate lossy compression. Graphics with transparency or exact pixel requirements may need PNG. Modern WebP can be much smaller, but the right choice depends on the image and where it must work. In ToolkitPoint’s reproducible three-scene browser benchmark, WebP 70 was smaller than JPEG 75 for every tested scene, but the article states the encoder, inputs, metric, and limitations instead of presenting that result as a universal law.
Use a controlled comparison
Export two or three candidates from the same source. Compare them at 100% and at the actual display size. Look closely at faces, hair, text edges, gradients, and high-contrast boundaries. Choose the smallest result that still looks acceptable for the intended use.
- Check dimensions and orientation after export.
- Open the downloaded file instead of trusting the success message.
- Test transparency when the design depends on it.
- Avoid repeatedly recompressing a previous lossy output.
Performance is more than bytes
Specify image width and height in the page so the layout can reserve space. Load below-the-fold images lazily, avoid using one huge source for every screen, and give important images descriptive surrounding text and alt text when they convey information. Compression helps, but a correctly sized and correctly placed image is the complete goal.
Primary sources and further reading
Last reviewed: September 15, 2026