Image Optimization for SEO: The Complete Checklist

Images account for roughly 50% of total page weight on most websites. Unoptimized images are the single biggest reason pages fail Core Web Vitals — and that directly impacts your search rankings. This checklist covers every image optimization technique that matters for SEO in 2026.

Why Image Optimization Matters for SEO

Google uses page speed as a ranking factor, and images are usually the heaviest assets on a page. Here's the direct impact:

• Core Web Vitals: LCP (Largest Contentful Paint) is often an image. If your hero image takes 4+ seconds to load, your LCP fails — and Google penalizes you.
• Bounce rate: 53% of mobile visitors leave if a page takes more than 3 seconds to load (Google data).
• Image search traffic: Google Images drives 20-30% of all Google searches. Properly optimized images rank in image search and drive organic traffic.
• Crawl budget: Heavy pages consume more crawl budget. Faster pages mean more pages crawled per session.

The Complete Image SEO Checklist

1. Compress Every Image

This is the highest-impact, lowest-effort optimization. Compress all images before uploading:

Use tools that process images client-side (like ImgMin — no upload required) to avoid uploading sensitive images to third-party servers. For format-specific guides: compress JPG, compress PNG, compress WebP.

2. Use the Right Format

• WebP for everything on the modern web (97%+ browser support)
• JPG as fallback for photos and complex images
• PNG only when you need pixel-perfect graphics or transparency without WebP support
• SVG for logos, icons, and simple illustrations (infinitely scalable, tiny file size)

Serve multiple formats with the <picture> element:

<picture>
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="Product hero image" width="1200" height="630">
</picture>

3. Resize to Display Dimensions

Never serve a 4000×3000 image in an 800×600 slot. This wastes bandwidth and hurts LCP.

• Use srcset to serve different sizes for different viewports
• Generate 2-3 sizes per image: mobile (640px), tablet (1024px), desktop (1920px)
• Set sizes attribute to tell the browser which size to pick

<img
  srcset="photo-640.webp 640w, photo-1024.webp 1024w, photo-1920.webp 1920w"
  sizes="(max-width: 640px) 100vw, (max-width: 1024px) 80vw, 1200px"
  src="photo-1024.webp"
  alt="Descriptive alt text"
  width="1200" height="800">

4. Always Set Width and Height

Without explicit dimensions, the browser can't reserve space for images before they load. This causes layout shifts — a CLS (Cumulative Layout Shift) problem that hurts Core Web Vitals.

<!-- Bad: causes layout shift -->
<img src="photo.jpg" alt="Photo">

<!-- Good: browser reserves space -->
<img src="photo.jpg" alt="Photo" width="800" height="600">

Combine with CSS aspect-ratio or height: auto for responsive behavior while preventing shifts.

5. Write Descriptive Alt Text

Alt text is the primary way Google understands image content. Good alt text helps you rank in both web search and image search.

Guidelines for alt text:

• Describe what's IN the image, not what it IS
• Keep it under 125 characters
• Include relevant keywords naturally — don't stuff
• For decorative images, use alt="" (empty) to skip screen readers

6. Use Descriptive File Names

Google reads file names as a signal for image content.

• Bad: IMG_20260315_001.jpg, screenshot.png
• Good: golden-retriever-park.jpg, quarterly-revenue-chart.png

Use hyphens to separate words. Keep file names lowercase, concise, and descriptive.

7. Implement Lazy Loading

Lazy loading defers off-screen images until the user scrolls near them. This dramatically improves initial page load time.

<!-- Native lazy loading (all modern browsers) -->
<img src="photo.jpg" alt="Description" loading="lazy" width="800" height="600">

<!-- Don't lazy-load above-the-fold images -->
<img src="hero.jpg" alt="Hero" loading="eager" fetchpriority="high">

8. Preload Critical Images

For your LCP image, tell the browser to fetch it early:

<link rel="preload" as="image" href="hero.webp" type="image/webp">

This can shave 200-500ms off LCP because the browser starts downloading before it parses the HTML that references the image.

9. Use a CDN for Image Delivery

Content Delivery Networks serve images from servers closest to the user. Benefits:

• 50-80% reduction in latency for global users
• Automatic format conversion (some CDNs serve WebP/AVIF automatically)
• On-the-fly resizing via URL parameters
• Built-in caching with proper cache headers

10. Add Structured Data for Images

Help Google understand your images in context with structured data:

• Product images: Use Product schema with image property
• Article images: Use Article schema with image property
• Recipe images: Use Recipe schema (images are required for rich results)

Images referenced in structured data are more likely to appear in Google's rich results and image carousels.

11. Create an Image Sitemap

If your images are important for SEO (product photos, infographics), add them to your sitemap:

<url>
  <loc>https://example.com/page</loc>
  <image:image>
    <image:loc>https://example.com/photo.jpg</image:loc>
    <image:title>Product photo</image:title>
  </image:image>
</url>

12. Strip Unnecessary Metadata

EXIF data (camera model, GPS coordinates, timestamps) adds 20-100 KB per image. Strip it before uploading for:

• Smaller file sizes
• Privacy protection (removes GPS location data)
• No impact on visual quality or SEO

Core Web Vitals Impact Summary

Quick Reference Checklist

• Compress all images (target 75-85% quality for lossy formats)
• Use WebP with JPG/PNG fallbacks via <picture>
• Resize images to actual display dimensions
• Set explicit width and height on every <img>
• Write descriptive, keyword-relevant alt text
• Use descriptive, hyphenated file names
• Lazy-load below-the-fold images
• Preload the LCP image with fetchpriority="high"
• Serve images via CDN for global performance
• Add structured data for product/article images
• Include important images in your sitemap
• Strip EXIF metadata before uploading

Summary

Image optimization is the highest-ROI SEO work you can do. Compression alone often fixes Core Web Vitals failures. Combine it with proper sizing, alt text, lazy loading, and modern formats — and you'll see measurable improvements in both page speed and search rankings.

Related Tools

• Compress JPG online
• Compress PNG online
• Compress WebP online
• Compress images to 200KB — ideal for blog post images
• Compress images to 100KB — for strict submission limits
• Privacy-first image compression — no upload, no server