What Is Image Alt Text?

Alt text — short for alternative text — is a written description embedded inside an HTML image tag using the alt attribute. Here is the basic syntax:

<img src="red-mountain-bike-trail.jpg" alt="Red mountain bike leaning against a pine tree on a forest trail">

That short description does three things simultaneously. It tells screen reader software what the image shows so that visually impaired users get the same information as sighted users. It gives search engine crawlers — which cannot see images — the context they need to understand and index a photo. And it provides a fallback text that browsers display if the image fails to load.

The alt attribute has been part of the HTML specification since the early 1990s, making it one of the oldest accessibility features on the web. Despite that long history, it remains one of the most frequently broken elements in any site audit. Studies consistently find that roughly half of all web images either lack an alt attribute entirely or carry a meaningless placeholder like "image" or the raw filename.

Understanding alt text properly means understanding that it sits at the intersection of three disciplines: web accessibility, technical SEO, and content strategy. Get it right and you improve the experience for millions of users while simultaneously feeding the data that search engines need to rank your images. Get it wrong and you leave traffic on the table while potentially exposing your site to accessibility complaints.

Why Alt Text Matters for Accessibility

Approximately 2.2 billion people worldwide have some form of visual impairment, according to the World Health Organization. Many of those users rely on assistive technology — most commonly screen reader software such as NVDA, JAWS, or VoiceOver — to navigate the web. When a screen reader encounters an <img> element, it reads the alt attribute aloud to the user. If the alt attribute is missing, the reader typically reads out the image filename instead, which produces jarring, meaningless strings like "IMG underscore 4 7 2 2 dot J P G". If the alt attribute is present but empty on a meaningful image, the reader silently skips the image, hiding information entirely.

Good alt text is not just a courtesy — it is a legal obligation in most jurisdictions. The Web Content Accessibility Guidelines (WCAG) 2.1, which underpin accessibility laws in the United States (ADA Section 508), the European Union (EN 301 549), and the United Kingdom (Public Sector Bodies Accessibility Regulations), require that all non-decorative images have a text alternative. WCAG Success Criterion 1.1.1 ("Non-text Content") is a Level A requirement, meaning it represents the minimum bar for accessibility compliance. Failing it leaves an organisation open to discrimination claims and, in some sectors, regulatory fines.

Beyond legal compliance, accessible alt text improves the experience for users in low-bandwidth environments where images are disabled, users browsing on slow mobile connections, and users who have configured their browser to block images. It also benefits users with cognitive disabilities who find detailed, descriptive captions easier to process than raw visual information.

You can test the accessibility of your images alongside other accessibility factors using the RankNibbler accessibility checker.

How Google Uses Alt Text for Image Search Rankings

Google has stated publicly and in its developer documentation that alt text is one of the primary signals it uses to understand what an image depicts. In its own words: "When choosing alt text, focus on creating useful, information-rich content that uses keywords appropriately and is in context of the content of the page." This is not vague guidance — it is a direct instruction from the team responsible for indexing billions of images.

Here is how Google's image indexing pipeline actually works. When Googlebot crawls a page, it downloads the HTML but does not render images the way a human eye would. Instead, it reads the surrounding text, the image filename, the structured data on the page, the caption, and — most directly — the alt attribute. All of these signals are weighted and combined to produce a textual understanding of the image. That understanding determines which image search queries the photo might be relevant for.

Alt text is important to Google Images for several reasons beyond ranking:

• Query matching: Google matches image search queries against its textual understanding of your image. An image of a chocolate lava cake with no alt text may never appear for the search "chocolate lava cake recipe" no matter how good the photo is. The same image with alt="Chocolate lava cake with molten centre on a white plate" becomes a viable candidate.
• Featured image snippets: Pages that rank for rich snippets — recipes, how-to guides, product listings — often have their images surfaced in enhanced Google results. Alt text helps confirm that the image matches the surrounding structured data.
• Google Discover: Google's content feed surfaces visual content based on topical interest signals. Well-described images are more likely to be selected for Discover cards.
• Page-level topical relevance: When every image on a page has relevant alt text that aligns with the page's target keywords, it reinforces the overall topical signal for the page — not just for image search, but for organic web search too.

This relationship between alt text and broader on-page SEO is why image optimisation should never be treated as a separate concern from your content strategy. Learn more about every element of on-page optimisation in our guide to what is on-page SEO.

How to Write Descriptive Alt Text: The Formula

Writing effective alt text is a learnable skill. A reliable formula to get started is:

[Adjective(s)] + [Subject noun] + [Context or action]

