How to Optimize Images for Website Speed — A Practical Checklist

Images account for an average of 50% of a web page's total weight. If your website loads slowly, images are almost certainly the primary reason. The good news: image optimization is one of the easiest and most impactful performance improvements you can make.

Why Image Optimization Matters

Speed affects revenue. Amazon found that every 100ms increase in page load time reduced sales by 1%. Google found that a half-second delay reduced traffic by 20%.

Speed affects SEO. Google uses page speed as a ranking factor. Core Web Vitals — which heavily involve image loading — directly impact your search rankings.

Speed affects users. 53% of mobile users abandon a page that takes more than 3 seconds to load. If your images are 5MB each, you're losing visitors before they see your content.

The Optimization Checklist

1. Choose the Right Format

The switch to WEBP alone can reduce image file sizes by 25-35% compared to JPG with identical visual quality.

2. Resize to the Display Size

The number one optimization mistake: serving images larger than they'll be displayed.

If an image displays at 800×600 pixels on your website, the source image should be 800×600 (or 1600×1200 for retina displays). A 4000×3000 source image is wasting bandwidth.

Calculate: Display size × 2 (for retina) = optimal image size

3. Compress Appropriately

For JPG/WEBP, quality settings between 75-85% are the sweet spot:

4. Use Lazy Loading

Images below the fold (not visible when the page first loads) should use lazy loading:

<img src="image.webp" loading="lazy" alt="Description">

This single attribute tells the browser: don't download this image until the user scrolls near it. For pages with many images, this dramatically improves initial load time.

5. Serve Responsive Images

Different devices need different image sizes. Use the srcset attribute:

<img
  srcset="image-400.webp 400w, image-800.webp 800w, image-1200.webp 1200w"
  sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1200px"
  src="image-800.webp"
  alt="Description"
>

This lets the browser choose the smallest image that fits the current viewport.

6. Use CDN for Delivery

A Content Delivery Network (CDN) serves images from servers geographically close to the user. This reduces latency and speeds up downloads.

7. Add Proper Alt Text

While not a speed optimization, alt text improves SEO and accessibility. Every image should have descriptive alt text that includes relevant keywords naturally.

Real-World Impact

Here's a real example of what optimization achieves:

Before optimization:

After optimization (WEBP, resize, compress, lazy load):

That's a 92% reduction in image weight and a 74% improvement in load time. Same visual quality.

Tools for Optimization

You don't need expensive software. Free tools that work:

The Quick-Start Approach

If you can only do three things:

These three steps alone will likely cut your page weight in half and significantly improve your Core Web Vitals scores.