Compress images for a faster website.

Start with dimensions, not just quality

A 5000-pixel photograph is wasteful when the design never displays it above 1600 pixels. Resizing oversized images often saves more than aggressively lowering quality. Choose a maximum width based on the widest real use in the new layouts, with enough room for high-density screens.

For many marketing sites, 1600 to 2000 pixels is a sensible starting point for large content images. Full-width photographic heroes may justify more, while cards and thumbnails should use responsive variants generated by the CMS.

WebP, AVIF or original?

WebP

WebP is the practical default for broad browser support, good photographic compression and transparency. It usually provides a strong balance between file size, visual quality and processing speed.

AVIF

AVIF can produce smaller files, especially for photography, but takes longer to encode. It is useful when every kilobyte matters and your delivery system has a reliable fallback strategy.

Original format

Keep originals when creating an archive, when animation must be preserved or when another optimisation system will process the files later. Source files should be stored separately from production-ready assets.

Choose a quality setting you can inspect

There is no universal perfect percentage. A quality setting around the high seventies is a useful starting point for website photography, but illustrations, screenshots and images containing text may need more. Always inspect representative files at their actual display size.

Do not bulk-convert blindly

• Check logos and icons for transparency and sharp edges.
• Preserve animation when it is intentional.
• Avoid enlarging small source images.
• Keep meaningful colour profiles where brand accuracy matters.
• Review files that fail conversion rather than dropping them.

Gather keeps oversized or animated files unchanged when transforming them would be unsafe, and reports preserved originals in the finished export.

Compression is only one part of delivery

On the final website, use responsive image markup, reserve width and height to reduce layout shift, lazy-load below-the-fold imagery and serve files through appropriate caching. Good source preparation makes these delivery decisions easier, but does not replace them.

If the source library is missing, begin by collecting images from the existing public website, then preserve originals before producing the compressed set.