This structure naturally produces specific, searchable descriptions without feeling forced. Here are examples applied across different image types:

Notice that none of the strong examples begin with "image of" or "picture of". Screen readers announce the element type before reading the alt text, so prefixing with "image of" means users hear "image: image of white leather Nike..." — the redundancy is irritating and wastes precious character space.

Also notice that keywords appear naturally in the strong examples. The product photo alt text naturally contains "Nike Air Force 1" because that is what the image shows. The keyword is there because it belongs, not because it was forced. This distinction matters: natural keyword inclusion improves both SEO and user experience, while forced stuffing degrades both.

Alt Text Best Practices: A Comprehensive Reference

When to Use Empty Alt Text

Not every image on a web page communicates meaningful content. Decorative images — purely visual elements that serve an aesthetic function with no informational purpose — should use an empty alt attribute: alt="".

Examples of images that typically warrant empty alt text:

• Horizontal divider lines or decorative borders implemented as images
• Background textures or gradients in image format
• Repeated decorative icons (stars, bullets, flourishes) that are used purely for visual styling
• Spacer GIFs (a legacy technique that should be replaced with CSS, but may appear in older templates)
• Abstract shapes used as page design elements with no content meaning

The critical distinction is between decorative and functional. A star icon used purely as a visual bullet point is decorative. The same star icon used as a rating indicator — where five stars means "excellent" — is functional and needs alt text like alt="5 out of 5 stars".

Note that omitting the alt attribute entirely is different from using alt="". When the alt attribute is absent, some screen readers will attempt to read out the image filename as a fallback. When alt="" is present, screen readers are explicitly instructed to skip the element. Always include the attribute, even when the value is empty.

Alt Text for Different Image Types

Product Photos

E-commerce images benefit enormously from detailed alt text. Include the product name, brand, key attributes (colour, material, size where visible), and context. A product image with strong alt text is more likely to appear in Google Shopping results and Google Images for product-specific searches. For product listings, the alt text and the product name in structured data should align — Google cross-references these signals.

Example: alt="Matte black Hydro Flask 32oz wide-mouth water bottle with flex cap"

Infographics

Infographics are among the most challenging images to write alt text for because they often contain large amounts of text and data. The alt attribute cannot realistically capture everything in a detailed infographic. The best approach is a two-part strategy: write alt text that summarises the infographic's main conclusion or subject, then include the full data or text content in the body of the page (or in a collapsible section) so it is accessible to all users and crawlable by search engines.

Example: alt="Infographic summarising 2025 social media usage statistics across seven platforms"

Screenshots and Tutorial Images

For how-to guides and tutorials, screenshots need alt text that explains what the screenshot is showing and why it matters in the context of the instruction. Name the software, the specific screen or panel visible, and the action being demonstrated.

Example: alt="Google Analytics 4 Acquisition Overview report showing channel performance for the past 28 days"

Logos

A company logo used in the header typically should have the company name as alt text, optionally followed by a brief descriptor. Avoid using just "logo" as this provides no useful information. The alt text for a logo in a navigation header should match what a sighted user understands it to represent: the company name and its function as a link home.

Example: alt="RankNibbler — free on-page SEO checker"

Icons

Icons fall into two categories. Standalone icons with no accompanying text label need descriptive alt text that conveys their function (a search icon next to an empty input field: alt="Search"). Icons that sit alongside visible text labels are decorative and should use alt="" to avoid the screen reader repeating the same information twice (once for the alt text and once for the visible label).

Charts and Graphs

For data visualisations, the alt text should state the type of chart, the data it visualises, and if space allows, the key finding. For complex charts, link to or include a data table version of the information as a long description. This serves both accessibility and SEO, since the data table text is directly crawlable.

Example: alt="Line graph showing UK organic search traffic growth of 34% between January and December 2024"

People and Teams

Photos of people should describe who is in the image and their context. For public-facing pages, this typically means name and role. Avoid purely physical descriptions unless they are relevant to the page's purpose (a fitness brand showcasing workout form may legitimately describe posture and position).

Example: alt="Sarah Chen, RankNibbler CEO, presenting at Brighton SEO conference 2025"

Alt Text Character Length: What the Data Says

There is no official maximum length for the alt attribute in the HTML specification. However, practical and accessibility-driven guidelines consistently point to the same range. Here is a summary:

The practical recommendation is to aim for one clear, specific sentence of 60–100 characters. This is long enough to be genuinely descriptive and short enough to be processed cleanly by assistive technology. If an image genuinely requires more description, move the extended description into a visible caption, a longdesc attribute, or descriptive body copy near the image.

