Image Optimization for SEO: Best Practices

Google uses page speed as a ranking factor, and images are often the heaviest elements on a page. Properly optimized images can dramatically improve your Core Web Vitals scores and search rankings.

How Images Affect SEO

Unoptimized images impact three key metrics that Google measures:

• LCP (Largest Contentful Paint): Large hero images delay LCP, directly hurting rankings.
• CLS (Cumulative Layout Shift): Images without width/height attributes cause layout shifts.
• Page Speed Score: Heavy images lower your overall Lighthouse score.

Best Practices

1. Use Modern Formats

Serve WebP images whenever possible. They're 25-35% smaller than JPEG/PNG at equivalent quality. Use the HTML <picture> element to provide WebP with JPG fallback.

2. Compress Aggressively

Most images look identical at 80% quality but are 60-70% smaller. Test with your specific images — you might be able to go as low as 70% without visible artifacts.

3. Serve Correct Dimensions

Never serve a 2000px image that displays at 400px. Use responsive images with srcset to serve the right size for each device.

4. Add Alt Text

Descriptive alt text helps Google understand your images and improves accessibility. Keep it concise and descriptive — don't stuff keywords.

5. Use Lazy Loading

Add loading="lazy" to images below the fold. This defers loading until the user scrolls near them, improving initial page load time.

6. Set Width and Height

Always specify width and height attributes on <img> tags. This prevents layout shifts (CLS) as the browser reserves space before the image loads.

Quick Checklist

1. Convert images to WebP format
2. Compress to 80% quality or lower
3. Resize to display dimensions
4. Add descriptive alt text
5. Set width and height attributes
6. Enable lazy loading for below-fold images
7. Use a CDN for faster delivery

Start by compressing your images — it's the single biggest impact you can have on page speed with the least effort.