Image SEO Guide: Alt Text, Sizing, and Ranking in Image Search

On the average web page, images are the single largest chunk of downloaded data. They're also, on most sites, the least optimized line item.

That comes with two separate costs: the page gets slower (Core Web Vitals drop, conversions fall), and traffic that could come from Google Images never arrives. This guide covers both.

What Does Image SEO Cover?

It sits at the intersection of three areas:

• Accessibility: can someone using a screen reader understand what the image shows?
• Performance: how fast does it load, and does it shift the page layout?
• Discoverability: does it show up in Google Images and visual search results?

All three are shaped by the same technical decisions, which is why it makes sense to handle them together.

Writing Proper Alt Text

Alt text is the text equivalent of an image. It displays when the image fails to load, gets read aloud by screen readers, and is the primary signal Google uses to understand what's in the image.

Rules:

• Write it as if describing the image to someone who can't see it. That's the real test.
• Stay under 125 characters. Some screen readers cut off anything past that.
• Don't start with "image of" or "photo of." It's already understood to be an image.
• Leave alt="" on decorative images. Don't skip the attribute entirely — an empty alt tells a screen reader "skip this"; no alt attribute at all makes it fall back to reading the filename.
• Don't keyword-stuff. It can get flagged as a spam signal.

File Names and URLs

Image file names still carry a signal, and it costs nothing to get right:

IMG_20260813_113244.jpg   →   blue-leather-shoulder-bag.jpg

Avoid accented characters (they can cause issues on some servers), separate words with hyphens, and skip underscores.

Which Format: WebP or AVIF?

The practical approach: make WebP your default, serve AVIF through a <picture> tag, and keep JPEG as the fallback.

<picture>
  <source srcset="product.avif" type="image/avif">
  <source srcset="product.webp" type="image/webp">
  <img src="product.jpg" alt="Blue leather women's shoulder bag" width="800" height="1000">
</picture>

Size and Resolution

The most common waste: a 4,000-pixel-wide photo dropped into a slot that displays at 600 pixels on screen. The browser downloads the whole file, then shrinks it.

Rules:

• Don't upload an image larger than twice the size it will actually display at (2x is enough for retina screens).
• Use srcset to serve different sizes to different screens.
• Target file size for content images: under 200 KB. For full-width hero images, try to stay under 400 KB.

<img src="product-800.webp"
     srcset="product-400.webp 400w, product-800.webp 800w, product-1600.webp 1600w"
     sizes="(max-width: 600px) 100vw, 800px"
     alt="Blue leather women's shoulder bag"
     width="800" height="1000">

Why Setting width and height Is Critical

Without width and height attributes, the browser has no way to know how much space the image will take up. When the image loads, the content beneath it shifts down — that breaks the Cumulative Layout Shift (CLS) metric and drags down your Core Web Vitals score.

On mobile especially, a shifting layout also causes users to tap the wrong thing. These two attributes are the cheapest Core Web Vitals win available; see our Core Web Vitals guide for details.

The Lazy-Loading Trap

loading="lazy" skips loading an image until it's about to enter the viewport, speeding up the initial page load. But never apply lazy loading to the image visible above the fold.

The hero image at the top of a page is usually the Largest Contentful Paint (LCP) element. Lazy-loading it directly worsens the single most important speed metric you're measuring.

The rule: anything visible on first load gets loading="eager"; everything below it gets loading="lazy".

Getting Traffic From Google Images

Image search is an underrated traffic source in plenty of industries — fashion, home decor, food, furniture, auto parts. The main ranking factors:

1. The text surrounding the image. Google infers an image's context mostly from the nearby heading and paragraph.
2. The page's own ranking. If the page is authoritative on the topic, its images rank higher too.
3. Originality. Stock photos are identical across thousands of sites; your own images stand a much better chance of standing out.
4. Structured data. Product, recipe, and video schema can earn badges in image results — covered in our schema markup guide.
5. An image sitemap. Especially helpful for discovery on sites that load images via JavaScript.

Image Sitemaps

You can add image data to your regular sitemap:

<url>
  <loc>https://yoursite.com/product/bag</loc>
  <image:image>
    <image:loc>https://yoursite.com/img/bag.webp</image:loc>
  </image:image>
</url>

This makes a real difference on sites that load images via JavaScript after the initial page render. For the full picture on sitemap structure, see our robots.txt and sitemap guide.

Checklist

• [ ] Does every content image have meaningful alt text?
• [ ] Is alt="" set on decorative images?
• [ ] Are file names descriptive, hyphenated, and free of special characters?
• [ ] Is the format WebP (or AVIF)?
• [ ] Are file sizes under 200 KB?
• [ ] Are width and height set?
• [ ] Is the above-the-fold image not lazy-loaded?
• [ ] Is srcset serving a smaller version for mobile?
• [ ] Are images served through a CDN?
• [ ] Does the sitemap include image data?

Frequently Asked Questions

Should I put a keyword in the alt text?

Yes, if it fits naturally — no, if you're forcing it. Alt text's primary job is describing the image; if a keyword sits naturally inside that description, that's fine.

Is using stock photos harmful?

No ranking penalty, but your odds of standing out in image search are low since the same file appears on hundreds of sites. Your own photos are always better — even on a tight budget.

Does moving images to a CDN affect SEO?

Positively — load time drops. If you're serving from a different domain, use the full addresses in your image sitemap.

How many images is too many?

The count itself isn't the issue, total weight is. A page with ten images at 800 KB total is fine; a page with three images at 6 MB is not.

Related Articles:

• Core Web Vitals and Page Speed Optimization
• On-Page SEO Guide
• Technical SEO Checklist: 30 Points
• Schema Markup Guide
• Mobile SEO Guide