Common Alt Text Mistakes

These are the errors that appear most frequently in site audits, and the ones that cause the greatest combined damage to SEO and accessibility:

1. Missing the Alt Attribute Entirely

An <img> tag with no alt attribute at all is the single most common image error found on the web. It fails WCAG 1.1.1, causes screen readers to fall back to reading filenames, and removes the image from consideration for Google image indexing. The fix is straightforward: add the attribute. If the image is decorative, use alt="". If it carries meaning, write a description.

2. Using Generic Placeholder Text

Alt text values like "image", "photo", "picture", "graphic", "untitled", or raw filenames like "IMG_4823.JPG" or "banner_v3_final_FINAL.png" are technically present but functionally useless. They tell search engines nothing and provide screen reader users with no more information than they would get from a missing attribute. Every image needs a genuine description.

3. Keyword Stuffing in Alt Text

It can be tempting to pack target keywords into every alt attribute on a page. This is a mistake with real consequences. Google's quality guidelines explicitly call out "stuffing keywords into the alt attributes of images" as a black-hat technique. It can trigger a manual penalty or algorithmic demotion. Alt text should include keywords where they naturally fit — and not elsewhere.

Example of keyword-stuffed alt text to avoid: alt="SEO services best SEO company SEO agency London SEO consultant"

4. Using Empty Alt on Meaningful Images

Empty alt text is correct for decorative images. Using it on images that convey actual content — a product photo, a chart, an instructional diagram — silences those images for screen reader users entirely. Before using alt="", ask: if this image failed to load, would a user miss any content or meaning? If yes, the alt text should not be empty.

5. Duplicating Alt Text Across Multiple Images

Using the same alt text string for multiple images — especially a long series of product images from different angles or variants — is both an accessibility and an SEO issue. Each image is distinct and should be described distinctly. Search engines that encounter ten images with identical alt text have no way to distinguish between them. Screen reader users hearing the same description ten times in a row receive no useful information about each image's individual content.

6. Alt Text That Does Not Match the Image

This can happen when images are updated on a CMS without updating the alt text, or when alt text is populated automatically from a field that describes something else (a product title rather than a specific product image angle). Mismatched alt text misleads both users and search engines, and in some cases constitutes a WCAG violation. When auditing alt text, verify not just that it exists but that it accurately describes the image it is attached to.

7. Describing the Appearance Rather Than the Meaning

For functional images — graphs, charts, instructional diagrams — the alt text should convey what the image communicates, not just what it looks like. "Blue bar chart" describes appearance. "Bar chart showing a 22% increase in organic traffic after implementing schema markup" conveys meaning. The second version serves both accessibility and SEO.

How RankNibbler Checks Your Image Alt Text

RankNibbler's image alt text checker scans every <img> element on any page you audit. For each image found, the tool evaluates and reports:

• Whether the alt attribute is present or missing entirely
• Whether the alt attribute is empty (and whether that appears appropriate in context)
• Whether the alt text appears to be a generic placeholder (filename, "image", "photo", etc.)
• The length of each alt text string, with flags for values that exceed recommended limits
• The source URL of each image, so you can identify and update specific files without guessing
• A count of total images versus images with valid alt text on the page

Image alt text is worth up to 10 points in the RankNibbler SEO score. The scoring works on a proportional basis: if all images on your page have meaningful, non-empty alt text, you receive full marks. The score decrements proportionally based on the percentage of images that are missing, empty, or carrying generic placeholder values. This scoring reflects the real-world impact of alt text on both accessibility compliance and image search performance.

The image audit is one component of a full site audit that covers title tags, meta descriptions, heading structure, page speed, internal linking, and more. Run a complete audit to see how your images fit into the broader SEO picture.

For more detail on the other image-related signals RankNibbler checks, see the dedicated guides for image dimensions and lazy loading.

Alt Text and Image SEO: The Full Picture

Alt text is the most important image SEO factor, but it does not operate in isolation. Google evaluates several signals together when deciding how to rank an image. Understanding all of them lets you build a complete image optimisation strategy.

Image File Names

The filename of an image is a secondary signal that reinforces — or contradicts — the alt text. A file named DSC_0042.jpg provides no context. A file named chocolate-lava-cake-recipe.jpg aligns with the page content and alt text, sending a consistent topical signal. Before uploading images, rename them using hyphens between words and descriptive, keyword-relevant terms. This is a one-time action that compounds over time as Google indexes your images.

Image Compression and File Size

