Image SEO: How to Optimize Images for Search

Run a quick audit on any website. Open the source code and look at the images. Half of them will have filenames like IMG_3847.jpg or Screenshot 2025-11-14.png. The alt attributes? Either empty, set to the filename, or stuffed with keywords that read like someone had a seizure on their keyboard. This is the state of image SEO on most websites in 2026, and it is costing those sites real traffic.

Images account for roughly 50% of the total bytes on the average web page. They are one of Google's top ranking signals for visual search. They directly affect your Core Web Vitals scores. And yet, image optimization is consistently the most neglected part of any on-page SEO checklist. People spend hours agonizing over meta descriptions and title tags, then upload a 4MB PNG with no alt text and call it a day.

This guide covers what actually matters for image SEO in 2026: alt text that works, file naming conventions that help Google understand your content, modern image formats, lazy loading, responsive images, and image sitemaps. No filler. Just the things that move rankings.

Alt Text: The Most Misunderstood Attribute in HTML

Alt text exists for two reasons. First, it tells screen readers what an image shows so that visually impaired users can understand your content. Second, it tells search engines what the image contains because Googlebot cannot "see" your images the way a human can. Despite being one of the oldest HTML attributes, most websites get it wrong.

Here is what bad alt text looks like:

<!-- Bad: empty alt -->
<img src="photo.jpg" alt="">

<!-- Bad: filename as alt -->
<img src="IMG_3847.jpg" alt="IMG_3847">

<!-- Bad: keyword stuffing -->
<img src="shoes.jpg" alt="buy shoes online best shoes cheap shoes running shoes">

And here is what good alt text looks like:

<!-- Good: descriptive and natural -->
<img src="red-running-shoes-side-view.jpg"
     alt="Red Nike Air Zoom Pegasus running shoes, side profile on white background">

<!-- Good: contextual to the content -->
<img src="core-web-vitals-report.png"
     alt="Google PageSpeed Insights report showing LCP of 1.8 seconds and CLS of 0.04">

The difference is clarity. Good alt text describes what the image actually shows in plain language. It includes relevant details without forcing keywords. Google's Google Images best practices documentation says it plainly: "Write useful, information-rich content that uses keywords appropriately and is in context of the content of the page."

Decorative vs. meaningful images

Not every image needs alt text. Decorative images, like background patterns, divider lines, or purely aesthetic icons, should use an empty alt attribute: alt="". This tells screen readers to skip the image entirely, which is the correct behavior. Adding alt text to a decorative swirl just clutters the experience for users who rely on assistive technology.

The rule is simple. If the image conveys information or context that helps the reader understand the content, it needs descriptive alt text. If removing the image would not change the meaning of the page at all, use alt="". When in doubt, ask yourself: "Would a blind reader miss something important if this image were not described?" If yes, write the description.

File Names That Actually Help Google

Your image filename is the first signal Google uses to understand what the image contains. It reads the filename before it even processes the alt text. And yet, millions of images are uploaded every day with names like DSC_0042.jpg, image1.png, or final-FINAL-v3-cropped.jpg.

A good image filename is descriptive, uses hyphens to separate words, and includes natural keywords that reflect the content of the image.

• Bad: IMG_3847.jpg, photo.png, untitled-1.jpg
• Good: seo-audit-dashboard-results.png, red-running-shoes-side-view.jpg

Use hyphens, not underscores. Google treats hyphens as word separators but reads underscores as joiners. The filename seo-audit-report.png is parsed as three separate words. The filename seo_audit_report.png might be read as one compound term. This is a small detail, but it is well-documented in Google's own developer guidelines.

Keep filenames lowercase and avoid special characters, spaces, or overly long strings. If your CMS auto-generates filenames from upload metadata, override them. The 10 seconds it takes to rename an image before uploading is one of the highest-ROI SEO habits you can build.

WebP, AVIF, and Choosing the Right Format

Image format directly affects file size, which directly affects page speed, which directly affects your Core Web Vitals. The format you choose matters more than most people realize.

JPEG is still fine for photographs. It has been the standard for 30 years and every browser supports it. But it is no longer the best option in most cases.

WebP is the current sweet spot. It produces files 25-35% smaller than equivalent-quality JPEGs, supports transparency (like PNG), and has full browser support in 2026. If you are only going to make one format change, switch to WebP.

AVIF takes compression further, with files up to 50% smaller than JPEG. The quality is excellent. The catch is that browser support, while improving, still has gaps in older versions. You should not serve AVIF alone.

PNG is best reserved for images that require transparency or contain text, screenshots, or diagrams with sharp edges. For photographs, PNG files are absurdly large compared to WebP or AVIF.

The correct approach in 2026 is to use the HTML <picture> element to serve the best format each browser can handle:

<picture>
  <source srcset="hero-image.avif" type="image/avif">
  <source srcset="hero-image.webp" type="image/webp">
  <img src="hero-image.jpg" alt="SEO audit results dashboard showing 87 checks passed"
       width="800" height="450" loading="lazy">
</picture>

The browser picks the first format it supports. AVIF-capable browsers get the smallest file. WebP-capable browsers get the next best option. Everything else falls back to JPEG. Your users always get the fastest-loading version their browser can handle.

