Image Compressor topic guide

Image alt text and SEO: how to write alt text Google Images can use

Direct answer

Alt text is the value of the alt attribute on an <img> element. Google Images reads the alt text, the file name and the surrounding page text together to understand what an image shows. Write alt text that describes what is actually in the image in plain words, keep it short, and fill the attribute on every image that carries information. Use alt="" only for a decorative image that adds no information to the page.

Try the Image Compressor

What this workflow handles

Three things determine whether an image is useful to a search engine: the file name, the alt attribute and the surrounding page context. Google Search Central's Google Images best practices page documents all three and explicitly says descriptive file names, alt text and surrounding page text together help Google understand what the image is about. The HTML contract for the alt attribute is set by the WHATWG HTML Living Standard: it is the replacement text the browser shows when the image cannot be displayed, and screen readers read it in place of the image. MDN's <img> reference confirms alt is required content on every <img> element. The two pieces of advice come together: a search engine needs the words to know what the image is, and assistive technology needs the same words to describe the image to a user who cannot see it. Writing for both readers at once is the practical rule: short, descriptive, in the same language as the page, accurate to what is actually shown. The sources block below cites Google Search Central, the WHATWG HTML Living Standard and MDN for every claim.

Use the image compressor to re-encode a single image in its original format at the same pixel dimensions, then compare the byte counts in the result panel before keeping the output.

How to use it

  1. Decide whether the image is meaningful content the reader needs to know about, or a purely decorative element (a divider, a spacer, a background flourish).
  2. If the image is meaningful, write a short description of what is actually in it in plain words - the same words a person would use to tell someone what the image shows.
  3. Put the description in the alt attribute on the <img> element. Use alt="" only when the image is genuinely decorative and adds no information.
  4. Rename the file on disk to match the image topic ("red-leather-wallet.jpg" rather than "IMG_1234.jpg") and keep that name when you upload it. Google Search Central lists descriptive file names as one of the three signals for Google Images.
  5. Add a caption or surrounding paragraph that explains what the image shows. The page's heading, body text and any structured data together give the search engine the context it needs.
  6. Open the rendered page in a real browser, view the image's alt attribute in the DevTools inspector, and check that the text on screen matches what you wrote. If they disagree, fix one or the other.

Common mistakes

  • Stuffing alt text with search keywords. Alt text is a description of what the image shows, not a slot for search terms. Google Search Central's Google Images best practices page treats keyword-stuffed alt text as a violation of Google's image spam policies, not as a ranking opportunity. If a keyword appears naturally in a real description of the image, that is fine; if it would not appear in a sentence describing the image to a person, leave it out.
  • Leaving alt="" on a meaningful image. An empty alt attribute is the explicit signal that an image is decorative. The WHATWG HTML Living Standard and MDN both treat it that way, and screen readers skip the image entirely. If the image carries information the reader needs, the empty attribute is an accessibility bug, not a shortcut. Write a real description; the attribute exists so that description has a home.
  • Reusing the same alt text on every image. When several images share an alt string ("product", "icon", "photo"), a screen reader cannot tell them apart and a search engine gets no signal that they are different images. Every meaningful image on the page should have its own description that names what is actually shown. The exception is the decorative-image pattern, where several purely visual flourishes all legitimately carry alt="".
  • Writing alt text before the image is final. If alt text is written once and the image on the page is later swapped, the description no longer matches what is shown. The check after upload is the same as the check before: open the page, look at the image, compare it to the alt attribute. A mismatched alt string is worse than no alt text at all, because the screen reader will announce the wrong description to the user.

Check the output

