Alt Text That Helps SEO, Without Keyword Stuffing

Alt text is the wording a screen reader speaks, and the wording a browser can show if the image never loads. Search engines use those words to understand the picture. Describe what the image shows. Include a keyword only when it names something actually visible. Decorative images get an empty alt (alt=""). There is no fixed character limit. One sentence covers most images, and two cover a complex chart. Long alts annoy screen reader users. A character counter is useful for the copy around the image. The alt itself should stay short.

A catalog that set every product alt to "best running shoes buy online free shipping" saw image search traffic stay flat. Accessibility audits flagged hundreds of failures. Repeating the phrase did not describe the products, so the extra keywords did not help either audience.

What alt text does

The alt attribute supplies text when:

• A screen reader announces the image to a blind or low-vision user
• The image fails to load on a slow connection
• A text-only or data-saver browser skips images
• A crawler indexes image context next to the surrounding copy

It does not replace a caption. Captions are visible. Alts are not. It should not copy a nearby heading word for word unless it adds information the heading lacks. It should not carry a hidden keyword list.

Vertex Solutions tool pages use alt text on icons and previews so assistive technology can tell what each control does. Those same strings reinforce the page topic without stuffing.

Informative, functional, or decorative

Classify the image before you write:

| Type | Example | Alt approach | | --- | --- | --- | | Informative | Chart of LCP improvements | Describe what the chart shows | | Functional | A "Search" icon button | Describe the action, not the pixel art | | Decorative | A background flourish | alt="" | | Complex | An infographic with data | A short alt, plus a long description nearby or aria-describedby | | Text in the image | A screenshot of an error message | Transcribe the essential visible text |

If removing the image would leave a gap in understanding, it needs a meaningful alt.

Writing alt text that holds up

A workable shape is subject, then context, then purpose when the page copy does not already make the purpose obvious.

Weak: image1.jpg or photo

Better: Side-by-side comparison of JPEG and WebP file sizes for the same product photo

Weak, stuffed: SEO alt text keyword SEO image optimization SEO tips

Better: Diagram showing how missing width and height attributes cause layout shift on mobile

Tie the alt to what is unique in the image, not to the whole article. A post about Core Web Vitals and images might include a Lighthouse screenshot. The alt should name the score and the LCP element, not the guide's title.

Keywords when they match the picture

A primary keyword belongs in the alt when it labels what is actually there:

• A product photo: the model name and the feature that distinguishes it
• A tool screenshot: the tool name and the visible state, such as "JSON Formatter with indented output panel"
• A blog illustration: the concept the picture depicts, not every tag in the CMS

Synonyms help when both describe the screenshot. "Compress" and "reduce file size" both fit a compression UI if that is what the image shows. Do not repeat the H1 on every inline image.

Word Counter and Character Counter help you audit the length of the surrounding copy. Alt text should stay short regardless.

Alt text for different image roles

Hero and featured images

Describe the visual, not "featured image for a blog post about alt text."

Example: Illustration of a screen reader announcing image descriptions on a blog page

Match the crop described in image aspect ratios for web, so the alt does not mention content that was cropped out of the frame.

Product and tool screenshots

Name the tool and the visible outcome:

• Vertex Solutions Compress Image tool showing 68% size reduction on upload
• A Resize Image panel with the dimension fields filled in

Specific alts on screenshots help both accessibility and long-tail image queries.

Charts and data visuals

State the takeaway:

Bar chart: WebP averages 32% smaller file size than JPEG at similar visual quality in test set

Put the full numbers in a data table or a nearby paragraph. Do not dump the whole dataset into the alt.

Icons and buttons

If the button has visible text ("Download"), the icon beside it is decorative, so use alt="". If the button is only an icon, the alt names the action: Download compressed PDF.

Author photos

Portrait of [Name], [role]. That is a description, not a place to park keywords.

Common mistakes

A filename as alt, such as IMG_4832.jpg, helps nobody.

A redundant alt repeats a caption word for word. If the caption already says "Figure 1: Compression workflow," the alt should not copy it unless the caption is not associated with the image in the markup.

A missing alt on an informative image is worse than a mediocre one. Crawlers and assistive tech get nothing.

A keyword list in the alt invites quality skepticism and misses the point of WCAG.

An alt on a decorative image makes a screen reader announce clutter. Use an empty alt.

Common mistakes when resizing images stacks on this. Wrong dimensions plus a vague alt make the page harder to use.

Image SEO beyond the attribute

Alt text is one signal among several:

• Descriptive filenames, such as compress-pdf-workflow.webp, not final-v3.webp
• Surrounding copy that reinforces what the image is doing on the page
• Structured data, including ImageObject in Article schema where it fits. See structured data for FAQ pages
• Image sitemaps for large catalogs. Editorial blogs need these less often
• Performance. Image compression for the web affects engagement. It does not write the alt

PNG vs JPG and similar format posts earn image-search traffic when the screenshots have specific alts.

CMS and team workflow

A standard beats a one-time audit:

1. Require an alt field on upload. Block publish if an informative image has an empty field.
2. Add a decorative checkbox that sets alt="" on purpose.
3. Put good and bad pairs in the style guide, by image type.
4. Spot-check each quarter. Export the alts and search for filler such as "image of".

AI-written alts need a human review. Models over-describe, and they invent trends in charts.

Testing the alt

• Read a draft with a screen reader, NVDA or VoiceOver.
• Run WAVE or axe. Both flag missing alts.
• In Search Console, filter the performance report for image-search appearances, where that data exists.
• Ask a colleague whether they can tell what the image shows from the alt alone.

Alt text, figcaption, and title

<figure>
  <img
    src="webp-comparison.webp"
    alt="File size comparison of JPEG and WebP versions of the same hero image"
    width="800"
    height="450"
  />
  <figcaption>WebP saved 340 KB on this 1200 px hero without visible quality loss.</figcaption>
</figure>

• Alt carries the essential content for someone who cannot see the image.
• Figcaption is optional commentary that everyone can see.
• Skip the title attribute for accessibility. Do not copy the alt into it.

Links and alt context

Blog images rarely need a URL inside the alt. Put internal links in the body copy next to the image. When the image is also a linked card, the alt describes the destination: Thumbnail linking to guide on PDF compression.

Related articles

• Core Web Vitals and Images: performance sits next to descriptive assets
• Image Compression for the Web: smaller files, same alt discipline
• Crop Images for Social Media: the alt has to match the visible crop
• Structured Data for FAQ Pages: schema context around the images on the page

Limitations

Alt text does not replace a visible caption, a data table, or a title attribute used as a tooltip. Empty alt is correct only for decoration. There is no fixed character cap, and a long alt still burdens screen reader users. Automated alts need a human check because they can misstate a chart. Platform rules and edge cases vary. Test on a sample image first, and keep the original file archived.