30 Image Alt Text Examples for E-commerce, Blogs, and SaaS
The fastest way to learn alt text is to see the bad version next to the good version and understand why the second one wins. So that's how this post is built: before-and-after pairs across the image types you actually publish: product photos, blog images, infographics, charts, and logos. The rules behind these choices live in the alt text SEO and accessibility guide; here we just apply them, repeatedly, until the pattern is obvious.
One thing to hold in your head throughout: good alt text describes the image in the context of this page. The same photo on a product page and in a blog post may deserve different alt text, because the reader needs different things from it.
Product photos (e-commerce)
On a product page, the shopper using a screen reader is trying to decide whether to buy. They need attributes: colour, material, size, angle. They do not need marketing adjectives.
| | Alt text | Why |
|---|---|---|
| ❌ Bad | alt="product image" | Describes nothing; screen reader user learns zero |
| ❌ Bad | alt="beautiful amazing premium quality shoes buy now" | Marketing fluff + stuffing, no actual attributes |
| ✅ Good | alt="Coral pink running shoe with white midsole, side view" | Colour, type, and angle, what a buyer needs |
The angle detail matters more than people expect. A product gallery has five photos of the same shoe, and giving them all identical alt text wastes four of them. Vary by what each shot shows:
<img src="shoe-1.jpg" alt="Coral pink running shoe, side profile">
<img src="shoe-2.jpg" alt="Coral pink running shoe, sole tread close-up">
<img src="shoe-3.jpg" alt="Coral pink running shoe worn on a runner mid-stride">
More good product examples to model:
alt="Navy cotton crewneck sweatshirt, men's, front view"alt="14k gold pendant necklace with round emerald, 18 inch chain"alt="Cast iron Dutch oven, cream enamel, lid open showing interior"
The variant trap
If you sell the same jacket in six colours, do not ship alt="jacket" on all six. Each variant image should name its colour: alt="Quilted jacket in forest green". Otherwise a screen-reader user choosing a colour has no way to tell them apart, and Google can't index each variant image distinctly.
Blog post images
Blog images are usually atmospheric or illustrative rather than transactional. The reader wants to know what's happening in the image and how it relates to the paragraph next to it.
| | Alt text | Why |
|---|---|---|
| ❌ Bad | alt="blog header" | Positional, not descriptive |
| ❌ Bad | alt="SEO marketing digital strategy growth" | Keyword salad, not a description |
| ✅ Good | alt="Marketer reviewing a Search Console traffic report on a laptop" | Names the subject and the action |
A few more blog-context examples that read naturally out loud:
alt="Hand-drawn flowchart mapping a user signup funnel on a whiteboard"alt="Open notebook with a handwritten keyword research list"alt="Two designers reviewing wireframes pinned to a wall"
None of them start with "image of"; the screen reader already says that.
Infographics and data charts
This is where most people overthink it. The instinct is to narrate every bar and slice. Don't. The alt should carry the single takeaway; the detailed data belongs in visible text or a caption that everyone can read.
| | Alt text | Why |
|---|---|---|
| ❌ Bad | alt="chart" | The whole point is lost |
| ❌ Bad | alt="Bar chart. Jan 100, Feb 140, Mar 155, Apr 180, May 210..." | Unlistenable; data should be in a real table or caption |
| ✅ Good | alt="Bar chart: mobile organic traffic grew 42% year over year" | Delivers the conclusion the chart is making |
More takeaway-style examples:
alt="Pie chart showing 60% of survey respondents prefer dark mode"alt="Line graph: page load time dropped from 4.2s to 1.8s after a CDN switch"alt="Funnel diagram with five stages from awareness to retention"
If the chart's full numbers genuinely matter, pair the image with a <figcaption> or an adjacent HTML table. That way the data is accessible to screen readers and indexable by Google; a real table beats a chart image every time for the actual numbers.
Logos
Logos trip people up because the right answer depends on whether the logo is a link and whether text sits next to it.
| Situation | Alt text | Why |
|---|---|---|
| Logo links to homepage, no nearby text | alt="Acme Coffee home" | It's a navigation control, so describe its function |
| Logo is just branding in the footer | alt="Acme Coffee" | Identify the brand, nothing more |
| Logo sits right beside the visible word "Acme Coffee" | alt="" | Text already says it; empty alt avoids repetition |
| Decorative partner-logo strip, purely visual | alt="" per logo, or describe collectively | Skip if it adds no information |
The footer logo case is the common mistake: alt="logo" tells a screen-reader user nothing, while alt="Acme Coffee" actually identifies whose site they're on.
The four patterns that are always wrong
No matter the context, these never pass:
alt="image"/alt="photo": describes nothingalt="DSC_0291.jpg": a filename is not a description (and a missingaltmakes some screen readers read this anyway)alt="cheap shoes buy shoes shoes online shoes": keyword stuffing- Identical alt text repeated across every gallery shot or colour variant
Choosing the right format for these images matters too (SVG for logos and icons, AVIF/WebP for photos), which we cover in image formats for SEO. And if you're generating a brand mark, our Logo Maker and SVG Viewer help you ship a crisp, scalable file.
Frequently Asked Questions
Should product alt text include the brand name?
Only if shoppers actually search for that product by brand. For most attributes, colour, material, and size are more useful for both accessibility and image-search discovery than a brand prefix on every photo.
What alt text do I use for an infographic with lots of data?
Put the single main takeaway in alt (e.g. "traffic grew 42% year over year") and place the detailed numbers in a caption or a real HTML table beside the image. That keeps the alt listenable and makes the data both accessible and indexable.
Do gallery images of the same product need different alt text?
Yes. Describe what each shot shows (side view, sole close-up, worn in use) rather than repeating one string. Identical alt across a gallery wastes the indexing value of every duplicate and tells screen-reader users nothing new.
When should a logo have empty alt text?
When the logo sits directly next to visible text that already names the brand, or when it's purely decorative. If the logo is a link with no adjacent text, describe its function instead, e.g. alt="Acme Coffee home".
Is it bad to repeat a keyword in alt text?
Repeating a keyword naturally because it describes the image is fine. Repeating it to game rankings is keyword stuffing; it's useless to screen-reader users and reads as spam to Google. There is no alt-text "keyword density" target.