What image SEO is and why it matters
Image SEO is the practice of making the images on your pages both discoverable by search engines and fast to load for users. Good image SEO covers six concrete things: a descriptive file name, useful alt text, an efficient format like WebP or AVIF, compression, responsive sizing with lazy loading, and an image sitemap for the images worth surfacing in search.
Image SEO matters for three reasons that compound. First, discovery: Google Images, AI Overviews, and answer engines pull and cite visuals, and the only way they understand an image is through its file name, alt text, surrounding text, and structured data. Second, speed: images are usually the heaviest thing on a page, so they dominate your Core Web Vitals — the Largest Contentful Paint element is an image more often than not. Third, accessibility: alt text read aloud by a screen reader is the same alt text a crawler reads, so doing it right serves humans and machines at once.
The mistake most sites make is treating images as decoration you drop in and forget. A 4 MB hero photo named IMG_8842.jpg with no alt attribute is invisible to search and actively slow for users. Fixing that is cheap, repeatable, and one of the highest-leverage parts of on-page SEO.
File names and alt text: making images findable
File names and alt text are the two pieces of text that tell a search engine what an image actually depicts, and both should be written before the image ever ships. A crawler cannot see pixels; it reads the words attached to the image, and these two attributes carry the most weight.
Descriptive file names matter because the URL of the image is itself a ranking signal. Rename DSC_0421.png to something a human would search for, using hyphens between words, all lowercase, no spaces:
text
# Bad
/uploads/IMG_8842.jpg
# Good
/uploads/blue-suede-running-shoes-side.jpgAlt text is the alt attribute on the <img> tag. It describes the image for screen-reader users and for crawlers, and it is the single most important image-SEO field. Write it as a short, literal description of what is in the image, including a relevant keyword only when it fits naturally:
html
<img src="/uploads/blue-suede-running-shoes-side.jpg"
alt="Blue suede running shoes shown from the side"
width="800" height="600">A few rules keep alt text effective:
- Describe, don't stuff. "Blue suede running shoes shown from the side" beats "running shoes shoes buy running shoes cheap."
- Skip "image of" / "photo of." Screen readers already announce that it is an image.
- Leave decorative images empty. Use alt="" (not a missing attribute) for purely decorative graphics so assistive tech skips them.
- Keep it under ~125 characters. Most screen readers cut off around there.
Alt text is the rare SEO field where the accessibility-correct answer and the SEO-correct answer are identical. Write for the screen-reader user and you have already written for the crawler.
Format and compression: making images fast
Choosing the right format and compressing aggressively is what turns images from a Core Web Vitals liability into a non-issue. In 2026 the default should be WebP for broad compatibility and AVIF where you can serve it, because both deliver dramatically smaller files than JPEG or PNG at the same visual quality. The table below compares the formats you will actually choose between.
| Format | Best for | Relative size | Transparency | Browser support |
|---|---|---|---|---|
| AVIF | Photos and hero images | Smallest | Yes | Modern browsers |
| WebP | Default for most images | Very small | Yes | Universal (2026) |
| JPEG | Fallback for photos | Large | No | Universal |
| PNG | Fallback for graphics/transparency | Largest | Yes | Universal |
| SVG | Logos, icons, line art | Tiny (vector) | Yes | Universal |
The workflow is straightforward. Export or convert your source image to WebP or AVIF, compress it to the smallest size that still looks right, and only fall back to JPEG/PNG for browsers that need it via the <picture> element:
html
<picture>
<source srcset="/img/hero.avif" type="image/avif">
<source srcset="/img/hero.webp" type="image/webp">
<img src="/img/hero.jpg" alt="..." width="1200" height="675">
</picture>Two non-negotiables for speed and stability:
- Always set `width` and `height` (or a CSS aspect-ratio). Without them the browser cannot reserve space, the page reflows as images load, and your Cumulative Layout Shift score suffers.
- Compress every image. Tools like Squoosh, ImageOptim, or a build-step like sharp routinely cut file size 50–80% with no visible quality loss. A 4 MB hero becoming 250 KB is the difference between a slow LCP and a fast one.
If you are unsure which image is dragging a page down, [run a free SEO + GEO audit](/) — it flags oversized images, missing dimensions, and the LCP element on any URL so you know exactly what to fix.
Lazy loading and responsive images
Lazy loading and responsive sizing make sure each visitor downloads only the images they need, at the size their screen needs — the two biggest wins for image performance after compression. Both are native HTML features now, so neither requires a JavaScript library.
Lazy loading defers off-screen images until the user scrolls near them. Add loading="lazy" to images below the fold so the browser skips them on initial load. The one exception is your LCP image — the hero or first visible image — which should load eagerly so it paints as fast as possible:
html
<!-- Above the fold: load immediately -->
<img src="/img/hero.webp" alt="..." width="1200" height="675"
fetchpriority="high">
<!-- Below the fold: defer -->
<img src="/img/chart.webp" alt="..." width="800" height="600"
loading="lazy">Responsive images serve a small file to phones and a large file to desktops using srcset and sizes, so a mobile user never downloads a 1600px-wide image to fill a 360px screen:
html
<img src="/img/photo-800.webp"
srcset="/img/photo-400.webp 400w,
/img/photo-800.webp 800w,
/img/photo-1600.webp 1600w"
sizes="(max-width: 600px) 400px, 800px"
alt="..." width="800" height="600" loading="lazy">Most modern frameworks and CMS platforms generate srcset, width/height, and lazy loading automatically — Next.js <Image>, WordPress core, and Astro all do it out of the box. If you are hand-writing <img> tags, the snippets above are the full pattern. Done well, these two techniques are why a mobile visitor can load an image-heavy page in a second instead of ten.
Image sitemaps and structured data
Image sitemaps and structured data are how you tell search engines which images on your site are worth indexing and surfacing, beyond what they discover by crawling your pages. Both are optional, but they meaningfully help discovery for sites where images are the product — recipes, products, portfolios, travel.
An image sitemap lists the important images on each page so Google can find images loaded via JavaScript, served from a CDN, or otherwise hard to crawl. You can add image entries to your existing XML sitemap with the image namespace:
xml
<url>
<loc>https://example.com/shoes</loc>
<image:image>
<image:loc>https://cdn.example.com/blue-suede-shoes.webp</image:loc>
</image:image>
</url>If you have not built one yet, start with the basics in how to create an XML sitemap, then add the image entries for galleries and product shots.
Structured data wins you the rich, visual treatment in search and AI answers. Adding an image field to your Product, Recipe, Article, or ImageObject schema makes your image eligible for image badges, recipe carousels, and product result thumbnails. The flow below shows the full image-SEO checklist from naming a file to listing it in a sitemap — run through it for every image that matters.
- Name the file descriptivelyUse lowercase, hyphenated, human-readable file names like blue-suede-running-shoes.webp instead of IMG_8842.jpg.
- Write literal alt textDescribe what the image shows in under ~125 characters; use alt="" for purely decorative images.
- Convert to WebP or AVIFExport to a modern format and compress to the smallest size that still looks right.
- Set width, height, and srcsetDeclare dimensions to prevent layout shift and add responsive sizes so each device gets the right file.
- Lazy-load below the foldAdd loading="lazy" to off-screen images and load the LCP image eagerly with fetchpriority="high".
- Sitemap and mark upList key images in an image sitemap and add the image field to your schema for rich results.
Pull it together and image SEO stops being a chore: name the file, write the alt text, ship WebP/AVIF, set dimensions, lazy-load and size responsively, then sitemap and mark up the images you want found. Run an audit on your heaviest page first — the biggest, slowest image is almost always where the easiest win lives.