Image SEO is the set of optimizations that make the pictures on your pages understood correctly by search engines and load quickly. Every detail, from file name to alt text, from modern formats such as WebP and AVIF to lazy loading, affects traffic coming from Google Images and the overall speed of the page. In this guide we explain image SEO step by step, with examples for each action.
Why is image SEO important?
Images have two separate effects. The first is visibility: Google Images and image boxes in regular searches are a separate channel that can bring visitors; especially for topics such as products, recipes, venues and interior decoration, users look at the image first. The second is speed: images make up the largest share of total data size on most pages, and the largest element on a page is often an image. So a single unoptimized hero image can break the LCP value in Core Web Vitals and drag down the performance of the whole page.
A third effect is accessibility: the alt text describes the image to visitors using screen readers. Good alt text serves both the user and the search engine.
File name
Google also uses the file name to understand what the image is about. Names such as IMG_20260412_0043.jpg from a camera carry no information.
The rules are simple:
- Use short, meaningful words that describe the image:
grey-leather-sofa-three-seater.webp. - Separate words with hyphens (-); an underscore (_) may be read as joining the words together.
- Prefer lowercase and ASCII characters; avoid special characters and spaces.
- Do not stuff keywords:
sofa-sofa-cheap-sofa.webpdoes not help.
| Bad | Good |
|---|---|
IMG_0043.jpg | grey-leather-sofa.webp |
New Image (2).png | london-office-entrance.webp |
sofa_cheap_sofa_for_sale.jpg | corner-sofa-set.webp |
How to write alt text
The alt text (the alt attribute) describes the content of the image in words. It is shown in place of the image if it cannot load,
is read out by screen readers, and is used by Google to understand the context of the image.
- Describe the image as it is. "Barista making coffee at the kitchen counter" is good alt text; there is no need to start with words like "image" or "photo".
- Keep it short. Generally under 125 characters is enough.
- Include the keyword naturally. If the image really relates to the topic, the keyword appears on its own; lists forced in may be treated as spam.
- Leave alt empty for decorative images (
alt="") so screen readers do not read them unnecessarily. Do not remove the alt attribute entirely. - Transcribe text inside images. If an image contains a slogan or a price, write it in the alt text or the page text.
Example: On a product page, instead of alt="sofa sofa corner sofa set cheap",
write alt="Three-seater sofa in grey fabric with wooden legs". The second one helps the user
and also gives the search engine clearer information.
Besides the alt text, the text around the image, the heading and the image caption also help Google understand the context. Placing the image right next to the relevant paragraph is much better than putting it in an unrelated spot at the bottom of the page.
Format choice: JPEG, PNG, WebP, AVIF
| Format | Strength | When? |
|---|---|---|
| JPEG | Common, good compression for photos | Fallback for older systems |
| PNG | Lossless, transparency | Logos, screenshots, simple graphics |
| WebP | Noticeably smaller files than JPEG/PNG, transparency support | Safe default for most images |
| AVIF | Often smaller files than WebP | Photo-heavy pages; browser support is wide but add a fallback |
| SVG | Vector, scalable, very small | Logos, icons, simple drawings |
To offer several formats you can use the <picture> element: the browser picks the first format it supports,
and if it supports none, it falls back to the <img> tag inside. So a browser that supports AVIF gets AVIF,
and one that does not gets WebP or JPEG.
Size and compression
The most common mistake is showing a 4000-pixel-wide photo in a 400-pixel box. The browser still downloads the entire file. Apply these:
- Resize to the actual display size. For blog content, 800 to 1200 pixels wide is generally enough; for high-density screens, serve double-size versions separately with
srcset. - Compress. For photos, a quality setting of 75 to 85 often reduces file size considerably without a visible difference.
- Strip metadata. EXIF data (location, device) is unnecessary weight and a privacy risk.
- Set a target. As a general approach, try to keep content images under a few hundred KB; set a limit even for large hero images.
Always specify width and height values in the HTML. The browser knows how much space to reserve for the image before it loads,
so the content does not shift down while the page loads.
Responsive images: srcset and sizes
Sending the same image to a phone 360 pixels wide and to a 1920-pixel monitor is wasteful.
srcset defines several versions at different widths, and sizes tells the browser what part of the screen the image will cover;
the browser then chooses the most suitable file for itself. For example, producing three versions at 480, 800 and 1200 pixels wide is enough for most blog and product pages.
On mobile devices the data saving is significant, and this feeds directly into LCP time.
Where should the image go?
Google also takes the subject of an image from the text around it. So place the image next to the paragraph where its subject is discussed, and add a short caption summarizing it underneath. The heading of the section where the image sits strengthens what the image relates to. Rather than using copyrighted stock images directly, prefer original photos you have taken yourself where possible; an original image builds trust with users and sets you apart from the repetitive stock images everywhere.
Lazy loading and CLS
Lazy loading means images below the visible screen are not loaded until the user scrolls close to them. In modern browsers it is applied with a single attribute:
<img src="kanepe.webp" alt="Grey fabric three-seater sofa" width="800" height="600" loading="lazy">
- Do not apply lazy loading to the image above the fold. If the largest image on the page loads late, LCP gets worse. For this image you can use
fetchpriority="high". - Images in galleries, product lists and the lower sections of long articles are ideal for lazy loading.
- Always use it together with
width/height; otherwise the layout shifts as the image loads. - Use a real
<img src>so Google can find the image; images that exist only as a CSS background may not be indexed in image search.
For more on speed metrics, see our Core Web Vitals guide.
Image sitemap and structured data
Google finds most images during normal crawling. Even so, for galleries loaded with JavaScript or complex structures, adding images to your sitemap can help.
In a standard sitemap, the <image:image> and <image:loc> elements are used under each <url>:
- Add the image namespace to the top of the sitemap.
- For each page, list the addresses of the images that appear on that page.
- Submit the sitemap from Search Console and check for errors.
- Make sure your robots.txt does not block the images.
For content such as products, recipes or articles, adding the image address into the structured data (schema) makes it easier for Google to use the image in rich results. For how to use Search Console, see our getting started guide.
Common image mistakes
- Embedding text in the image: Writing important information (price, address, campaign) only inside the image means search engines and screen readers cannot see it.
- Copying the same alt text everywhere: Instead of writing the same alt text for all five images in a product gallery, describe each one separately (front, side, detail).
- Very large "hero" images: A full-screen slide image sometimes weighs several MB instead of hundreds of KB; reduce the size first, then review the design.
- Blocking images in robots.txt: A rule blocking the image folder means you will never appear in Google Images.
- Broken image links: Moved or deleted images return 404; repair them with regular crawls.
Checklist and measurement
- Is the file name meaningful, ASCII and separated by hyphens?
- Does the alt text describe the image briefly and naturally?
- Are images in WebP/AVIF or a suitable format?
- Is no file loaded that is larger than its display size?
- Do images below the first screen have
loading="lazy"? - Are
widthandheightdefined? - Are the image sitemap and robots.txt correct?
For measurement, PageSpeed Insights directly shows the "Serve images in next-gen formats" and "Properly size images" recommendations. In the Performance report in Search Console, you can select the search type "Image" to track impressions and clicks from image search separately. Image optimization also helps improve speed and reduce the bounce rate.
Conclusion
Image SEO is not a single move but a small habit repeated for every image: a meaningful file name, honest alt text, the right format and size, lazy loading below the fold and, if needed, an image sitemap. The biggest gains usually come from the largest images; start by finding the heaviest few images with PageSpeed Insights and work on those first. The result will be extra traffic from Google Images and a faster site. Rankings are still decided by Google's algorithms; your job is to keep your images understandable and lightweight.