Image SEO: Alt Text, File Names and Formats That Help Search

Images carry a lot of meaning on a page: product photos, diagrams, charts, team pictures. Search engines cannot see a picture the way a person does. They rely on the page around it and on a few pieces of text you provide. Good image SEO means supplying that text honestly, using the right HTML so crawlers can find the image at all, and not making the page heavy.

This guide is for site owners, content editors and developers. You will learn how to write alt text that is useful to people using screen readers and to search engines, how to name files, which HTML patterns Google can and cannot index, which formats it supports, and how to audit a site for the common gaps. It does not promise image traffic. Good markup lets Google understand an image. It does not decide whether the image is shown.

Before you begin

You need access to your CMS or templates, a list of the pages with the most important images (products, articles, the home page), and a way to inspect HTML in your browser. Make a copy of your image folder or confirm your backups before renaming files, because renaming changes the image URL. If an image URL changes, old links and cached copies break unless you redirect them. For existing images with good history, prefer improving alt text and surrounding text over renaming files.

Time needed: about an hour to audit a small site, longer for a big media library. Start with the 20 images that matter most.

How Google finds and understands images

Google's image documentation makes several points that shape everything below:

Google finds images in the src attribute of <img> elements, including inside <picture>. It does not index CSS images, so a background-image is not a substitute for an <img> when the image matters for search.
Google says alt text is the most important image metadata, and that images should be placed near relevant text.
Descriptive file names help, such as my-new-black-kitten.jpg, compared with image1.jpg.
Google supports BMP, GIF, JPEG, PNG, WebP, SVG and AVIF.
An image sitemap can help Google find images it might not otherwise discover.

None of this ensures an image will be indexed or ranked. It removes obstacles.

Step-by-step instructions

Step 1: Use real `<img>` elements for meaningful images

Why: if the image is only a CSS background, Google does not index it. Search your templates for background-image used on content images such as product photos or article illustrations. Decorative backgrounds can stay in CSS.

<!-- Indexable -->
<img src="/images/dalmatian-puppy-fetch.jpg" alt="Dalmatian puppy playing fetch" width="1200" height="800">

<!-- Not indexed by Google as an image -->
<div style="background-image:url(/images/dalmatian-puppy-fetch.jpg)"></div>

For responsive images, keep a fallback src. Google recommends always giving a fallback URL in src because some browsers and crawlers do not understand srcset or <picture>.

How to confirm: in the rendered HTML, each important image appears as <img src="..."> with a working URL. The related performance topic is in Use WebP and AVIF Images to Improve Website Speed.

Step 2: Write alt text that describes the image in context

Why: alt text serves two groups. People using screen readers hear it in place of the image. Search engines use it to understand the subject. Google gives a clear progression: a missing alt is bad, a keyword-stuffed alt is bad, alt="puppy" is better, and alt="Dalmatian puppy playing fetch" is best.

Write one short phrase that says what the image shows and, where it matters, why it is on the page. Do not start with "image of" or "picture of", since assistive technology already announces an image. Do not paste keyword lists.

The W3C alt decision tree is a useful way to decide:

Informative image: a brief description that carries the same meaning the image adds.
Decorative image: use an empty alt="" so assistive technology skips it. This applies to purely decorative images, or images whose content is already in nearby text.
Functional image (in a link or button): describe the destination or action, not the picture. If an image is used as a link, Google says its alt text acts as the anchor text.
Image of text: include the text in the alt unless the same text appears as real text next to it.
Complex image (a chart): give a short alt and put the full data or explanation in the page text.

<a href="/pricing"><img src="/images/arrow-right.svg" alt="See pricing"></a>
<img src="/images/divider.svg" alt="">

How to confirm: every <img> has an alt attribute. Meaningful images have a specific description; decorative ones have alt="".

Step 3: Name files with short, descriptive words

Why: Google says short, descriptive file names, such as my-new-black-kitten.jpg, help, and generic ones like image1.jpg do not. Use lowercase words separated by hyphens, which also matches Google's general URL advice to prefer hyphens over underscores. Translate file names for localized sites, and follow URL encoding rules for non-Latin characters. Match the extension to the real file type.

Rename only when it is cheap and safe, for example new uploads or a site rebuild. For old images, add a redirect from the old URL, or leave the name and improve alt text instead. See SEO-Friendly URLs: Readable, Stable Web Addresses for why stable URLs matter.

How to confirm: new images follow a naming pattern, and no image on an important page is called IMG_0042.jpg or untitled.png.

Step 4: Place the image near relevant text, with a caption when it helps