Lazy Loading: Stop Loading Images Nobody Sees

Lazy loading defers the loading of off-screen images until the user scrolls near them. This is critical for performance. If your page has 20 images and a visitor only scrolls through the first three before leaving, you just loaded 17 images for nothing. That wasted bandwidth hurts your Largest Contentful Paint (LCP), increases data usage for mobile users, and slows down the initial page render.

Native lazy loading in HTML is dead simple:

<img src="product-photo.webp"
     alt="Blue ceramic coffee mug on wooden table"
     width="600"
     height="400"
     loading="lazy">

One attribute. That is it. The loading="lazy" attribute is supported by all modern browsers and requires zero JavaScript. For a deeper technical dive, the web.dev lazy loading guide covers browser behavior and edge cases. There is no reason not to use it on every image that is not visible in the initial viewport.

The exception is your above-the-fold hero image or LCP element. That image should load eagerly (the default behavior) or use loading="eager" explicitly. Lazy loading your most important visual element delays its render, which tanks your LCP score. Load the hero image immediately. Lazy load everything else.

One important detail that many developers miss: always include width and height attributes on your images. These attributes let the browser reserve the correct amount of space before the image loads, which prevents layout shifts. Without explicit dimensions, the page content jumps around as images load in. That layout shift is measured by Cumulative Layout Shift (CLS), one of the three Core Web Vitals. Setting width and height is a free CLS improvement.

Responsive Images with srcset

A single image file cannot serve every device well. A 2400px-wide hero image looks great on a 27-inch monitor but is absurd on a 375px-wide phone screen. The phone downloads 5x the pixels it needs, wastes bandwidth, and renders slower than necessary.

The srcset attribute lets you provide multiple versions of the same image at different sizes. The browser picks the one that best matches the device:

<img src="blog-hero-800.webp"
     srcset="blog-hero-400.webp 400w,
             blog-hero-800.webp 800w,
             blog-hero-1200.webp 1200w"
     sizes="(max-width: 600px) 400px,
            (max-width: 1024px) 800px,
            1200px"
     alt="Screenshot of OwnVector image SEO audit results"
     width="1200"
     height="675"
     loading="lazy">

The srcset attribute lists available image files with their widths. The sizes attribute tells the browser how wide the image will be displayed at each breakpoint. The browser does the math and downloads only the version it needs.

This is especially important for mobile SEO. Google uses mobile-first indexing, which means it evaluates your site from the perspective of a mobile device. If your mobile visitors are downloading desktop-sized images, your mobile page speed suffers, and that is the version Google cares about most.

Image Sitemaps and Discovery

Google discovers images primarily through crawling your HTML. But if your images are loaded dynamically via JavaScript, embedded in CSS backgrounds, or hosted on a CDN with a different domain, Google might miss them entirely. An image sitemap fixes this by explicitly telling Google about every image on your site.

You can extend your existing XML sitemap with image entries:

<url>
  <loc>https://example.com/blog/image-seo-optimization</loc>
  <image:image>
    <image:loc>https://example.com/images/alt-text-example.webp</image:loc>
    <image:title>Alt text example showing good vs bad practices</image:title>
  </image:image>
  <image:image>
    <image:loc>https://example.com/images/webp-compression-comparison.webp</image:loc>
    <image:title>WebP vs JPEG file size comparison chart</image:title>
  </image:image>
</url>

Image sitemaps are not required for most sites. If your images are embedded directly in your HTML with proper alt text, Google will find them through normal crawling. But for large sites with thousands of images, sites using JavaScript frameworks that load images dynamically, or e-commerce sites where product images are critical for Google Shopping results, an image sitemap can meaningfully improve image indexing.

Putting It All Together: The Image SEO Checklist

Here is the complete image optimization checklist, ordered by impact. Run through this for every image you publish.

1. Descriptive filename with hyphens, lowercase, no special characters
2. Alt text that describes the image content naturally (or alt="" for decorative images)
3. Modern format using WebP as the baseline, with AVIF and JPEG fallbacks via <picture>
4. Proper dimensions with explicit width and height attributes to prevent layout shift
5. Lazy loading via loading="lazy" on all below-the-fold images
6. Responsive sizing using srcset and sizes to serve device-appropriate files
7. Compression to keep file sizes under 200KB for content images, under 500KB for hero images
8. Image sitemap for sites with dynamically loaded or JavaScript-rendered images

You do not need to do all eight perfectly to see results. Start with alt text and file names. Those two changes alone can improve your image search visibility within weeks. Then work through format conversion, lazy loading, and responsive sizing as you update existing content.

If you want to audit your image SEO automatically, tools like OwnVector's AI SEO audit check for missing alt text, unoptimized formats, missing dimensions, and lazy loading issues across your entire page in seconds. It flags exactly which images need attention and tells you why each one matters. That beats manually inspecting source code image by image.

Max Kern

Head of Content at OwnVector with 9 years in technical SEO. Previously led SEO at two agencies, audited 500+ sites, and still gets excited about a well-structured JSON-LD block.