Image compression always involves a trade-off: fewer bytes mean less information, but the visible difference can be almost impossible to spot when the process is controlled. The goal is not to preserve every original byte. It is to preserve the image's purpose.
Start with the right dimensions
Do not send a 4,000-pixel photo to a space that displays it at 800 pixels. Resize the image to the largest rendered width it needs, with a little room for high-density screens. Removing unused pixels often saves more than lowering quality.
Choose a suitable format
Use JPG for photographs, WebP for most photos and graphics, and PNG when you need lossless detail or transparency. AVIF can create very small files, but confirm browser support and test the result. Converting a simple logo to JPG can introduce halos; converting a photograph to PNG usually creates a much larger file.
Practical starting point: resize first, export a photo as WebP, and begin around 80 to 85 percent quality. Compare the result at its actual display size.
Inspect the important details
Zoom in on faces, text, hair, product edges and areas with smooth gradients. Compression artifacts are most visible in those places. A file can look perfect at 200 percent and still appear too soft in a page layout, so check both views.
Keep metadata under control
Camera metadata, thumbnails and color profiles can add weight. Retain a color profile when accurate color matters, but remove location and camera metadata before publishing when it is not needed.
A repeatable workflow
- Keep an untouched original outside the web export folder.
- Resize to the largest required display dimension.
- Choose JPG, WebP, PNG or AVIF based on the image content.
- Adjust quality until edges and textures remain clean.
- Check the final byte size and render it on the page.
Use the OptmizeImage compressor to compare the original and optimized previews locally before downloading.
Open the image optimizer →