Why: Google says to place images near relevant text on relevant pages, and it also uses captions and image titles. An image of a product should sit by the product description, not alone in a footer. A diagram should sit by the paragraph that explains it.

How to confirm: for each key image, the paragraph or heading nearest to it matches its subject.

Step 5: Choose supported formats and sensible sizes

Why: images are often the largest part of a page. Google says to apply current image optimization and responsive techniques and to test speed with PageSpeed Insights. Use a supported format. WebP and AVIF offer smaller files than older formats in many cases, but compare results for your own images instead of assuming. Serve different widths with srcset and sizes.

<img src="/images/trail-800.jpg"
     srcset="/images/trail-480.jpg 480w, /images/trail-800.jpg 800w, /images/trail-1600.jpg 1600w"
     sizes="(max-width: 600px) 100vw, 800px"
     alt="Forest path at sunrise" width="800" height="533">

Set width and height so the browser can reserve space, which helps avoid layout shift. Details are in Reduce Cumulative Layout Shift (CLS) Step by Step and Responsive Images with srcset and sizes.

How to confirm: the image format is on Google's supported list, and the file is not much larger than the largest size it is shown at.

Step 6: Keep image URLs stable and crawlable

Why: Google says reusing the same URL for an image across pages lets it cache the image rather than request it repeatedly. Also make sure the image files are not blocked. If your robots.txt disallows the folder holding your images, Google cannot fetch them. Check Robots.txt Blocking Google or Bing? Diagnose It Step by Step if you are unsure.

If your images are on a CDN or another domain, Google says an image sitemap can list images hosted on other domains.

How to confirm: opening an image URL in a private window returns the image with a 200 status, and the path is not disallowed.

Step 7: Consider an image sitemap or preferred image

Why: an image sitemap helps discovery for images that are hard to find, such as those loaded by script. For the image you want associated with a page, Google says you can specify a preferred image with schema.org markup (primaryImageOfPage, mainEntity or mainEntityOfPage) or with og:image. It advises choosing relevant, representative, high-resolution images and avoiding generic ones such as logos, images containing text, and extreme aspect ratios.

How to confirm: the page's og:image (or structured data image) points to a representative, crawlable image. Social tag details are in Open Graph and Twitter Card Tags: How to Set Them Up.

Step 8: Re-audit

Why: new uploads break the rules again. Crawvix has a check that reports images without an alt attribute on the pages it samples, and it treats alt="" as an intentional decorative choice. Run a check or review your pages monthly.

How to confirm: a fresh crawl shows no important image without an alt attribute.

Final verification checklist

Meaningful images are real <img> elements with a working src.
Every <img> has an alt attribute; decorative images use alt="".
Alt text describes the image in context, without keyword lists or "image of".
Images used as links have alt text that describes the link destination or action.
File names are short, lowercase, hyphenated and descriptive.
Images are placed beside the text that explains them.
Formats are on Google's supported list, with a fallback src where srcset or <picture> is used.
Image files are not blocked by robots.txt.
Each page's preferred image is relevant, crawlable and not a logo.

Common mistakes to avoid

Stuffing alt text with keywords. Describe the picture in a short phrase instead.
Using CSS backgrounds for content images. Google does not index CSS images, so use <img>.
Giving every image the same alt text. Each meaningful image needs its own description.
Giving decorative images long alt text. Use alt="" so screen readers skip them.
Renaming thousands of files without redirects. Changed URLs break links and caches.
Using a logo as the page's preferred image. Choose a representative picture.
Putting essential text only inside an image. Include that text in the page or in the alt.

Frequently asked questions

Do I need alt text on every image?

Every <img> should have an alt attribute. If the image is purely decorative, the attribute should be empty (alt=""). If it carries meaning, describe it.

How long should alt text be?

Google gives no length limit in its image guidance. Use as few words as it takes to describe the image clearly. Long descriptions of complex images belong in the page text.

Do file names matter?

Google lists short, descriptive file names as a helpful practice. Alt text and surrounding text matter more, and a file name alone will not make an image rank.

Which image formats does Google support?

BMP, GIF, JPEG, PNG, WebP, SVG and AVIF, according to its image documentation. Make sure the extension matches the real file type.

Does lazy loading hurt image indexing?

Google's image page does not discuss it. If you lazy-load, keep the real image URL in an <img> element that Google can find. Test with the URL Inspection tool and see Lazy Loading Images Without Hiding Them From Search.

Should I use an image sitemap?

It can help discovery, especially for images loaded in ways crawlers may miss or hosted on a CDN. It is optional, and it does not force indexing.

Official references

Next step: See how Crawvix checks a website and capture a baseline once scanning opens. This guide provides technical information, not a guarantee of rankings, traffic or index inclusion.