Image Optimization Guide for SEO with Auditite

Overview

Images typically account for 40-60% of a page’s total weight. Optimizing them improves page speed (directly impacting Core Web Vitals), enhances accessibility, and opens up Google Image Search as a traffic channel.

Step 1: Image Audit

1. Crawl your site and export a list of all image URLs with their file sizes and dimensions.
2. Identify images over 200KB — these are your top optimization targets.
3. Check for missing alt attributes across all images.
4. Flag images served in older formats (JPEG, PNG, GIF) that could use modern formats.
5. Identify pages where images are the LCP element.

Step 2: Format Selection

Format	Best For	Browser Support
WebP	General photos and illustrations	97%+ browsers
AVIF	High-quality photos with best compression	90%+ browsers
SVG	Icons, logos, simple illustrations	Universal
PNG	Transparency required, simple graphics	Universal
JPEG	Fallback only	Universal

Use <picture> elements with AVIF as the primary source, WebP as fallback, and JPEG/PNG as the final fallback for maximum compatibility.

Step 3: Compression and Sizing

1. Set a maximum file size budget: 100KB for hero images, 50KB for content images, 20KB for thumbnails.
2. Use lossy compression at quality 75-85 for photos — the visual difference is negligible.
3. Resize images to match their display dimensions. Never serve a 3000px image in a 600px container.
4. Implement responsive images with srcset and sizes attributes for different viewport widths.
5. Generate multiple sizes at build time: 400w, 800w, 1200w, and 1600w are typical breakpoints.

Step 4: Lazy Loading

1. Add loading="lazy" to all images below the fold.
2. Never lazy-load the LCP image — this delays the largest contentful paint.
3. Use fetchpriority="high" on the LCP image to tell the browser to download it first.
4. For background images loaded via CSS, use intersection observer to trigger loading.

Step 5: Alt Text Optimization

Write alt text that is:

• Descriptive of the image content (not the surrounding text)
• Concise: 5-15 words in most cases
• Keyword-relevant where natural, but never keyword-stuffed
• Functional for screen readers — describe what the image shows, not “image of” or “photo of”
• Empty (alt="") for purely decorative images that convey no information

Step 6: Image SEO for Search Visibility

1. Use descriptive, keyword-rich file names: blue-running-shoes-nike.webp not IMG_4523.webp.
2. Place images near relevant text content that provides context.
3. Add structured data (ImageObject) for images you want to appear in Google Image search.
4. Create an image sitemap or include image URLs in your existing XML sitemap.
5. Ensure image URLs are stable — changing image URLs breaks cached search results.

Step 7: CDN and Delivery

1. Serve all images through a CDN with global edge locations.
2. Set aggressive cache headers: Cache-Control: public, max-age=31536000, immutable for fingerprinted image URLs.
3. Enable automatic format negotiation (Accept header-based) if your CDN supports it.
4. Use image CDN services that can resize and optimize on the fly based on device characteristics.

Step 8: Monitoring

Set up Auditite to continuously monitor:

• Pages with images over your size budget
• Missing or empty alt attributes
• Images served without next-gen formats
• LCP images that are not preloaded or prioritized
• Broken image URLs (404 status on image resources)