How to compress images for a website

A single unoptimised photo can weigh more than the rest of the page combined. Fixing images is the cheapest performance win there is, and it directly affects Largest Contentful Paint — one of the Core Web Vitals Google ranks by.

1. Resize to the size you actually display

A hero image shown at 1200 px wide does not need 4000 px. Open Resize image, set the width (1600 px is a safe maximum for full-width images on retina screens, 800 px for content images) and batch-process the whole folder.

2. Pick the right format

• Photos → WebP (or JPG if you must support very old browsers). WebP is 25–35% smaller than JPG at the same quality and every current browser opens it.
• Logos, icons, screenshots with flat colours → PNG, then quantise it. Photos as PNG are a mistake: five to ten times larger for nothing.
• Icons and simple illustrations → SVG whenever you have the vector.

3. Compress

• JPG to WebP at 80–85% for photos.
• Compress PNG — palette quantisation, the same trick as pngquant, shrinks flat graphics 50–70% with no visible change and keeps transparency.
• Compress JPG at 75–80% if you are staying with JPG.

4. Serve it right

Add width and height attributes to every <img> so the browser reserves space (no layout shift), lazy-load images below the fold with loading="lazy", and use srcset if you want to go further. The compression steps above are what most sites skip, and they matter most.