After running the workflow, verify these four things on the actual file before you upload it anywhere.

  • Alt attribute present. Open the rendered HTML in a browser and check that every <img> element has an alt attribute. The WHATWG HTML Living Standard lists alt as required content on <img>; a missing attribute is treated as an error by HTML validators. A missing alt attribute is different from alt="": a missing attribute is a bug, alt="" is the explicit "this image is decorative" signal.
  • Alt text accurate. Look at the actual image and compare it to the alt text. The two should describe the same thing in the same language. Cut filler ("image of", "picture of", "photo of") and stop when the description covers what is actually shown. If the alt text was written before the image was swapped on the page, update the alt text to match the new image.
  • File name descriptive. Check the file name on disk and on the server. Google Search Central lists descriptive file names as one of the three signals for Google Images, so the URL the image is served from should describe the image topic, not the camera's sequential numbering scheme ("IMG_1234.jpg", "DSC00045.jpg"). Rename before upload if you can; if not, at least keep the original descriptive name out of the page's URL.
  • Surrounding context. Read the page on which the image sits and check that the heading, the paragraph that introduces the image and the caption all describe the same topic. Google Search Central lists surrounding text as a Google Images signal, so an image that sits in an empty page or a page whose body text is about something else gives the engine very little to work with. Add a caption or a short paragraph that puts the image in context.

Frequently asked questions

What is alt text on an image?

Alt text is the value of the alt attribute on an <img> element. The WHATWG HTML Living Standard defines it as the replacement text the browser shows when the image cannot be displayed, and screen readers read it in place of the image so a user who cannot see the image still knows what it shows. Google Images treats the same string as one of the signals that helps the engine understand the image topic.

What does Google recommend for alt text?

Google Search Central's Google Images best practices page recommends descriptive file names, descriptive alt text, and meaningful surrounding text on the page so the engine can understand what the image is about. Google does not publish a fixed character limit for alt text and does not publish a ranking weight for it. The published guidance is qualitative: describe what is in the image accurately and avoid stuffing alt text with search keywords.

How long should alt text be?

As long as it needs to be, no longer. The HTML Living Standard treats alt as replacement text for the image, so a screen reader reads the whole string. A few words is right for a decorative button icon; one or two short sentences is right for a photograph. Google Search Central does not publish a fixed limit. Cut filler words ("image of", "picture of") and stop when the description covers what is actually shown.

Should I put keywords in alt text?

No, not as a strategy. Google Search Central's Google Images best practices page treats alt text as a description of the image, not as a keyword slot. Stuffing alt text with search terms unrelated to what the image shows is explicitly against Google's spam policy for image search. Write alt text that genuinely describes the image; if a relevant keyword appears naturally in that description, that is fine, but the text should serve the reader first.

When do I use alt="" on an image?

Use alt="" only when the image is purely decorative and removing it would not change the page's meaning. The WHATWG HTML Living Standard and MDN both treat an empty alt attribute as the explicit signal that the image is decorative, which lets screen readers skip it. A meaningful image that is left with an empty alt attribute is a real accessibility bug: assistive technology cannot describe it to the user.

Does alt text help Google Images ranking?

Alt text is one of several signals Google Images uses to understand what an image is about, alongside the file name, the page title, the surrounding page text and any structured data on the page. Google Search Central does not publish a specific ranking weight for alt text. The practical effect is qualitative: a page where the file name, alt text and surrounding copy all describe the same image gives the engine a clearer signal than a page where those three disagree.

Sources

Explore the image compressor topic cluster

Each guide answers a different image-decision question. Pick the one that matches your situation, then use the linked tool to produce the output you need.

Related guides

  • JPEG vs PNG vs WebP: how to choose the right image format

    JPEG, PNG and WebP are not interchangeable. The right choice depends on what is in the image, whether it needs transparency, the file-size budget, and where the image will be displayed. A practical decision guide backed by MDN, Google Developers, web.dev, the WHATWG HTML Living Standard and the Pillow documentation.

  • How to optimize images for the web

    Optimizing an image for the web is a four-step decision chain: pick the format that matches the content, resize to the actual display size, re-encode at a balanced quality, and serve the result with a modern-format fallback. A practical guide backed by web.dev, MDN, Chrome for Developers Lighthouse audits, and the Pillow documentation.

  • Responsive images: serve the right size for every device

    Responsive images let one HTML element serve different pixel-sized files to different devices, so a phone does not download a 2000-pixel-wide desktop photo. The pattern uses the srcset and sizes attributes on <img>, or the <picture> element with multiple <source> children. Backed by MDN, web.dev and the WHATWG HTML Living Standard.

All image compressor guides