How to Rank in Google Images: A Step by Step Image SEO Guide

Short answer
How do you rank in Google Images?
Ranking in Google Images means placing each image in an HTML img element with a src attribute, giving it a descriptive file name and alt text, putting it next to relevant text, submitting an image sitemap, keeping the file light, and adding structured data or license metadata where it fits.
In this guide, Talha Aslan and team walk through the gaps we see most often in the field. Our goal is not theory. Instead, we want to give you a checklist you can open and test on your own site today. That said, let us be honest from the start. No setting guarantees a position in Google Images. A correct setup only improves the odds that Google finds, understands, and picks your image.
This guide follows the official image SEO documentation on Google Search Central. For example, the supported formats, the role of alt text, and the image sitemap tags all come from that documentation. We use example.com as the only sample domain. Also, every case we describe is an example scenario, not a real client story.
How does Google Images find and understand an image?
Google first discovers an image while it crawls the page. The crawler reads the img element and its src attribute, and that includes an img inside a picture element. Then it looks at several signals to understand the topic: alt text, file name, nearby text, and the page title and description.
In other words, Google does not judge an image in isolation. The image belongs to a page, and the topic of that page shapes how Google reads it. So a dog photo on a page about dog food has much clearer context than the same photo in a random gallery.
Three blockers show up often at the discovery stage:
- The image loads as a CSS background, so there is no img element at all.
- JavaScript adds the image only after a user action, so the crawler never sees it.
- The robots.txt file blocks the image folder or the CDN host.
If any of these applies, every other optimization goes to waste. In addition, if the page itself is not in the index, the image has a much harder time showing up. Check your Search Console reports first, and fix page indexing before you polish image details.
Why don't CSS background images show up in Google Images?
Google's official documentation is clear here: it does not index CSS background images. For example, a product photo you assign to a div with background-image may look great on screen. However, for Google Images it simply does not exist.
This problem is common in ready-made themes and page builders. Designers like large background images for hero areas because it is easy to put text on top. As a result, the best visuals on the site never appear in search.
The fix is simple. Use a real img element for every image you want people to find. If the design needs text on top, you can position the img element to get the same look. On the other hand, you can keep CSS backgrounds for patterns, textures, and dividers. Those do not need to rank anyway.
In short, the rule is this: if an image tells something, use an img element; if it only decorates, use CSS. To see how each image loads, inspect it in your browser's developer tools. If you see background-image on a picture of a product, service, or project, add it to your fix list.
Which image formats does Google Images support?
According to the official documentation, Google can index these formats in the src attribute of an img element: BMP, GIF, JPEG, PNG, WebP, SVG, and AVIF. Also, the file extension should match the real file type. A PNG file with a jpg extension only creates confusion.
When you choose a format, you balance quality and size. The table below compares the options we meet most often in the field:
| Format | Strength | Watch out for | Typical use |
|---|---|---|---|
| JPEG | Opens everywhere, good for photos | No transparency, artifacts at high compression | Product and venue photos |
| PNG | Lossless, supports transparency | Large files for photos | Screenshots, diagrams |
| WebP | Often smaller files at similar quality | Older systems may need a fallback | General site images |
| AVIF | Strong compression | Encoding time and tool support vary | Large hero images |
| SVG | Sharp at any size, vector | Makes sense only for non-photo content | Logos, icons, drawings |
| GIF | Simple animation | File size grows fast | Short animated examples |
If you want to convert JPEG files quickly, try our JPG to WebP converter. Still, check the quality with your own eyes after conversion.
How should you name image files?
The file name is a small but real signal. Google's documentation recommends short, descriptive file names. For example, it prefers my-new-black-kitten.jpg over IMG00023.JPG. It also advises against generic names such as image1.jpg.
In practice, we apply these rules:
- Describe what the image shows in two to five words.
- Separate words with hyphens, not spaces or underscores.
- Keep special characters simple, or encode them consistently.
- Translate file names on multilingual sites.
- Do not paste the same keyword into every file; let each name describe its own image.
Example scenario: example.com is a furniture store that kept the camera names on every photo it uploaded. The difference between DSC_4412.jpg and oak-dining-table-six-seats.jpg is obvious. The second one tells both Google and anyone who downloads the image what they see.
On the other hand, renaming existing files in bulk needs care. If a file URL changes, the old URL breaks, and you also need to update page links and caches. Therefore, we suggest you start with new uploads and move important older images in a planned way.
Why is alt text the most important metadata for Google Images?
In Google's own words, alt text is the most important metadata you can provide for an image. Alt text describes the image to visitors who use screen readers. It also helps Google understand the topic of the image. So accessibility and image SEO meet at the same point.
Good alt text is descriptive and fits the context. The documentation example shows this well: something like "Dalmatian puppy playing fetch" instead of just "puppy". Bad alt text, by contrast, is keyword stuffing, for instance repeating the same product name ten times with commas.
When you write alt text, ask yourself one question. If the image failed to load, would this sentence tell the reader what they missed? If the answer is yes, you are on the right track. Also, leaving the alt attribute empty on purely decorative images lets screen readers skip them.
If you use inline SVG, the documentation suggests a different route: add a title element inside the SVG and connect it with aria-labelledby. We cover writing techniques in detail in our post on what alt text is and how to write it, so we will not repeat them here.
What role does surrounding text and page context play?
Google infers much of an image's meaning from the content around it. The official documentation recommends placing images near relevant text and on topically relevant pages. In addition, the page title and meta description are among the sources Google uses when it builds title links and snippets.
Example scenario: example.com runs a renovation company. If it puts a bathroom remodel photo on a mixed "Our Projects" gallery page, the context stays weak. However, if the same photo sits on the bathroom remodel service page, right next to the work steps, Google understands what it shows much more clearly.
To strengthen context, you can:
- Write a paragraph that describes the image right above or below it.
- Add a short caption line under the image when it helps.
- Keep the page title and subheadings in line with the image topic.
- Keep the same URL when you reuse an image on several pages.
The last point matters because the documentation notes that referencing the same image URL across pages helps Google cache it. Uploading the same photo under a new name on every page, on the other hand, only creates needless copies.
How do you set up responsive images with srcset and picture?
Responsive images mean serving files of different widths to different screens. For that, you use the srcset and sizes attributes on the img element. For example, you define 320, 480, and 800 pixel versions of the same photo, and the browser picks the best fit.
However, people often skip one rule: always include the src attribute as well. According to Google's documentation, some browsers and crawlers ignore srcset and the picture element. Consequently, without src, Google may not find the image in some cases.
You use the picture element to group sources by format or density. You place source elements inside it and end with a fallback img element. That way, a browser that supports AVIF or WebP takes the small file, while an older one falls back to JPEG.
A typical mistake we see in the field is a picture block with no fallback img. Another one is a lazy loading library that relies only on JavaScript. Such libraries keep the real URL in a data attribute, so src stays empty during crawling. That is why we prefer the browser's native loading attribute.
Do you need an image sitemap, and how do you build one?
An image sitemap lets you tell Google about images it might not find otherwise. It helps most with images that JavaScript loads. You can create a separate image sitemap or add image tags to your existing sitemap.
The basic structure from the official documentation looks like this:
- Image tags belong to their own namespace, which you declare in the urlset element.
- Each image sits inside an image:image tag.
- The image:loc tag holds the image URL and is the only required child tag.
- A single url entry can contain up to 1,000 image tags.
Older guides still mention image:caption, image:title, image:geo_location, and image:license. However, Google removed these tags from its documentation, so new sitemaps do not need them.
To build your sitemap, you can start with our XML sitemap generator. We explain the general logic in our guide on what an XML sitemap is and how to create one. If Search Console shows a fetch error after you submit it, our post on the sitemap couldn't fetch error will help.
What should you do if images live on a CDN or another domain?
Many sites serve images through a content delivery network (CDN) for speed. In that case, the image URL differs from your main domain, for example cdn.example.com instead of example.com, or a completely different domain. Google does not treat this as a problem.
According to the official documentation, you can list image URLs on other domains in your image sitemap. However, you need to verify those domains in Search Console. That way, you also see crawl errors on the CDN side.
Also, check the robots.txt file on the CDN domain itself. Some setups serve a file that blocks all crawling by default. So even if the robots.txt on your main site looks clean, your images may still sit behind a closed door.
Example scenario: example.com moves to a new CDN and every image URL changes overnight. Google remembers the old URLs for a while, and it has to discover the new ones from scratch. Therefore, during big migrations you update the image sitemap, resubmit it, and redirect old URLs where possible.
How does structured data affect Google Images results?
Structured data describes page content to Google in a machine-readable way. According to Google's image documentation, if you add structured data, Google Images can display your image with a badge and as a rich result. For example, product, recipe, or video markup provides this kind of context.
For the badge to work, you include the image property in your markup. You also follow Google's general structured data guidelines. In other words, the information you mark up has to match what users see on the page.
In practice, we follow this order:
- We pick the schema type that fits the page, such as Product for a product page or Recipe for a recipe page.
- We add the URL of the real, high resolution image on the page to the image property.
- Next, the page goes through the Rich Results Test.
- We watch the warnings in Search Console reports.
If you do not want to write the code by hand, use our schema generator. Our guide on what schema markup is covers the general logic in detail.
What is image license metadata and the Licensable badge?
If you produce your own photos, license metadata is a real opportunity. According to Google's documentation, pages that add image metadata can become eligible for a badge in Google Images that links to license details. The badge tells users how they can use the image.
There are two routes. The first is structured data. Here contentUrl is required, and you add at least one of creator, creditText, copyrightNotice, or license. Badge eligibility needs license. The acquireLicensePage property points to a page that explains how to get a license, and it is recommended.
The second route is IPTC photo metadata. You embed the details in the file itself, so you only do it once per image. The badge needs the Web Statement of Rights field. If the two methods conflict, Google uses the structured data.
Note that Google does not guarantee that this metadata will appear in results. We explain how to fill IPTC fields in our post on IPTC image metadata for Google Images. In short, for a business that shoots original photos, this step adds value for both brand and copyright.
How do you tell Google which image you prefer for a page?
Sometimes Google picks the wrong image for your page, for example the logo or an unrelated banner. Google's documentation lists three ways to signal your preferred image: the schema.org primaryImageOfPage property, an image property attached through mainEntityOfPage, or the og:image meta tag.
However, these are hints, not commands. Google also looks at the image itself. So the image you choose should meet these points:
- It relates directly to the page topic.
- It has high resolution.
- Its aspect ratio avoids extremes, such as very wide or very narrow.
- It is not a generic logo or an image full of text.
Example scenario: example.com always uses its site logo as og:image on blog posts. As a result, the chance that a post-specific image appears in social shares or search results drops. Giving each post its own cover image largely solves this. If you already see a wrong image in results, our post on a wrong image thumbnail in Google search results walks you through the diagnosis.
Do image size and speed affect visibility in Google Images?
Google's documentation recommends high quality, sharp images that you also optimize. That is because images are often the largest part of page size. For measuring speed, it points to PageSpeed Insights.
So you strike a balance here. A heavily compressed, blurry photo convinces neither users nor Google. On the other hand, a raw camera file of several megabytes slows your page and hurts Core Web Vitals, especially LCP.
Our practical approach is simple. First, resize the image to the largest width it will display at. Next, convert it to a modern format. Finally, check the quality by eye. Also, do not lazy load the main image at the top of the page, because a late hero image leads straight to an LCP problem.
Speed is a separate topic, so we keep it short here. You will find file reduction and format choice in our guide on how to optimize images for speed and SEO, and measurement in our post on Core Web Vitals.
What should e-commerce product galleries do for Google Images?
E-commerce sites have the most to gain in Google Images, because shoppers often search for a product visually first. However, product galleries are usually the weakest area. Sliders, zoom windows, and photos that change with color selection mostly run on JavaScript.
That is why we check three things on a product page:
- Does the main product photo sit in the HTML as an img element when the page first loads?
- Do the URLs of the other gallery photos appear in the page source or in the image sitemap?
- Does every color and variant photo have its own alt text?
Example scenario: example.com is a shoe store, and each model has photos in five colors. If only the selected color sits on the page and the others load on click, Google will most likely see only the first one. Therefore, adding all variant images to the sitemap and listing several URLs in the image property of the product markup makes sense. Moreover, it gives the other colors a chance in shopping focused image searches.
How do you track Google Images traffic in Search Console?
Moving forward without measurement is guesswork. In the Performance report in Search Console, switch the search type to Image. Then you see impressions and clicks that come from Google Images separately. Menu labels can change over time, so look for the related filter in the panel.
In this report, you look for answers to these questions:
- Which pages get impressions in image search?
- Which queries find you in image results?
- How do impressions trend on the pages you changed?
Example scenario: example.com switched CSS backgrounds to img elements on 20 product pages and rewrote the alt text. In that case, you compare the periods before and after the change and filter for those pages only. Still, Google's recrawl timing varies. It is healthier to read the result over weeks, not days.
Search Console data also helps you decide where to start next time. For instance, pages that already get image impressions but few clicks may need better images or clearer context.
A step by step checklist for Google Images
This section turns the whole guide into a practical order. When our team audits images on a new site, we roughly follow this sequence:
- Confirm that important images load with an img element and a src attribute.
- List meaningful images that still sit in CSS backgrounds, then convert them.
- Check that robots.txt does not block the image folder or the CDN.
- Make file names descriptive, starting with new uploads.
- Write alt text that fits the context for every meaningful image.
- Move images next to relevant text and enrich gallery pages.
- If you use srcset, make sure the src fallback stays in place.
- Create an image sitemap and submit it in Search Console.
- Add structured data with the image property on suitable pages.
- Consider license metadata for original photos.
- Signal your preferred image with og:image.
- Reduce file sizes and prioritize the LCP image.
- Filter the Performance report for image search and track the results.
You do not have to finish this list in one go. Starting with the pages that bring the most traffic or sales lets you see the payoff sooner.
Common Google Images mistakes
Seeing the mistakes we meet again and again in one place makes it easier to scan your own site. Sites on ready-made themes in particular often have several of these at once.
- Using the same alt text on every image, for example the brand name on every product.
- Stuffing alt text with comma separated keywords.
- Using an unedited stock photo that hundreds of other sites also use.
- Loading product images only inside a JavaScript slider.
- Uploading files with the wrong extension, such as a WebP file named jpg.
- Regenerating image URLs with every design change.
A short note on stock photos as well. Google sees many copies of the same image, so standing out with a picture that thousands of sites share is hard. Consequently, shooting your own product, team, and venue photos is the most sustainable advantage in image search.
If you use AI generated images, also pay attention to commercial use and labeling. We cover that in our post on C2PA content credentials.
What if you don't want your images in Google Images?
Not every business wants its images in search. For example, you may have quote images meant only for clients, or photos you sell under license. Google's documentation describes two routes for this case.
The first is to block inline linking. Your server checks the HTTP referrer. If the request comes from a Google domain, it responds with a 200 or a 204 with no content. Google still crawls the page and may show a thumbnail it generated at crawl time, but it does not show the full size image. According to the documentation, Google does not consider this cloaking.
The second is to remove the image from results entirely. For that, you follow Google's image removal guide. However, be sure before you change these technical settings, because a wrong setup can also block images you want to show.
In short, staying invisible is a choice too, and you manage it on purpose. Listing in advance which images stay open and which stay closed prevents confusion later.
When should you get professional help with image SEO?
On a site with a few pages, you can apply the checklist above yourself. However, on an e-commerce site with hundreds of products, a site that moves to a new CDN, or a site with theme level issues, the work turns technical fast. At that point, you need template changes, sitemap automation, and a measurement setup.
Talha Aslan and team treat the image audit as part of technical SEO work. First, we find which images Google cannot crawl. Then we prioritize fixes on the template and content side. After that, we track the effect with Search Console data. If you want us to fix and monitor the image issues on your site, you can request a quote on our SEO consulting page.
That said, let us repeat one warning: no agency can guarantee a specific position in Google Images. What we can offer is a measurable, sustainable setup that follows Google's official recommendations. If you want to plan image search as part of your wider SEO strategy, review the scope of our SEO consulting service and send us your needs.
For more technical detail, see Google's official documentation on image SEO best practices, image sitemaps, and image license metadata.
Core guide: What Is Digital Marketing? Its types, examples and how it is done, on one page with an interactive film that travels through the brain.



