How to Optimize Images for SEO: The Complete Guide
Images are often the largest assets on a webpage, making them a critical factor in both performance and SEO. Here's a comprehensive guide to getting image optimization right.
1. Choose the Right Format
| Format | Best For | SEO Benefit |
|---|---|---|
| WebP | Photos, illustrations | Smaller files → faster load |
| AVIF | High-quality photos | Best compression |
| SVG | Logos, icons | Infinitely scalable |
| PNG | Transparency needed | Lossless quality |
2. Compress Without Sacrificing Quality
Target file sizes:
- Hero images: Under 200KB
- Product images: Under 100KB
- Thumbnails: Under 30KB
Use quality settings of 75–85 for most web images — the difference from 100% quality is imperceptible to most users.
3. Use Descriptive File Names
Bad: IMG_4821.jpg
Good: webp-vs-png-comparison-chart.webp
Search engines read file names as signals about image content.
4. Write Meaningful Alt Text
Alt text serves two purposes: accessibility and SEO.
<!-- Bad -->
<img src="chart.webp" alt="image">
<!-- Good -->
<img src="webp-vs-png-size-comparison.webp"
alt="Bar chart comparing WebP vs PNG file sizes showing 35% reduction">
Keep alt text under 125 characters and describe what the image actually shows.
5. Implement Responsive Images
<picture>
<source srcset="hero.avif" type="image/avif">
<source srcset="hero.webp" type="image/webp">
<img src="hero.jpg" alt="Hero image"
width="1200" height="630"
loading="lazy">
</picture>6. Use Lazy Loading
Add loading="lazy" to images below the fold:
<img src="product.webp" alt="Product" loading="lazy">This defers loading of off-screen images, improving initial page load speed.
7. Specify Image Dimensions
Always include width and height attributes to prevent Cumulative Layout Shift (CLS), a Core Web Vital metric.
8. Add Structured Data for Key Images
For product or article images, use JSON-LD structured data:
{
"@context": "https://schema.org",
"@type": "Article",
"image": "https://example.com/article-hero.webp"
}Core Web Vitals Impact
Properly optimized images directly improve:
- LCP (Largest Contentful Paint): Faster hero image loading
- CLS (Cumulative Layout Shift): Specified dimensions prevent layout jumps
- FID/INP: Reduced bandwidth frees browser resources
Conclusion
Image SEO is a combination of format choice, compression, descriptive metadata, and responsive delivery. Start with converting to WebP, add descriptive alt text, and implement lazy loading — these three steps alone will deliver significant improvements.