Image SEO: Optimizing Images for Search and Performance

Why Image SEO Matters

Images are an often-overlooked SEO opportunity:

• Google Images traffic: Can account for 20%+ of organic traffic
• Universal search: Images appear in regular search results
• Page speed: Optimized images improve Core Web Vitals
• Accessibility: Alt text helps screen readers
• User experience: Quality images improve engagement

Alt Text Optimization

Alt text (alternative text) describes images for search engines and screen readers:

Alt Text Best Practices

• Be descriptive and specific
• Include relevant keywords naturally
• Keep it under 125 characters
• Don't start with "image of" or "picture of"
• Describe what's in the image, not just keywords
• Don't keyword stuff

Image File Names

File names help search engines understand image content:

• Use descriptive, keyword-rich file names
• Separate words with hyphens
• Use lowercase letters
• Avoid random strings or numbers

Image File Formats

Choose the right format for each image type:

Image Compression

Compress images without visible quality loss:

• Lossy compression: Smaller files, some quality loss
• Lossless compression: No quality loss, larger files
• Use tools like TinyPNG, Squoosh, or ImageOptim
• Target file sizes under 100KB for most images
• Compress before uploading to your CMS

Lazy Loading

Lazy loading defers off-screen images until needed:

<!-- Native lazy loading -->
<img src="image.webp" alt="Description" loading="lazy" />

<!-- For above-the-fold images, don't lazy load -->
<img src="hero.webp" alt="Description" loading="eager" />

Benefits: Faster initial page load, better Core Web Vitals, reduced bandwidth.

Responsive Images

Serve different image sizes for different devices:

<img 
  src="hero-800.webp"
  srcset="hero-400.webp 400w,
          hero-800.webp 800w,
          hero-1200.webp 1200w,
          hero-1600.webp 1600w"
  sizes="(max-width: 600px) 400px,
         (max-width: 1000px) 800px,
         1200px"
  alt="Description"
/>

Image Dimensions

Always specify width and height to prevent layout shift:

• Include width and height attributes
• Helps browser reserve space before image loads
• Prevents Cumulative Layout Shift (CLS)
• Use CSS aspect-ratio for responsive images

<img src="image.webp" alt="Description" width="800" height="600" />

Image Sitemaps

Help Google discover your images with an image sitemap:

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
        xmlns:image="http://www.google.com/schemas/sitemap-image/1.1">
  <url>
    <loc>https://example.com/page.html</loc>
    <image:image>
      <image:loc>https://example.com/image.webp</image:loc>
      <image:caption>Description of image</image:caption>
      <image:title>Image title</image:title>
    </image:image>
  </url>
</urlset>