Image SEO: Complete Guide to Optimizing Images for Search

A Site Where Images Were the Entire Problem

After checking an e-commerce site last year that had everything technically correct — fast hosting, clean code, good content. But their mobile page speed was a 34 out of 100. Couldn't figure out why until I looked at the page weight. Their homepage was loading 14MB of images on first paint. Fourteen megabytes. For a homepage.

The culprit? Every product photo was uploaded as a 3000px wide PNG straight from the photographer's camera. No compression, no resizing, no modern formats. On mobile, users were downloading desktop-sized images on 4G connections. We converted everything to WebP, added responsive sizing, and brought total image payload down to 800KB. Page speed jumped to 87. That one fix — just images — improved their Core Web Vitals from "poor" to "good" across the entire site.

That experience changed how I think about image SEO. It's not a nice-to-have. It's often the single biggest performance bottleneck on a page.

Alt Text: The Thing You're Probably Doing Wrong

Alt text serves two purposes that people conflate: accessibility for screen readers and context for search engines. Both matter, but they serve different audiences.

For accessibility, alt text describes what the image is so someone who can't see it gets the same information. For SEO, alt text tells search engines what the image depicts so it can appear in image search results. Good alt text serves both purposes simultaneously.

What I see go wrong constantly. People write alt text like "image of product" or just stuff keywords: "buy blue widget online best price." Neither helps anyone. The best alt text is specific and descriptive: "Woman hiking on mountain trail with red backpack at sunset" — that's useful for a screen reader user AND it gives Google clear context.

Keep it under 125 characters. Screen readers cut off longer text, so even if you want to be thorough, you're wasting your time past that point. Decorative images (background patterns, spacer images) should have empty alt attributes — alt="" — so screen readers skip them entirely.

A mistake I made early on: I wrote the same alt text for every product variant. "Blue running shoe" was the alt text for the blue, red, and green versions. Google couldn't differentiate them in image search. Each variant needs unique alt text that distinguishes it from others.

File Names: The Five-Minute Fix That Matters

I know this sounds basic, but I still see sites with images named "IMG_4729.JPG" and "photo-1.png". Search engines use file names as a signal for image content. Renaming files takes five minutes and costs nothing.

The convention I follow: use hyphens between words, include the primary keyword, and be descriptive. red-leather-wallet.jpg beats IMG_4729.JPG every time. seo-audit-checklist-2026.png tells Google exactly what that image is about.

Image Formats: My Honest Take

Everyone pushes WebP as the default format now, and for most cases they're right. WebP gives you 25-35% smaller file sizes than JPEG with comparable quality. Browser support is over 96%. For photos and complex images, it's the standard.

But I'll push back on the "WebP for everything" crowd. For screenshots and images with text, WebP can introduce compression artifacts around sharp edges. After running tests on a screenshot-heavy tutorial page — WebP artifacts made the text harder to read. PNG was actually better for those specific images, even though it's a larger file. Sometimes the "best" format isn't the best for your specific use case.

AVIF is technically superior to WebP — up to 50% smaller files — but browser support is still around 80%. I use it as an enhancement with WebP fallback. Most users won't notice the difference, but the ones on supported browsers get a faster load.

SVG for logos and icons is non-negotiable. Vector formats scale perfectly and are typically tiny files. If your logo is still a PNG, fix that today.

Here's the format decision I use: photos go to WebP, screenshots stay PNG, logos and icons go SVG, and AVIF with WebP fallback for sites where every millisecond of performance counts.

Responsive Images: Stop Serving Desktop Images on Mobile

This is the second-biggest performance killer after compression. If you're not using srcset, every mobile visitor downloads your full-size desktop image.

The HTML is straightforward:

The browser picks the right size based on the user's viewport. A phone gets the 400px version, a tablet gets 800px, a desktop gets 1200px. Simple concept, massive impact.

On that e-commerce site I mentioned, responsive images alone reduced average image payload by 60% for mobile users. That's what happens when difference between a 3-second load and a 1-second load on a typical 4G connection.

Lazy Loading: The Right Way and the Wrong Way

Lazy loading defers below-the-fold images so they don't block the initial page render. Native browser support exists since 2020, so you can just add loading="lazy":

But here's the mistake people make: lazy-loading hero images. Your above-the-fold content should load immediately. Only lazy-load images that appear after the user scrolls. From my experience, sites lazy-load their hero banner, which tanks LCP because the browser waits to fetch the most important visual element.

One thing worth noting: if you're using a CDN or image optimization service, check how they handle lazy loading. Some services add their own lazy-loading JavaScript that conflicts with native lazy loading. Test in Chrome DevTools to make sure images load in the expected order.

Image Sitemaps: Google Can't Index What It Can't Find

If your images aren't in your sitemap, Google relies on crawling your HTML to discover them. That works for most images, but not for images loaded via JavaScript, background images, or images in galleries and carousels.

Including images in your XML sitemap gives Google direct discovery paths:

  https://example.com/page
  
    https://example.com/image.jpg
    Description of the image
  

I've had sites where image search traffic doubled after adding images to their sitemap. Not because the images were new — Google just couldn't find them before.

Common Mistakes I See in Every Audit

• Oversized images: 3000px wide when 800px is all you need for the display context. Resize before uploading.
• Wrong format: PNG for product photos that should be WebP. The file size difference is painful.
• Missing alt text: Still the most common issue. In my last 20 audits, 14 had significant alt text gaps.
• Generic file names: "banner-final-v3.jpg" tells Google nothing.
• No lazy loading: Every image loading on page load creates a waterfall of requests that kills performance.
• Ignoring EXIF data: This one's niche, but if your images contain location or camera data, some SEOs argue you should strip it for privacy. Others say the metadata helps with image search context. I strip it for client sites as a precaution.

Tools I Actually Use

• Squoosh — my go-to for quick manual compression. Free, fast, and the quality comparison slider is excellent.
• TinyPNG — batch compression that works well for PNGs and WebPs.
• Lighthouse — built into Chrome DevTools. Run it after any image optimization to verify the impact.
• AI SEO Copilot — checks alt text coverage, format optimization, and identifies images missing responsive sizing across your entire site.

Audit Your Image SEO

Run a free image SEO analysis — check alt text coverage, format optimization, and lazy loading implementation.