Image Alt Text Checker
Run a comprehensive image SEO audit and alt text checker directly in your AI coding assistant. Validate alt text quality and length, check image file sizes for performance, detect WebP/AVIF format support, verify lazy loading implementation, check responsive images (srcset), and audit image dimensions (width/height attributes).
Install and use:
curl -fsSL https://suparank.io/install | bash /suparank-images What It Checks
Alt Text Validation
Check for missing, empty, or non-descriptive alt attributes
File Size Analysis
Identify oversized images that slow down page load
Modern Format Detection
Check for WebP/AVIF usage with fallbacks for older browsers
Lazy Loading Check
Verify loading="lazy" on below-the-fold images
Responsive Images
Validate srcset and sizes for responsive image delivery
Dimension Attributes
Ensure width/height prevent Cumulative Layout Shift
Decorative Image Handling
Verify decorative images use empty alt or role="presentation"
Image Filename SEO
Check for descriptive, keyword-rich filenames vs img123.jpg
Example Output
═══════════════════════════════════════════════════════════════════
SUPARANK IMAGE SEO AUDIT
═══════════════════════════════════════════════════════════════════
File: src/pages/products/index.astro
Date: 2026-01-16
Total Images: 12
───────────────────────────────────────────────────────────────────
CRITICAL ISSUES (3)
───────────────────────────────────────────────────────────────────
[SEO] Missing alt text
Location: Line 45
Image: <img src="/products/widget.jpg">
Fix: Add descriptive alt: alt="Premium Widget - stainless steel design"
Impact: Accessibility fail, missed image SEO opportunity
[PERF] Oversized image (2.4 MB)
Location: Line 89
Image: hero-banner.png (3840x2160)
Displayed: 1200x630
Fix: Resize to display size, convert to WebP (~150KB)
Impact: Adds ~3s to page load on 3G
[CLS] Missing dimensions
Location: Line 112
Image: <img src="/team/photo.jpg" alt="Team">
Fix: Add width="400" height="300"
Impact: Layout shift when image loads (CLS ~0.12)
───────────────────────────────────────────────────────────────────
WARNINGS (4)
───────────────────────────────────────────────────────────────────
[SEO] Non-descriptive filename
Location: Line 67
Current: IMG_20240115_143022.jpg
Suggested: product-dashboard-screenshot.jpg
Impact: Missed keyword opportunity in image search
[PERF] Missing lazy loading
Location: Lines 145, 178, 201
Issue: Below-fold images without loading="lazy"
Fix: Add loading="lazy" to defer loading
Impact: Unnecessary bandwidth on initial load
[PERF] Legacy format (PNG for photo)
Location: Line 89
Issue: Using PNG for photographic content
Fix: Convert to WebP/AVIF with <picture> fallback
Savings: ~80% file size reduction
[SEO] Generic alt text
Location: Line 156
Current: alt="image"
Fix: alt="Customer dashboard showing analytics graphs"
Impact: Non-helpful for screen readers and SEO
───────────────────────────────────────────────────────────────────
PASSED CHECKS (5)
───────────────────────────────────────────────────────────────────
✓ Hero image has priority loading (fetchpriority="high")
✓ 3 images use modern WebP format
✓ 2 images have proper srcset for responsive delivery
✓ Decorative icons use aria-hidden="true"
✓ Logo images have appropriate alt text
───────────────────────────────────────────────────────────────────
RECOMMENDATIONS
───────────────────────────────────────────────────────────────────
1. Add <picture> element for hero:
<picture>
<source srcset="/hero.avif" type="image/avif">
<source srcset="/hero.webp" type="image/webp">
<img src="/hero.jpg" alt="..." width="1200" height="630">
</picture>
2. Implement responsive images for product gallery:
<img srcset="/product-400.webp 400w,
/product-800.webp 800w,
/product-1200.webp 1200w"
sizes="(max-width: 640px) 400px,
(max-width: 1024px) 800px,
1200px"
src="/product-800.webp"
alt="Product name">
───────────────────────────────────────────────────────────────────
SUMMARY
───────────────────────────────────────────────────────────────────
Critical: 3 | Warnings: 4 | Passed: 5
Image SEO Score: 58/100
Priority: Fix missing alt text and dimensions first,
then optimize file sizes for performance gains.
═══════════════════════════════════════════════════════════════════ Frequently Asked Questions
How do I check if images have alt text?
Use the /suparank-images command in Claude Code or Cursor. It scans all HTML files for <img> tags and checks if they have alt attributes. Missing alt text gets flagged as a critical SEO issue with line numbers and specific fix suggestions. The tool also validates alt text quality (not just presence) and flags generic text like "image" or "photo".
What makes good alt text for SEO?
Good alt text should be descriptive, specific, and under 125 characters. Include relevant keywords naturally without stuffing. Describe what the image shows and its context. Avoid prefixes like "image of" or "picture of". For decorative images, use empty alt="" to signal they can be ignored by screen readers. Never use alt text like "img123" or leave it completely missing.
Should I use WebP or AVIF images?
Use both formats with fallbacks for maximum compatibility. AVIF offers 30-50% better compression than WebP but has less browser support. Implement with <picture> elements: AVIF as first <source>, WebP as second, and JPEG/PNG as the fallback <img>. This gives modern browsers the smallest files while maintaining support for older browsers.
How does lazy loading affect SEO?
Lazy loading (loading="lazy") is positive for SEO when used correctly. It reduces initial page load time and bandwidth, improving Core Web Vitals. However, NEVER lazy load the LCP (Largest Contentful Paint) image, typically your hero image, as this delays it and hurts performance scores. Only lazy load below-the-fold images that aren't visible on initial page load.
Optimize Your Images
Install Suparank tools and audit your image SEO in seconds.
curl -fsSL https://suparank.io/install | bash
Then type /suparank-images in your AI assistant