Large, uncompressed images slow page load times, which directly affects Core Web Vitals scores — specifically Largest Contentful Paint (LCP). Google has confirmed that page speed is a ranking factor, and since 2021 Core Web Vitals have been part of its Page Experience signal. An image that ranks well in image search but slows the page down creates a net negative for overall SEO. Always compress images before uploading. Modern formats like WebP and AVIF offer significant file-size savings over JPEG and PNG without visible quality loss. Find out more in the guide to how to optimise images for SEO.

Lazy Loading

Lazy loading defers the loading of off-screen images until the user scrolls towards them, reducing the initial page load payload. HTML5's native lazy loading attribute (loading="lazy") is supported by all major browsers and is straightforward to implement. However, applying lazy loading to above-the-fold images — especially the LCP image — is a common implementation mistake that can significantly worsen Core Web Vitals scores. The RankNibbler lazy loading checker identifies whether lazy loading is applied correctly on your page.

Image Dimensions and Aspect Ratio

Specifying the width and height attributes on image elements allows browsers to reserve the correct space in the layout before the image loads. This prevents Cumulative Layout Shift (CLS) — a Core Web Vitals metric that measures how much the page visually shifts during loading. Pages with high CLS scores tend to rank lower. Use the image dimensions checker to verify that your images have explicit width and height attributes set.

Structured Data for Images

Adding structured data (JSON-LD) that includes image properties alongside your alt text and file name creates a complete and consistent signal cluster. For recipes, products, articles, and events, schema markup can feature your image directly in rich results. The alt text, filename, and schema image property should all describe the same subject consistently.

Surrounding Page Content

Google considers the text around an image when evaluating its relevance. An image of a sourdough starter placed in the middle of a sourdough bread recipe article — with the recipe name in the heading above and method steps below — has strong contextual support. The same image placed on an unrelated page, no matter how good the alt text, has weaker relevance signals. Keep images and their surrounding content topically aligned.

Alt Text in WordPress, Shopify, and HTML

WordPress

WordPress makes alt text management relatively accessible. When you upload an image to the Media Library, you can fill in the Alt Text field directly in the attachment details panel. This alt text is stored in the database and automatically injected into the alt attribute whenever that image is inserted into a post or page.

For images already in the Media Library without alt text, go to Media > Library, click each image, and fill in the Alt Text field. For featured images (post thumbnails), set the alt text in the Media Library before setting the image as a featured image. Many WordPress SEO plugins — including Yoast SEO and Rank Math — include alt text coverage reports in their SEO analysis panels, making it easier to spot missing values across your content.

Important: WordPress block editor (Gutenberg) also provides an Alt Text field in the Image block sidebar. If you are copying and pasting images between posts, re-check the alt text in the sidebar as it may not always carry over correctly.

Shopify

In Shopify, image alt text can be set in several places. For product images, go to Products, select a product, then click on each image and select "Edit alt text" from the image options. For collection images, blog post images, and theme images, the alt text field is available in the respective editing interface. Shopify does not automatically populate alt text from product names — you must enter it manually for each image.

For large Shopify catalogues with hundreds or thousands of product images, the Shopify Admin API and Bulk Operations API allow programmatic alt text updates via a CSV import/export workflow. This is significantly faster than editing each product manually. Several Shopify apps also offer bulk alt text editing and generation features.

Raw HTML

In raw HTML, alt text is set directly in the <img> tag using the alt attribute:

<img src="/images/running-shoes.jpg" alt="Lightweight blue trail running shoes on rocky mountain terrain" width="800" height="600">

Note that the example above also includes width and height attributes, which are best practice for CLS prevention. For responsive images using the srcset attribute, place the alt text on the base <img> element — it applies regardless of which source file the browser selects.

For background images applied via CSS (background-image), the alt attribute is not available since there is no <img> element. If a CSS background image carries meaningful content, the WCAG-compliant approach is to either convert it to an inline <img> with alt text, or use an ARIA attribute (role="img" and aria-label) on the container element.

Alt Text and Core Web Vitals

Alt text itself has no direct effect on Core Web Vitals scores, which measure loading performance (LCP), visual stability (CLS), and interactivity (INP). However, several image optimisation practices that relate to alt text and image markup do directly affect Core Web Vitals:

The connection between image markup and Core Web Vitals is one reason why image optimisation deserves attention beyond just alt text. A page with perfect alt text but poor image compression and missing dimension attributes may still rank below a competitor with optimised images and strong Core Web Vitals scores. Review the complete image SEO guide and check your lazy loading and dimension attributes alongside your alt text.

