Image SEO Issues | Blue Frog Docs

Image SEO Issues

Diagnose and fix missing image optimization including alt text, file names, compression, and responsive images for better search visibility

Image SEO Issues

What This Means

Image SEO refers to the practice of optimizing images on your website so they can be discovered, understood, and ranked by search engines. Poor image optimization leads to missed traffic from image search, slower page speeds, accessibility issues, and reduced overall SEO performance.

Key Image SEO Elements

Alt Text (Alternative Text):

  • Describes image content for screen readers
  • Shown when images fail to load
  • Used by search engines to understand images
  • Critical for accessibility and SEO

File Names:

  • Descriptive file names help search engines
  • Generic names (IMG_1234.jpg) provide no context
  • Should include relevant keywords
  • Part of image ranking signals

Image Compression:

  • File size affects page load speed
  • Speed is a ranking factor
  • Large images slow down mobile experience
  • Properly compressed images maintain quality

Responsive Images:

  • Different sizes for different devices
  • Improves mobile performance
  • Better user experience
  • Reduces unnecessary data transfer

Image Format:

  • Modern formats (WebP, AVIF) save bandwidth
  • Legacy formats (JPEG, PNG) still widely used
  • Format choice impacts quality and file size
  • Different formats for different use cases

Impact on Your Business

Search Visibility:

  • Missing alt text means images won't rank
  • Google Images drives significant traffic
  • Product images critical for e-commerce
  • Visual search is growing rapidly

Page Speed:

  • Unoptimized images are #1 performance issue
  • Slow sites rank lower in search results
  • Users abandon slow-loading pages
  • Core Web Vitals affected by image loading

Accessibility:

  • Missing alt text violates accessibility standards
  • Screen readers can't describe images
  • Legal compliance issues (ADA, WCAG)
  • Excludes users with disabilities

User Experience:

  • Slow-loading images frustrate users
  • High bounce rates from poor performance
  • Mobile users particularly affected
  • Impacts conversion rates

Business Metrics:

  • Lost image search traffic
  • Reduced organic visibility
  • Lower conversion rates
  • Increased bounce rates
  • Wasted bandwidth costs

How to Diagnose

Method 1: Google Search Console

  1. Log into Google Search Console
  2. Navigate to "Performance" report
  3. Click "Search type" filter
  4. Select "Image"
  5. Review image search performance:
    • Impressions
    • Clicks
    • Average position
    • CTR

What to Look For:

  • Low or zero image search traffic
  • Poor image rankings
  • Images not appearing in results
  • Declining image search performance

Method 2: Lighthouse Audit

  1. Open page in Chrome
  2. Right-click → Inspect → Lighthouse tab
  3. Run Performance and Accessibility audits
  4. Review image-related issues:
    • "Image elements do not have [alt] attributes"
    • "Properly size images"
    • "Efficiently encode images"
    • "Serve images in next-gen formats"
    • "Defer offscreen images"

What to Look For:

  • Missing alt attributes
  • Oversized images
  • Uncompressed images
  • Old format images (need WebP)
  • Images blocking rendering

Method 3: Screaming Frog SEO Spider

  1. Download Screaming Frog
  2. Configure: "Config" → "Spider" → "Rendering" (enable JavaScript)
  3. Crawl your website
  4. Navigate to "Images" tab
  5. Review columns:
    • Missing Alt Text
    • Over 100KB
    • File name
    • Image dimensions

What to Look For:

  • Images missing alt text
  • Large file sizes (>100KB)
  • Generic file names (IMG_0001.jpg)
  • Incorrect dimensions
  • Missing images (404 errors)

Method 4: Manual Page Source Review

  1. Visit a page on your site
  2. Right-click → "View Page Source"
  3. Search for <img tags
  4. Check each image:
    <img src="product.jpg" alt="" width="800" height="600">

What to Look For:

  • Empty alt attributes (alt="")
  • Missing alt attributes
  • Generic alt text ("image", "photo")
  • Missing width/height attributes
  • Large image file sizes
  • Non-descriptive file names

Method 5: Google Image Search Test

  1. Google: site:yourwebsite.com
  2. Switch to "Images" tab
  3. Review your indexed images
  4. Check if:
    • Your images appear
    • Descriptions make sense
    • Key product images indexed
    • Images rank for relevant terms

What to Look For:

  • Few images indexed
  • Missing important images
  • Poor image titles
  • Images not ranking
  • Competitor images ranking better

General Fixes

Fix 1: Add Descriptive Alt Text to All Images

Every image needs meaningful alt text:

  1. Basic alt text structure:

    <!-- Bad - no alt text -->
