Images account for over 50% of the byte weight of the average modern web page. Yet while developers spend countless hours optimizing HTML titles, headings, and meta descriptions, they frequently treat image alternative text (alt attributes) as an afterthought—or worse, stuff them with spammy keyword lists.
The alt attribute serves two critical purposes in web engineering:
- Accessibility (WCAG & ADA Compliance): Screen readers used by visually impaired users vocalize alt text to describe what the image depicts.
- Search Engine Optimization (SEO): While computer vision models are advancing rapidly, Googlebot still relies heavily on alt text to understand image subject matter, rank content in Google Images, and derive semantic context for the surrounding page.
In this guide, we review the exact copywriting formulas, HTML requirements, and optimization strategies to write professional alt text that delights users and ranks in search engines.
1. What is Image Alt Text?
The alt attribute is a property of the HTML <img> element:
<img src="/dns-propagation-diagram.png"
alt="Diagram illustrating DNS propagation across root nameservers and ISP resolvers"
width="800"
height="450" />
If an image fails to load (due to poor cellular connectivity, a broken CDN link, or privacy blockers), the browser displays the alt text inside the broken image frame so the reader does not lose the context of the page.
2. The Golden Rules of Alt Text Writing
Writing effective alt text requires balancing brevity, descriptive precision, and natural keyword integration.
Rule 1: Be Specific and Objective
Describe the actual subject and action depicted in the image. Avoid subjective fluff like "beautiful photo" or "amazing screenshot".
- Bad (Empty):
alt="" - Bad (Keyword Stuffing):
alt="website hosting fast hosting best cloud server buy hosting" - Okay:
alt="A server rack in a data center" - Optimal:
alt="Rows of enterprise server racks illuminated with blue LED status lights in a modern data center"
Rule 2: Never Start with "Image of..." or "Picture of..."
Screen reading software automatically announces the HTML element type. When a screen reader encounters an <img> tag, it audibly says: "Graphic" or "Image". If your alt text begins with "Image of...", the user hears: "Graphic, image of a blue button". Get straight to the subject matter.
Rule 3: Keep It Under 125 Characters
Most popular screen readers (such as JAWS, NVDA, and Apple VoiceOver) truncate or chunk alt text into separate 125-character utterances. Aim to communicate the core essence of the image within 80 to 120 characters.
3. Context Determines the Alt Text
The correct alt text for an image changes depending on the purpose of the article it accompanies.
Imagine a photograph of Apple CEO Tim Cook introducing an iPhone on stage.
- On a tech biography site:
alt="Tim Cook addressing the audience at Apple Park in Cupertino" - On a product review comparing phone sizes:
alt="Hand holding iPhone 16 Pro displaying the titanium bezel width" - On a photography blog evaluating camera sensor performance:
alt="Low-light indoor portrait demonstrating bokeh blur and dynamic range"
Always tailor the image description to reinforce the specific topic of the section it illustrates.
4. How to Handle Decorative Images vs. Informational Images
Not every image requires a descriptive alt attribute. In web accessibility standards, images fall into two broad categories:
A. Informational Images
Images that convey critical information, data charts, workflow diagrams, or product photos must have descriptive alt text. If removing the image would leave the reader with incomplete knowledge, the alt text is mandatory.
B. Decorative Images
Images used purely for visual aesthetics, background texture, decorative icons, or visual dividers should have an empty (null) alt attribute:
<!-- DECORATIVE ICON: Screen readers will silently skip this -->
<img src="/icons/sparkle-decoration.svg" alt="" aria-hidden="true" />
Critical Warning: Do not omit the alt attribute entirely!
<!-- ACCESSIBILITY FAILURE: Omitted alt attribute -->
<img src="/icons/star.png" />
If you completely omit the alt tag, screen readers will announce the raw file name: "Graphic, slash icons slash star dot png". Always include alt="" for decorative assets.
5. Complex Infographics and Architecture Diagrams
What if you have an intricate flowchart or infographic containing 300 words of technical steps that cannot fit into a 120-character alt attribute?
The Two-Tier Strategy:
- Provide a high-level summary in the alt attribute.
- Provide the complete text transcript or breakdown in the HTML body copy or an adjacent
<figcaption>:
<figure>
<img src="/ssl-handshake-process.png"
alt="Flowchart diagram of the 8-step TLS 1.3 cryptographic handshake process"
width="800"
height="500" />
<figcaption>
<strong>Figure 1:</strong> The TLS 1.3 handshake begins with the Client Hello packet containing supported cipher suites, followed by the Server Hello, cryptographic key exchange, and encrypted application data transmission.
</figcaption>
</figure>
This pattern satisfies WCAG 2.1 Level AAA requirements and provides rich, crawlable keyword context for Google's indexers.
6. Image File Naming: The Silent SEO Signal
While alt text is primary, search engines also extract semantic clues from the image's raw file name and folder path.
- Bad File Name:
IMG_89402_FINAL_v2.PNG - Good File Name:
google-search-console-url-inspection-tool.webp
File Naming Best Practices:
- Use all lowercase letters.
- Separate words with hyphens (
-), never underscores (_). Google treats hyphens as word separators, whereas underscores combine words into a single unintelligible string. - Keep file names concise and descriptive (3 to 6 words).
Combine descriptive file names, accurate alt attributes, and responsive WebP formats to unlock sustainable organic search traffic from Google Images.