How to Do Image SEO

Google does not index images set as CSS backgrounds. Its image SEO documentation says so in one line, and the rule applies before any question of alt text: a hero photo, a product shot or a chart loaded through background-image is invisible to Google Images, however well it is named and described. Image SEO has two jobs. The first is getting images found and understood, so they can appear in Google Images and in the image slots of regular results. The second is keeping them from making pages slow. Both start with how the image is put on the page.

Make the image findable

Google finds images in the src attribute of an <img> element, including an <img> inside a <picture> element. The documentation’s own contrast is an <img> tag, which works, against a <div> with a background image, which Google does not index. Anything that matters for search belongs in an <img> element.

Four more rules from the same documentation decide whether Google can fetch and process what it finds:

Keep a src fallback. When you use srcset or <picture> for responsive images, Google recommends always specifying a fallback URL in src, because some browsers and crawlers don’t understand those attributes.
Use a supported format. Google Search supports BMP, GIF, JPEG, PNG, WebP, SVG and AVIF, and suggests the filename extension match the file type.
Use one URL per image. When the same image appears on several pages, reference it with the same URL everywhere, so Google can cache and reuse it without requesting it again.
Lazy-load without interaction. Google’s lazy-loading guidance asks that content load whenever it is visible in the viewport, using the browser’s built-in lazy loading, IntersectionObserver or a library that does the same, because Google Search does not interact with your page. An image that loads only after a scroll event or a click may never be seen.

For images Google might not otherwise find, such as those your site loads with JavaScript, an image sitemap lists them for each page:

Each page entry can hold up to 1,000 <image:image> tags.
Image URLs can sit on another domain, such as a CDN, as long as both domains are verified in Search Console.
Google has removed the <image:caption>, <image:title>, <image:license> and <image:geo_location> tags from its documentation. A plugin that still writes them is following an older version of the format.

Give Google the context to understand it

The page around an image can have a large say in how and where the image appears. Google’s documentation says the content and metadata of the page where an image is embedded “can have a great influence on how and where the image may appear” in search results. It also says Google extracts the subject of an image from the page, including captions and image titles, and asks that images sit near relevant text on pages relevant to the image’s subject.

Page context is one reason the same photo can rank in Google Images on one site and not on another: one page discusses what the photo shows, and the other is a grid of thumbnails with no text. The image did not change; the evidence around it did. For an image that matters, the first place to look is the page: a heading that names the subject, a caption beside the image and body text that discusses it. Editing the image file comes after.

Alt text. Google calls alt text “the most important attribute” for giving an image more metadata. It uses alt text along with computer vision algorithms and the contents of the page to understand the subject of an image. Two consequences follow:

Because the picture itself is analyzed, alt text that describes something else contradicts what Google finds in the image.
The documentation warns that filling alt attributes with keywords is a negative user experience and may cause a site to be seen as spam.

Write alt text that says what the image shows, in the context of the page. Google’s own example moves from missing alt text, through “puppy”, to “Dalmatian puppy playing fetch”. Google gives no word count; the image decides the length.

Two details are easy to miss:

Linked images. When an image is a link, its alt text works as the anchor text.
Decorative images. Dividers, background flourishes and icons that repeat adjacent text get a null alt attribute (alt=""). The W3C’s guidance on decorative images explains why leaving the attribute out entirely is not the same thing: without it, some screen readers announce the image’s filename instead.

For inline SVG, Google points to the <title> element as the equivalent of alt text.

Filenames. The documentation says a filename gives Google “very light clues” about an image’s subject. Its example prefers a short, descriptive name such as my-new-black-kitten.jpg to IMG00023.JPG. Use names like that, and translate them along with the page when you localize. Fix naming at upload. Renaming files already in use changes their URLs, and any link or embed pointing at the old URL breaks unless you redirect it. For a library of thousands of images, the documentation suggests automating the naming.

Choose which image represents the page

Google picks the image shown next to a result, or in Discover, automatically, from several sources. You can state a preference with:

the schema.org primaryImageOfPage property;
an image attached to the page’s main entity;
an og:image meta tag.

Google’s advice for that image:

Pick one that is relevant and representative of the page.
Avoid a generic image such as the site logo, or an image with text in it.
Avoid extreme aspect ratios.
Use a high resolution where possible.

