Image Optimization for SEO

Image SEO best practices

Compress images, use descriptive filenames (poodle-grooming-tips.jpg not image-1.jpg), add alt text, use modern formats (WebP), and implement lazy loading to improve page speed and accessibility.

Image markup and alt text

Always use descriptive alt text. It helps blind users understand images and helps Google index image search results.

<!-- GOOD: Descriptive filename and alt text -->
<img 
  src="/images/chocolate-chip-cookie-recipe.jpg" 
  alt="Warm chocolate chip cookie fresh from the oven"
  width="400" 
  height="300"
  loading="lazy"
>

<!-- Using picture element for responsive images -->
<picture>
  <source media="(min-width: 768px)" srcset="large-image.webp">
  <source media="(min-width: 0px)" srcset="small-image.webp">
  <img src="fallback.jpg" alt="Descriptive text">
</picture>

Responsive images with srcset

Use srcset to serve different image sizes for different screens. Saves bandwidth on mobile and improves LCP. Example: srcset="small.jpg 480w, medium.jpg 800w, large.jpg 1200w".

Use modern formats: WebP and AVIF

WebP is 25% smaller than JPEG; AVIF is 30% smaller than WebP. Use element with fallbacks for older browsers.