How to compress images for a faster website

Large images are the most common reason a page feels slow. This routine works for blogs, shops and landing pages.

1. Pick the right size first

Resize to the largest size the image is actually displayed at. A 4000px photo shown at 800px wastes most of its bytes.

2. Choose a modern format

• WebP works in every current browser and is usually 25-35% smaller than JPEG.
• AVIF is smaller still but slower to encode.
• Keep PNG only for screenshots and graphics with sharp edges.

3. Compress

Open Squoosh and drag the quality slider down until you see a difference, then step back up a little. For batches, TinyPNG handles up to 20 files at once.

4. Lazy-load below the fold

Add loading="lazy" to every image that is not visible on first load.

Checklist

1. Resize to display size
2. Convert to WebP
3. Compress to about 75-80 quality
4. Lazy-load anything below the fold