Image SEO
Image SEO is the practice of optimizing the images on a web page so search engines can understand them and surface them in results such as Google Images. Through alt text, file names, compression, responsive images, structured data, and image sitemaps, it improves both image search visibility and page load speed.
- Image SEO optimizes alt text, file names, compression, responsiveness, and structured data so search engines can understand images and surface them in image search.
- Google does not index CSS background images, so indexable images must use an img tag with a src and a descriptive alt attribute.
- Alt text and file names should be short and descriptive, but stuffing them with keywords can be treated as spam.
- Images usually account for the largest share of a page's weight, so compression and modern formats like WebP and AVIF are directly tied to load speed and SEO.
- srcset responsive images, lazy loading, image sitemaps, and structured data improve discoverability and rich result eligibility.
Overview
Image SEO is the practice of optimizing the images embedded in a web page so search engines can interpret them accurately and surface them in results like Google Images. Because search engines cannot look at a photo the way a person does, they rely on signals such as alt text, file names, surrounding copy, and structured data to figure out what an image is about. The goal of image SEO is therefore twofold: provide those signals clearly, and keep the image files themselves lightweight so they do not drag down page load speed.
According to Google Search Central documentation, Google supports BMP, GIF, JPEG, PNG, WebP, SVG, and AVIF formats, and it does not index CSS background images. In other words, any image you want to appear in search must be placed with an HTML img element. Image SEO matters because it contributes not only to search visibility but also to accessibility for screen reader users and to performance metrics such as Core Web Vitals.
Key Optimization Areas
| Area | How to optimize | Benefit |
|---|---|---|
| Alt text | Describe the image specifically and concisely; avoid keyword stuffing | Image search visibility, better accessibility |
| File name | Use a descriptive name instead of a generic IMG00023.jpg | Provides a weak topical cue |
| File format | JPEG/WebP/AVIF for photos, PNG/SVG for logos and icons, GIF for animation | Optimizes size relative to quality |
| Compression & resizing | Resize to the displayed dimensions, then compress | Improves page load speed |
| Responsive images | Serve per-device sizes with srcset or the picture element | Cuts unnecessary bandwidth |
| Lazy loading | Load below-the-fold images only when needed | Faster initial rendering |
| Image sitemap | List image URLs with the image:loc element | Better discovery and indexing |
| Structured data | Mark up product, recipe, or video schema | Rich results such as image search badges |
Code Examples
Here is the most basic example of a descriptive alt attribute paired with a caption. Google extracts information from both the alt text and the caption, so it helps to use both.
<figure>
<img src="/images/dalmatian-puppy-playing-fetch.webp"
alt="A Dalmatian puppy playing fetch">
<figcaption>A Dalmatian puppy fetching a ball in the yard</figcaption>
</figure>The following is responsive srcset markup that serves differently sized images depending on device resolution. It prevents the browser from downloading needlessly large files, reducing bandwidth and load time.
<img src="/images/cheesecake-720.jpg"
srcset="/images/cheesecake-480.jpg 480w,
/images/cheesecake-720.jpg 720w,
/images/cheesecake-1080.jpg 1080w"
sizes="(max-width: 600px) 480px, 720px"
alt="A slice of chocolate cheesecake"
loading="lazy">To serve several formats at once so the browser prefers the most modern one it supports (AVIF, WebP), use the picture element.
<picture>
<source srcset="/images/photo.avif" type="image/avif">
<source srcset="/images/photo.webp" type="image/webp">
<img src="/images/photo.jpg" alt="A beach at sunset">
</picture>Evidence
Google Search Central's image SEO documentation states that file names and alt text should be descriptive yet concise, and that cramming keywords into the alt attribute, keyword stuffing, can be treated as spam. It also recommends using the img element because Google does not index CSS images, and notes that you can designate a representative image for results with schema.org's primaryImageOfPage property or with og:image.
Ahrefs' image SEO guide explains that because images often make up the largest portion of a page's weight, compression has a direct impact on load speed. In real testing, ImageOptim reduced a JPEG file by 69% and a PNG file by 40%, and one SVG file shrank from 8.54kb to 3.56kb after minification and gzip compression. The Ahrefs blog cites resizing in-body images to a maximum width of 720px to avoid loading oversized files. It also recommends filling in alt text using the format "This is a(n) [type] of ___," which yields a concise, accurate description.
Implementation Checklist
- Write specific, concise alt text for every meaningful image. Give decorative images an empty alt attribute (alt="").
- Name files descriptively, such as dalmatian-puppy-playing-fetch.jpg instead of IMG00023.jpg.
- Choose the format that fits the use case: WebP/AVIF for photos, SVG/PNG for logos and icons.
- Resize images to their actual display dimensions, then compress them to reduce file size.
- Serve responsive, per-device images with srcset or the picture element.
- Apply lazy loading with loading="lazy" to below-the-fold images.
- Place images near the relevant body copy and provide captions.
- Add structured data to applicable content such as products, recipes, and videos to target rich results.
- Submit an image sitemap to improve discovery and indexing by search engines.
- Use HTML img elements rather than CSS background images for anything you want indexed.