Structured data can also earn an image a badge in Google Images. For each structured data type that supports this, the documentation says the image attribute is required to be eligible for the badge and the rich result.

Keep images from slowing the page

Google’s documentation says images are often the largest contributor to overall page size. That makes them an early check when a page is slow. Core Web Vitals set the targets, measured at the 75th percentile of page loads, segmented across mobile and desktop:

Metric	Good
Largest Contentful Paint (LCP)	2.5 seconds or less
Interaction to Next Paint (INP)	200 milliseconds or less
Cumulative Layout Shift (CLS)	0.1 or less

Images touch LCP and CLS directly.

Compress to display size. The objection “we paid for professional photography” has the problem backward. A multi-megabyte original shown in a column 800 pixels wide looks no better than a properly compressed file sized for that column and the screen’s pixel density. It only takes longer to arrive. WebP and AVIF, both on Google’s supported list, can carry the same visual quality in a smaller file than JPEG. Test the saving on your own images. Serve them through <picture> with a JPEG or PNG fallback in the <img> element. Keep PNG for images that need transparency, and SVG for logos, icons and line art.

Serve the right size. srcset with a sizes attribute lets the browser choose a smaller file for a smaller screen. An image CDN can create those sizes and formats from one upload. Keep the src fallback in place either way.

Reserve the space. Set width and height attributes, or a CSS aspect-ratio, on every image. The web.dev guide to optimizing CLS lists images without width and height among the causes of layout shift it helps diagnose.

Don’t lazy-load what is on screen. Google’s lazy-loading guidance says not to add lazy loading to content likely to be immediately visible when the page opens, because it makes that content take longer to show up. When the main image at the top of a page is the LCP element, lazy-loading it delays the metric you are trying to improve.

Original images and stock photos

Google’s image documentation says nothing against stock photography. It does say high-quality, sharp images appeal to users more than blurry ones, in results and in thumbnails. The case for original images rests on something simpler. A stock photo licensed to other sites gives your page nothing another page lacks. A photo of your own product, a screenshot of your own interface or a chart of your own data exists only on your page, and the text around it can describe it with details no other page has.

Publish the images you want found on an indexable page you control. An image that exists only inside a social network or a closed platform has no page on your site for Google to associate it with.

Controls: inline linking and SafeSearch

Two controls affect how your images appear, and whether they appear.

Inline linking. You can keep the full-size image off the Google Images results page. Check the HTTP referrer when the image is requested; for requests from a Google domain, respond with a 200 status code, or a 204 status code and no content. Google still crawls the page and shows a thumbnail it generated at crawl time. The documentation says this isn’t considered image cloaking and won’t result in manual actions.
SafeSearch. If a site carries explicit material, label it so Google can apply SafeSearch filters where appropriate.

An audit order for existing images

For a site with thousands of images, work from value, not from the library:

List the pages whose images you want found in Google Images: product photos, original charts, how-to steps.
For each, confirm the image is an <img> element, not a CSS background, with a src Google can fetch.
Confirm it sits on a page with a relevant heading, a caption and text that discusses it.
Read the alt text against the picture: does it say what the image shows?
Check file weight against display size, confirm width and height are set, and make sure the image at the top of the page is not lazy-loaded.
For images loaded by JavaScript or served from a CDN, confirm they are listed in an image sitemap.

Frequently asked questions

Does Google index background images set in CSS?

No. Google’s image documentation says Google doesn’t index CSS images. An image you want in Google Images needs to be in an <img> element’s src attribute.

How long should alt text be?

Long enough to describe the image in the context of the page. Google gives no word count. Its guidance is to write useful, information-rich alt text and avoid filling it with keywords.

Should I rename my existing image files?

Only with care. Google describes filenames as “very light clues”, and renaming changes image URLs, so links and embeds pointing at the old ones need redirects. Get new uploads right, and rename old files only where the gain justifies that work.

Which image format should I use?

Any format on Google’s supported list works for search: BMP, GIF, JPEG, PNG, WebP, SVG and AVIF. For page speed, serve WebP or AVIF through <picture> with a JPEG or PNG fallback in the <img> element. Use PNG where you need transparency, and SVG for logos, icons and line art.