<img src="product.jpg">

<!-- Bad - empty alt text -->
<img src="product.jpg" alt="">

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

<!-- Good - descriptive alt text -->
<img src="red-leather-wallet.jpg" alt="Red leather bifold wallet with card slots">

  2. Product images:

    <img src="mens-blue-running-shoe.jpg"
     alt="Men's blue running shoe with white sole and breathable mesh upper">

  3. Informational images:

    <img src="seo-ranking-factors-chart.jpg"
     alt="Bar chart showing top 10 SEO ranking factors with content quality at 40%">

  4. Decorative images:

    <!-- Decorative images that don't add information -->
<img src="decorative-line.jpg" alt="" role="presentation">

  5. Logo images:

    <img src="company-logo.png" alt="BlueFrog Analytics logo">

Fix 2: Use Descriptive File Names

Rename images before uploading:

  1. Bad file names:

    IMG_1234.jpg
DSC_5678.jpg
photo.png
image1.jpg
untitled.jpg

  2. Good file names:

    red-leather-wallet-front-view.jpg
mens-blue-running-shoe-size-guide.jpg
seo-ranking-factors-2024.jpg
company-team-photo-headquarters.jpg
product-installation-step-1.jpg

  3. File naming best practices:

    • Use descriptive keywords
    • Separate words with hyphens (-)
    • Use lowercase letters
    • Keep names concise but meaningful
    • Include product name or topic
    • Add variation descriptor (front, back, etc.)

Fix 3: Compress and Optimize Images

Reduce file sizes without losing quality:

  1. Using online tools:

  2. Compression guidelines:

    Target file sizes:
- Hero images: <200KB (ideally <150KB)
- Product images: <100KB (ideally <75KB)
- Thumbnails: <50KB (ideally <30KB)
- Icons: <20KB
- Background images: <150KB

  3. Automated compression:

    // Using build tools (webpack, Gulp, Grunt)
// Example: webpack configuration
{
  test: /\.(png|jpg|jpeg|gif)$/i,
  type: 'asset/resource',
  use: [
    {
      loader: 'image-webpack-loader',
      options: {
        mozjpeg: {
          progressive: true,
          quality: 85
        },
        pngquant: {
          quality: [0.85, 0.90],
          speed: 4
        }
      }
    }
  ]
}

  4. CMS plugins for compression:

    • WordPress: Smush, ShortPixel, Imagify
    • Shopify: TinyIMG, Crush.pics
    • Other platforms: Check app stores

Fix 4: Implement Responsive Images

Serve appropriately sized images for different devices:

  1. Using srcset attribute:

    <img src="product-800w.jpg"
     srcset="product-400w.jpg 400w,
             product-800w.jpg 800w,
             product-1200w.jpg 1200w"
     sizes="(max-width: 600px) 400px,
            (max-width: 1000px) 800px,
            1200px"
     alt="Red leather wallet">

  2. Using picture element:

    <picture>
  <source media="(max-width: 600px)" srcset="product-mobile.jpg">
  <source media="(max-width: 1200px)" srcset="product-tablet.jpg">
  <source media="(min-width: 1201px)" srcset="product-desktop.jpg">
  <img src="product-desktop.jpg" alt="Red leather wallet">
</picture>

  3. Modern format with fallback:

    <picture>
  <source srcset="product.webp" type="image/webp">
  <source srcset="product.jpg" type="image/jpeg">
  <img src="product.jpg" alt="Red leather wallet">
</picture>

Fix 5: Use Modern Image Formats

Implement WebP or AVIF for better compression:

  1. Convert to WebP:

    # Using cwebp command-line tool
cwebp -q 85 input.jpg -o output.webp

# Batch convert
for file in *.jpg; do
  cwebp -q 85 "$file" -o "${file%.jpg}.webp"
done

  2. Automatic conversion (Cloudflare, CDN):

    Many CDNs automatically convert images:
- Cloudflare Polish
- Cloudinary automatic format
- imgix auto=format
- Amazon CloudFront with Lambda@Edge

  3. CMS solutions:

    • WordPress: WebP Converter, ShortPixel
    • Shopify: Apps like TinyIMG
    • Check your platform's app store

Fix 6: Add Width and Height Attributes

Prevent layout shifts during loading:

  1. Always specify dimensions:

    <!-- Bad - no dimensions -->
<img src="product.jpg" alt="Product">

