Image SEO: Alt Text, Lazy Loading, WebP

Why Image SEO Matters

Images make up 50% of average page weight. Poorly optimized images slow down your site and miss ranking opportunities in Google Image Search.

Alt Text Best Practices

<!-- Bad: -->

<img src="photo.jpg" alt="">

<img src="photo.jpg" alt="image">

<img src="photo.jpg"> <!-- missing alt -->

<!-- Good: -->

<img src="photo.jpg" alt="Team meeting in modern office with whiteboard">

Rules:

1. **Be descriptive** — Describe what's in the image, not what it is

2. **Include keywords naturally** — Don't stuff keywords

3. **Keep it under 125 characters** — Screen readers truncate longer text

4. **Use empty alt for decorative images** — `alt=""` (not missing, empty)

Lazy Loading

<!-- Below-fold images: add loading="lazy" -->

<img src="photo.jpg" alt="Description" loading="lazy" width="800" height="600">

<!-- Above-fold hero image: DON'T lazy load -->

<img src="hero.jpg" alt="Hero" fetchpriority="high" width="1200" height="600">

Modern Formats (WebP/AVIF)

WebP is 25-30% smaller than JPEG. AVIF is 50% smaller.

<picture>

  <source srcset="photo.avif" type="image/avif">

  <source srcset="photo.webp" type="image/webp">

  <img src="photo.jpg" alt="Description" width="800" height="600">

</picture>

Always Set Dimensions

Missing width/height causes layout shift (CLS):

<!-- Always include width and height: -->

<img src="photo.jpg" alt="Description" width="800" height="600">

Check your images with [SEO Snapshot](/) — we detect missing alt text, missing dimensions, images without lazy loading, and non-WebP images.