Why Image SEO Matters
Images are usually the heaviest thing on a page — often around half the total bytes. That makes them the single biggest lever you have over how fast a page paints, and the hero image is frequently the Largest Contentful Paint element that Google measures. Get images wrong and you pay twice: slower loads that hurt rankings, and missed traffic from Google Image Search, which still sends real visitors to product pages, recipes, and how-to content.
The good news is that image SEO is almost entirely mechanical. There's no guessing about intent or waiting weeks for a re-crawl — you set a handful of attributes correctly and the wins are immediate.
Alt Text Done Right
Alt text has two jobs: describe the image to screen-reader users, and give Google a text signal for what the image contains. Both jobs want the same thing — a plain, accurate description of the image's function and content in context.
<!-- Bad -->
<img src="IMG_4821.jpg" alt="">
<img src="IMG_4821.jpg" alt="image">
<img src="IMG_4821.jpg" alt="running shoes shoes buy running shoes cheap best">
<img src="IMG_4821.jpg"> <!-- missing alt entirely -->
<!-- Good -->
<img src="trail-running-shoe-side.jpg"
alt="Salomon trail running shoe, side view showing lug outsole">
Rules that actually matter:
- Describe the content and its purpose. If a photo shows a red trail shoe from the side, say that. If the image is a chart, describe the takeaway ("Bar chart: organic traffic up 40% year over year"), not "chart.png."
- Don't start with "image of" or "picture of." Screen readers already announce it as an image. "Image of a dog" gets read as "image, image of a dog."
- Keep it concise. One good sentence. There's no hard character limit in the spec, but past roughly 125 characters some screen readers and tools truncate, so aim shorter.
- Keywords only if they're natural. A relevant keyword that genuinely describes the image is fine. A comma-salad of terms is keyword stuffing — it reads terribly to a screen-reader user and Google discounts it.
When to leave alt empty
Not every image needs a description. A purely decorative image — a divider, a background flourish, an icon that sits next to text that already says the same thing — should have alt="" (empty, but present). That tells screen readers to skip it instead of announcing a distracting filename.
<!-- Decorative: skip it -->
<img src="section-divider.svg" alt="">
<!-- Icon paired with a visible label: the text carries the meaning -->
<a href="/download"><img src="pdf-icon.svg" alt=""> Download PDF</a>
Text inside an image
If an image contains words — a logo, a button, an infographic heading — the alt text should carry that text, because sighted users can read it and non-sighted users can't. A logo's alt is usually just the company name: alt="Acme", not alt="Acme company logo blue".
Responsive Images: srcset and sizes
Shipping one giant image to every device is the most common weight problem. A phone doesn't need your 2400px-wide desktop hero. srcset lets the browser pick the right file for the screen, and sizes tells it how much space the image will occupy so it can choose before layout.
<img
src="hero-800.jpg"
srcset="hero-400.jpg 400w,
hero-800.jpg 800w,
hero-1600.jpg 1600w,
hero-2400.jpg 2400w"
sizes="(max-width: 600px) 100vw, 50vw"
alt="Team reviewing analytics on a wall-mounted dashboard"
width="1600" height="900">
Here a phone downloads hero-400.jpg instead of a 2400px file — often a 5–10x byte saving on the most bandwidth-constrained device. sizes says "on screens up to 600px the image is full width, otherwise it's half the viewport," and the browser does the math. Frameworks automate this: Next.js <Image> generates the srcset and sizes for you, and WordPress adds srcset automatically for images in the media library.
Modern Formats: WebP and AVIF
WebP is roughly 25–35% smaller than JPEG at equivalent quality, and it's supported in every current browser. AVIF is smaller still — often another 20%+ beyond WebP — with slightly less universal support and slower encoding. The safe pattern is to serve the modern format and fall back to JPEG/PNG for anything that can't handle it:
<picture>
<source srcset="photo.avif" type="image/avif">
<source srcset="photo.webp" type="image/webp">
<img src="photo.jpg" alt="Description" width="800" height="600">
</picture>
The browser walks the <source> list top to bottom and uses the first type it supports, so put AVIF first, then WebP, then the <img> fallback last. If you're on Next.js, the <Image> component converts to WebP/AVIF on the fly and you skip the <picture> boilerplate entirely. Cloudflare Polish and Vercel's image optimization do the same at the CDN edge.
Lazy Loading — But Not the Hero
loading="lazy" tells the browser to defer an image until it's about to scroll into view. That's a free win for below-the-fold images — a long article's inline photos, a footer logo, gallery thumbnails further down.
The critical mistake: never lazy-load your LCP image. If the hero at the top of the page is loading="lazy", the browser deprioritizes the very thing Google times, and your LCP gets worse. The hero should load eagerly and, ideally, get a priority hint.
<!-- Above the fold / LCP candidate: load eagerly, hint high priority -->
<img src="hero.jpg" alt="Hero" fetchpriority="high"
width="1200" height="600">
<!-- Below the fold: defer it -->
<img src="figure-3.jpg" alt="Conversion funnel diagram"
loading="lazy" width="800" height="600">
fetchpriority="high" bumps the hero up the download queue. In Next.js, priority on the <Image> sets that hint and disables lazy loading for you — use it on exactly one image per page, the LCP one.
Always Set Dimensions to Stop CLS
An image with no width/height reserves zero space until it loads, then shoves everything below it down when it arrives. That jump is Cumulative Layout Shift, and it's one of the easiest Core Web Vitals problems to fix. Give every image its intrinsic dimensions (or an aspect-ratio in CSS) so the browser reserves the box up front:
<img src="photo.jpg" alt="Description" width="800" height="600">
/* If the layout resizes the image, keep the ratio so no shift occurs */
img { height: auto; aspect-ratio: 4 / 3; }
You still set width/height even with responsive srcset — the browser uses them as an aspect ratio, not fixed pixels.
File Names and Compression
Descriptive, hyphenated filenames are a small but real signal for Google Image Search: red-trail-running-shoe.jpg beats IMG_4821.jpg. Use lowercase, hyphens between words (not underscores or spaces), and skip the keyword stuffing here too.
For compression, useful targets: JPEG/WebP quality around 75–85 is visually lossless for most photos, and a full-width content image should generally land under ~150–200 KB after conversion. Icons and simple graphics belong in SVG, which is tiny and scales infinitely.
Google Image SEO Basics
Google ranks images partly on the page around them. To help it:
- Put relevant text near the image — a caption or descriptive paragraph. Context beats alt text alone.
- Use
<figure>/<figcaption>for real captions; people read captions, and Google reads the association. - Add images to an image sitemap (or
image:entries in your existing sitemap) so Google discovers them:
<url>
<loc>https://example.com/shoes/trail</loc>
<image:image>
<image:loc>https://example.com/img/red-trail-running-shoe.jpg</image:loc>
</image:image>
</url>
You can generate the base file with the XML sitemap generator and add the image nodes.
Common Mistakes
- A giant, unsized hero. A 2 MB PNG with no dimensions tanks both LCP and CLS at once — the worst offender on most pages.
- Lazy-loading the LCP image. Slows the metric Google actually measures.
- Missing alt on meaningful images (an accessibility failure and a lost signal), or stuffed alt crammed with keywords.
- One huge source for all devices with no
srcset.
The analyzer at SEO Snapshot flags exactly these — missing alt text, missing width/height, non-WebP images, and images that should be lazy-loaded — so run your URL and fix what it lists. For the broader picture, pair it with the website speed optimization guide and the web accessibility and SEO checklist, since alt text sits in both worlds.
FAQ
Does alt text help rankings? Directly for Google Image Search, yes — it's a primary signal for what an image shows. For regular web rankings the effect is indirect: better accessibility and clearer context. Write it for users first and the SEO follows.
Should I convert every image to WebP? For photos and screenshots, yes — the 25–35% savings are free. Keep SVG for logos and icons. Serve WebP/AVIF with a JPEG/PNG fallback, or let Next.js, Cloudflare, or Vercel handle conversion at build or edge time.
Is lazy loading bad for SEO?
Only when you apply it to the LCP/hero image. Below the fold it's purely beneficial. Load the hero eagerly with fetchpriority="high", defer the rest.
What width and height should I set if the image is responsive?
Use the intrinsic dimensions of the source in src (or any representative size). The browser reads them as an aspect ratio to reserve space, not as a fixed render size, so srcset still swaps in the right file.