Image SEO: Complete Guide to Image Optimization

Image SEO optimizes images for search visibility through descriptive alt text, optimized file names, proper compression, modern formats, and structured data. Well-optimized images rank in Google Images, support page content relevance, and improve page load speed. Use WebP format, compress images, and always include descriptive alt text.

Image SEO optimizes images for search visibility through descriptive alt text, optimized file names, proper compression, modern formats, and structured data. Well-optimized images rank in Google Images, support page content relevance, and improve page load speed. Use WebP format, compress images, and always include descriptive alt text.

Why Image SEO Matters

Traffic Source

Google Images is a significant traffic source.

Image search benefits:

• Additional visibility channel
• High-intent product searches
• Visual discovery traffic
• Brand awareness

Page SEO Support

Images contribute to page relevance.

Contributions:

• Alt text provides context
• File names signal content
• Supports topic comprehensiveness
• Enhances user engagement

Performance Impact

Images are often the largest page elements.

Performance effects:

• Largest Contentful Paint (LCP)
• Total page weight
• Loading speed
• User experience

Alt Text Optimization

What is Alt Text?

Alt text (alternative text) describes image content for:

• Screen readers (accessibility)
• Search engines (understanding)
• Display when images fail to load

Alt Text Best Practices

<!-- Good alt text -->
<img src="golden-retriever-puppy.jpg"
     alt="Golden retriever puppy playing with a red ball in a garden">

<!-- Bad alt text -->
<img src="IMG_1234.jpg"
     alt="image">

Guidelines:

• Describe the image accurately
• Keep it concise (125 characters or less)
• Include keywords naturally
• Don’t start with “image of” or “picture of”
• Be specific, not vague

Alt Text by Image Type

Examples by Category

Product:

<img alt="Nike Air Max 270 running shoes in black, side view">

Informational:

<img alt="Bar chart showing SEO traffic growth from 10K to 50K visits over 6 months">

Screenshot:

<img alt="Google Search Console performance report showing impressions and clicks">

File Name Optimization

Descriptive File Names

Use descriptive, keyword-rich file names.

✓ keyword-research-process-diagram.jpg
✓ nike-air-max-270-black.webp
✗ IMG_1234.jpg
✗ screenshot.png
✗ final-v2-revised.jpg

File Name Guidelines

• Use hyphens to separate words
• Keep lowercase
• Include relevant keywords
• Be descriptive but concise
• Name before uploading

Image Formats

Format Comparison

WebP Implementation

<picture>
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.jpg" type="image/jpeg">
  <img src="image.jpg" alt="Description">
</picture>

Format Selection

• Photos: WebP with JPEG fallback
• Graphics: WebP with PNG fallback
• Icons: SVG
• Animations: WebP or optimized GIF

Image Compression

Compression Types

Compression Tools

Online:

• TinyPNG
• Squoosh.app
• ImageOptim

Build tools:

• Sharp (Node.js)
• ImageMagick
• Webpack image loaders

Compression Guidelines

• Aim for 80% quality (visually indistinguishable)
• Target 100KB or less for most images
• Hero images under 200KB
• Thumbnails under 30KB

Responsive Images

srcset Attribute

Serve different sizes based on screen.

<img src="image-800.jpg"
     srcset="image-400.jpg 400w,
             image-800.jpg 800w,
             image-1200.jpg 1200w"
     sizes="(max-width: 600px) 400px,
            (max-width: 1200px) 800px,
            1200px"
     alt="Description">

Sizes to Create

Image Dimensions

Set Explicit Dimensions

Prevent layout shift by specifying dimensions.

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

Aspect Ratio

Use CSS aspect-ratio for responsive dimensions.

img {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
}

Lazy Loading

Native Lazy Loading

<img src="image.jpg"
     loading="lazy"
     alt="Description">

When to Lazy Load

• Below-the-fold images: Use lazy loading
• Above-the-fold/LCP image: Do NOT lazy load
• Critical images: Load immediately

Image Structured Data

Product Images

{
  "@type": "Product",
  "name": "Running Shoes",
  "image": [
    "https://example.com/photos/front.jpg",
    "https://example.com/photos/side.jpg",
    "https://example.com/photos/back.jpg"
  ]
}

Article Images

{
  "@type": "Article",
  "image": {
    "@type": "ImageObject",
    "url": "https://example.com/image.jpg",
    "width": 1200,
    "height": 630
  }
}

Image Sitemap

Include images in sitemap for discovery.

<url>
  <loc>https://example.com/page/</loc>
  <image:image>
    <image:loc>https://example.com/image.jpg</image:loc>
    <image:title>Image title</image:title>
    <image:caption>Image caption</image:caption>
  </image:image>
</url>

Image SEO Checklist

File Optimization

• Descriptive file names
• WebP format (with fallbacks)
• Compressed appropriately
• Responsive sizes created
• Explicit dimensions set

Alt Text

• All images have alt text
• Descriptive and accurate
• Keywords included naturally
• Decorative images have alt=""

Performance

• Lazy loading on below-fold images
• LCP image NOT lazy loaded
• Images compressed under 200KB
• Proper caching headers

Technical

• Images in sitemap
• Structured data where applicable
• Images crawlable (not blocked)
• CDN for delivery

Conclusion

Image SEO drives traffic from image search while supporting overall page relevance and performance. Focus on descriptive alt text, optimized file names, modern formats like WebP, and proper compression.

Use responsive images and lazy loading for performance, but don’t lazy load LCP images. Include images in sitemaps and use structured data for products.

Combine image optimization with page speed best practices and Core Web Vitals optimization for comprehensive performance.