How to Optimize Images for Website Speed — A Developer's Guide

Why Image Optimization Matters for SEO

Images account for 50-80% of a typical web page's total size. Google's Core Web Vitals directly measures Largest Contentful Paint (LCP), which is often an image. Slow images = poor LCP = lower search rankings.

The Image Optimization Checklist

1. Use the Right Format

• WebP for all web images (30% smaller than JPEG)
• AVIF for modern browsers (50% smaller than JPEG)
• JPEG as fallback for older browsers
• SVG for logos and icons

2. Resize to Display Size

Never serve a 4000px image when it displays at 800px. Serve the exact size needed.

3. Compress Aggressively

• JPEG quality 75-80% is usually indistinguishable from 100%
• WebP quality 75% is equivalent to JPEG quality 85%
• Use tools that allow precise quality control

4. Use Responsive Images

Serve different sizes for different screen widths using srcset:

<img srcset="small.jpg 400w, medium.jpg 800w, large.jpg 1200w"
     sizes="(max-width: 600px) 400px, (max-width: 1000px) 800px, 1200px"
     src="medium.jpg" alt="...">

5. Lazy Load Below-the-Fold Images

Only load images that are visible in the viewport. Modern browsers support native lazy loading.

6. Use a CDN

Serve images from edge locations close to your users.

Target File Sizes

Image Type	Max Size	Format
Hero/banner	150-300 KB	WebP
Blog image	50-150 KB	WebP
Thumbnail	15-40 KB	WebP
Icon/logo	5-20 KB	SVG or WebP
Product photo	80-200 KB	WebP

Testing Your Images

Use Google PageSpeed Insights to check your image optimization score. It flags oversized images and suggests savings.