Smaller image files, without blind guesswork.

Start with a useful target.

“As small as possible” is not always the right brief. An image should be small enough for its destination while remaining clear enough for its purpose. A product detail, a background texture and a screenshot have different tolerances.

Check the destination’s requirements first. A maximum file size is a constraint, not an instruction to sacrifice everything else.

Set dimensions before fine-tuning quality.

If a file is much wider than its display context needs, reduce the pixel dimensions before turning the quality down. Fewer pixels can reduce the amount of data that needs encoding without making each remaining pixel work harder.

The compressor’s maximum-width setting preserves proportions and does not enlarge smaller images. For exact width and height, use the resizer.

Compare a small number of sensible exports.

Start with a moderate JPEG or WebP quality. Inspect the result, then adjust. If fine lines or gradients break down, raise the quality. If the image still looks clear and the output is too large, make a further adjustment.

The quality number is an encoder control, not a promise about retained detail. An “80%” setting does not mean exactly 80% of the information or file size is preserved, and different browsers may produce different results.

A larger output is a useful finding.

Re-encoding a well-optimized source can create a larger file. Exporting a photograph as PNG can also increase the size. The toolkit reports the actual difference, including increases.

Do not keep an output merely because a compressor produced it. Compare it with the original and choose the file that meets the real requirement.

Keep the original out of the loop.

Create each new candidate from the original rather than recompressing the previous export. Save the selected result with a clear filename and keep the original separately.

When detail is important, compare at normal viewing size and at a closer inspection. Watch areas where compression problems are easy to miss: text, hair, diagonal lines and gentle color transitions.

Open the image compressor.

Technical reference

MDN: Canvas export formats and quality.