<!-- Good - dimensions specified -->
<img src="product.jpg" alt="Product" width="800" height="600">

  2. Maintains aspect ratio with CSS:

    <img src="product.jpg"
     alt="Product"
     width="800"
     height="600"
     style="max-width: 100%; height: auto;">

  3. Prevents Cumulative Layout Shift (CLS):

    • Browser reserves space before image loads
    • Page doesn't jump when image appears
    • Improves Core Web Vitals
    • Better user experience

Fix 7: Implement Lazy Loading

Defer offscreen images:

  1. Native lazy loading:

    <img src="product.jpg"
     alt="Product description"
     loading="lazy"
     width="800"
     height="600">

  2. For multiple images:

    <!-- Eager load above-the-fold images -->
<img src="hero.jpg" alt="Hero image" loading="eager">

<!-- Lazy load below-the-fold images -->
<img src="product-1.jpg" alt="Product 1" loading="lazy">
<img src="product-2.jpg" alt="Product 2" loading="lazy">
<img src="product-3.jpg" alt="Product 3" loading="lazy">

  3. Important notes:

    • Don't lazy load above-the-fold images
    • Don't lazy load LCP (Largest Contentful Paint) image
    • Use loading="eager" for critical images
    • Test on mobile connections

Fix 8: Add Structured Data for Images

Help search engines understand images:

  1. Product images with Schema.org:

    <script type="application/ld+json">
{
  "@context": "https://schema.org/",
  "@type": "Product",
  "name": "Red Leather Wallet",
  "image": [
    "https://example.com/images/red-wallet-front.jpg",
    "https://example.com/images/red-wallet-back.jpg",
    "https://example.com/images/red-wallet-open.jpg"
  ],
  "description": "Premium red leather bifold wallet",
  "brand": {
    "@type": "Brand",
    "name": "BrandName"
  },
  "offers": {
    "@type": "Offer",
    "price": "49.99",
    "priceCurrency": "USD"
  }
}
</script>

  2. Article images:

    <script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Complete Guide to Image SEO",
  "image": [
    "https://example.com/images/image-seo-guide.jpg"
  ],
  "datePublished": "2024-01-15",
  "author": {
    "@type": "Person",
    "name": "John Doe"
  }
}
</script>

Platform-Specific Guides

Detailed implementation instructions for your specific platform:

Platform Troubleshooting Guide
Shopify Shopify Image SEO Guide
WordPress WordPress Image SEO Guide
Wix Wix Image SEO Guide
Squarespace Squarespace Image SEO Guide
Webflow Webflow Image SEO Guide

Verification

After optimizing images:

  1. Lighthouse re-audit:

    • Run new audit in Chrome DevTools
    • Verify image issues resolved
    • Check Performance score improved
    • Confirm Accessibility score up

  2. Page speed testing:

    • Test with PageSpeed Insights
    • Verify image optimization passes
    • Check Core Web Vitals improved
    • Test on mobile and desktop

  3. Screaming Frog re-crawl:

    • Re-crawl website
    • Check Images tab
    • Verify alt text added
    • Confirm file sizes reduced

  4. Google Search Console:

    • Wait 2-4 weeks
    • Check Image search performance
    • Monitor impressions increase
    • Review image indexing

  5. Manual verification:

    • View page source
    • Verify alt attributes present
    • Check file names improved
    • Confirm responsive images working
    • Test on various devices

Common Mistakes

  1. Leaving alt text empty - Every image needs description
  2. Using "image" or "photo" as alt text - Be specific
  3. Keyword stuffing in alt text - Write for humans
  4. Not compressing images - Huge files slow site
  5. Using wrong image format - WebP for photos, SVG for logos
  6. Not using responsive images - Desktop images on mobile
  7. Generic file names - IMG_1234.jpg tells nothing
  8. Missing width/height - Causes layout shifts
  9. Lazy loading above-fold images - Delays LCP
  10. Over-optimizing image quality - Too much compression degrades quality

Image SEO Checklist

File Preparation:

  • Descriptive file names (no IMG_1234.jpg)
  • Images compressed before upload
  • Appropriate format (WebP, JPEG, PNG, SVG)
  • Correct dimensions for use case
  • File size targets met

On-Page Optimization:

  • Alt text on all images
  • Width and height attributes added
  • Responsive images implemented (srcset)
  • Lazy loading on below-fold images
  • No lazy loading on LCP image
  • Image captions when helpful

Technical Implementation:

  • CDN for image delivery
  • Modern formats with fallbacks
  • Compression automated
  • Image sitemap created
  • Structured data for key images
  • HTTPS for all images

Performance:

  • Page load time <3 seconds
  • LCP <2.5seconds
  • CLS <0.1- [ ] Images don't block rendering
  • Total page size reasonable

Additional Resources

↑ Back to top
// SYS.FOOTER