The Biggest Culprit

If your site is slow, images are almost certainly the reason. Unoptimized images inflate page weight, block rendering, and eat bandwidth — especially on mobile.

The good news: image optimization has the highest ROI of any performance technique. A few changes can cut load times in half.

Choose the Right Format

• WebP for photographs and complex images — 25–35% smaller than JPEG at the same quality.

• AVIF for even better compression where browser support allows.

• SVG for icons, logos, and illustrations — infinitely scalable with no quality loss.

• PNG only when you actually need transparency at high fidelity.

Resize Before You Upload

Serving a 4000px image in a 400px container wastes 10x the bandwidth. Resize images to their display dimensions before uploading, and generate multiple sizes for responsive layouts using srcset.

Lazy Load Everything Below the Fold

Images that aren't visible on load don't need to be downloaded on load. Use the native loading="lazy" attribute on all img tags below the hero. This alone can eliminate hundreds of kilobytes from your initial payload.

Compress Without Destroying Quality

A quality setting of 75–85 on JPEG/WebP is visually indistinguishable from 100 for most images — but the file size difference is dramatic. Use tools like Squoosh, ImageOptim, or an automated pipeline to compress every asset before it hits production.

Use a CDN

A CDN delivers images from servers close to your users, reducing latency. Many CDNs also support on-the-fly format conversion and resizing — so you can serve the optimal image for every device without maintaining separate asset pipelines.

Start with images. You'll be surprised how much performance you recover.