How to speed up website images

Images are almost always the reason a page feels slow. The good news: fixing them is the highest-return performance work you can do, and most of it takes minutes. Here's the priority order.

The five steps, in priority order

1. Right-size every image. Serving a 4000 px file into an 800 px slot wastes 90%+ of the bytes. Scale each image to its display size with the resizer first — this alone often cuts weight dramatically.
2. Convert to a modern format. WebP is 25–35% smaller than JPG at the same quality; AVIF can be smaller still. Batch-convert your library with the converter.
3. Compress. Even sized and converted, most images have headroom. Run them through the compressor at quality 75–85 — see image compression explained for how to find the sweet spot.
4. Lazy-load off-screen images. Add loading="lazy" so images below the fold don't block the initial paint.
5. Protect your LCP. Your largest above-the-fold image is your Largest Contentful Paint element. Make it the smallest, most-optimized file on the page and don't lazy-load it.

Why this moves the needle

Page speed is a confirmed Google ranking factor, and images drive Largest Contentful Paint and Cumulative Layout Shift — two of the three Core Web Vitals. Faster images mean better vitals, better rankings, and higher conversions. The full reasoning is in how images affect SEO.

Make it repeatable

Speed isn't a one-time task — every new image should go through the same routine. Bookmark the optimization checklist and run it on everything before it ships.