Alt Text Glossary Reference

Several terms related to alt text appear frequently in SEO and accessibility documentation. Here is a quick reference:

For a full glossary of SEO terminology, see the RankNibbler SEO glossary.

Frequently Asked Questions About Image Alt Text

What is the difference between alt text and a caption?

Alt text is hidden inside the HTML and is only visible to screen readers, search engine crawlers, and users whose browsers fail to load the image. A caption is visible text displayed alongside the image in the page layout. Both serve useful purposes but are not interchangeable. Alt text is an accessibility requirement for all meaningful images. Captions are optional additional context. For complex images like charts, using both is best practice.

Does alt text directly affect Google web search rankings (not just image search)?

Yes, indirectly. Alt text contributes to the overall topical relevance of a page. When images have alt text that aligns with the page's target keywords and topic, it reinforces the semantic signal of the page as a whole. This is a relatively minor factor compared to title tags, headings, and body content, but it is a real one — especially for pages where images are central to the content (product pages, recipe pages, how-to guides).

Should I use my target keyword in every image's alt text?

No. You should use your target keyword in the alt text of images where it genuinely describes what the image shows. If you have a page about "sourdough bread" with ten images, some showing the bread, some showing the process, some showing equipment, only the bread images warrant "sourdough bread" in the alt text. Forcing the keyword into unrelated images is keyword stuffing and can harm rather than help your rankings.

What happens if I have hundreds of images without alt text? Do I need to fix them all?

Ideally yes, but prioritise strategically. Start with images on your highest-traffic pages and pages closest to conversion. Product images, hero images, and images within instructional content have the greatest SEO and accessibility impact. Images that are decorative can be fixed quickly by adding alt="". For large catalogues, many CMSs and e-commerce platforms support bulk updates via CSV or API — this is almost always faster than editing images one by one.

Can alt text be too long?

Yes. While the HTML specification does not impose a character limit, alt text longer than 125 characters can be cut off by some screen readers, creating a poor experience for visually impaired users. Beyond accessibility, excessively long alt text can appear spammy to search engines if it reads more like a keyword list than a natural description. Aim for one focused sentence of 60–100 characters for most images.

Do SVG images need alt text?

SVG images used as inline SVG elements do not use the alt attribute. Instead, accessible SVGs should include a <title> element inside the SVG code (for the accessible name) and optionally a <desc> element (for a longer description), along with role="img" and aria-labelledby to connect the title to the SVG element. SVGs used as <img src="image.svg"> take an alt attribute exactly like JPEG and PNG images.

Does Google's vision AI mean alt text is becoming less important?

Google has developed image understanding technology (Google Lens, vision models in Search) that can analyse image content directly. However, Google has explicitly stated that descriptive alt text remains important and continues to use it as a primary signal. Vision AI supplements alt text — it does not replace it. Think of it this way: if Google can now read the image and also read your alt text, having both accurate image content and accurate alt text creates a stronger, more consistent signal than relying on either alone.

What is the difference between alt text and the title attribute on an image?

The title attribute on an <img> element appears as a tooltip when a user hovers over the image with a mouse. It is not used by most screen readers as an accessible name for the image and is not a significant SEO signal. Do not use the title attribute as a substitute for alt text. The alt attribute is the correct and primary way to provide a text alternative for an image.

How does RankNibbler score pages with a mix of decorative and meaningful images?

RankNibbler's scoring accounts for images where empty alt text is appropriate. The tool flags images where the alt attribute is missing entirely (most serious), images where alt text appears to be a meaningless placeholder, and images with no alt attribute. It does not penalise images with alt="" when the image is likely decorative based on context signals. The 10-point alt text score reflects the proportion of meaningful images that have genuine, non-placeholder alt text.

Start Checking Your Alt Text Now

Every image on your site without proper alt text represents a missed opportunity in three dimensions: a user who cannot access your content, a search engine signal that is left blank, and an accessibility compliance gap that can carry legal risk. These are three distinct problems, but they all have the same single fix.

The RankNibbler free SEO checker scans your page and surfaces every image with a missing, empty, or suspicious alt attribute in seconds. No account required, no installation. Enter a URL, run the audit, and work through the image results alongside the full on-page SEO report to prioritise the fixes with the greatest impact.

For a complete picture of your image optimisation, combine the alt text audit with checks on image file sizes and formats, lazy loading implementation, and dimension attributes. Together these checks give you everything you need to fully optimise your images for both search engines and the users who matter most.

Run a full site audit to see how your alt text scores sit alongside all other on-page SEO factors in a single report.