1. Before You Start: How to Read the Examples
Each example shows three levels — from bad to optimal. The color codes:
Tip: All ✅ examples can serve as templates. Replace product names, colors, and details.
2. E-Commerce Examples by Industry
1. Fashion & Clothing
Image: Red summer dress with V-neck, worn by a model, white background
alt="Dress"alt="dress red women summer buy cheap online sale"alt="Red dress"alt="Summer Breeze Dress in Red – Lightweight chiffon summer dress with V-neck, on model"✅ Contains: Product name, color, material, cut, context. Naturally readable, no keyword stuffing..
Image: Black leather jacket, product photo on hanger, white background
alt="IMG_4521.jpg"alt="Black jacket"alt="Rebel Classic Biker Jacket in Black – Genuine lambskin leather with zipper and studs"Image: Close-up of a T-shirt label showing material info
alt="Detail"alt="Label of the Essential T-Shirt showing 100% organic cotton, Made in Portugal"Text within the image (label) is reproduced in the alt text — WCAG requirement.
2. Shoes & Accessories
Image: White leather sneakers, side view
alt="Image of shoes"alt="White sneakers"alt="Urban Flow Sneaker in White – Smooth leather with contrasting sole, side view"Image: Gold wristwatch on wrist
alt="Watch"alt="Chrono Heritage Wristwatch in Gold – 42mm case with black dial, worn on wrist"3. Electronics & Tech
Image: Laptop open on desk, screen showing desktop
alt="laptop computer notebook cheap buy online"alt="Silver laptop"alt="ProBook 15 Laptop in Space Grey – 15.6-inch display, open on desk"Image: Wireless headphones with charging case
alt=""alt="SoundPure ANC Headphones in Black with open charging case – wireless, over-ear"❌ An empty alt=”” on a product image is an error — that’s reserved for decorative images.
Image: Smartphone with camera app open, rear view showing triple camera
alt="PixelMax 8 Pro Smartphone – Rear view with triple camera system and LED flash"4. Furniture & Home
Image: Green velvet sofa in a bright living room
alt="Sofa"alt="Green sofa in living room"alt="Velvet Cloud 3-Seater Sofa in Forest Green – Velvet upholstery with gold wooden legs, living room setting"Image: Dining table set, 6 chairs, photographed from above
alt="Nordic Dining Table in Oak with 6 matching chairs – Set from above, table is set"5. Food & Beverages
Image: Honey jar with wooden spoon, honey dripping
alt="Photo of honey"alt="Black Forest Organic Honey in 500g jar – golden blossom honey dripping from wooden dipper"“Photo by” is redundant—the screen reader already announces “Graphic:”.
Image: Wine bottle with label, next to it a filled glass
alt="Château du Soleil Merlot 2021 – Red wine bottle next to filled wine glass, deep ruby color"6. Beauty & Cosmetics
Image: Red lipstick, turned out, against a white background
alt="lipstick makeup cosmetics red beauty"alt="Velvet Kiss Lipstick in Cherry Red – Creamy texture, twisted up, matte-glossy finish"Image: Opened jar of face cream, texture visible
alt="HydraGlow Moisturizer 50ml – Open jar showing rich, white texture"7. Sports & Outdoor
Image: Running shoe in action, person running on forest trail
alt="Running shoe on forest trail"alt="TrailMax Pro Running Shoe in Neon Green – Worn trail running on wet forest path"Image: Yoga mat unrolled, two dumbbells on top.
alt="Zen Flow Yoga Mat in Blue-Grey – Non-slip surface, unrolled next to 2kg dumbbells"8. Tourism & Hotels
Image: Hotel room with double bed and mountain view
alt="Zimmer"alt="Hotel room with bed and view"alt="Deluxe Double Room with king-size bed and panoramic mountain view of the Tyrolean Alps"Especially important for hotels: mention room type, amenities, and view — these are the booking decision criteria.
Image: Hotel pool with parasols at sunset
alt="Infinity pool at Hotel Seeleiten overlooking Lake Kaltern at sunset"9. Real Estate
Image: Living room of a 3-room apartment with wooden floor
alt="apartment_vienna_01_003.jpg"alt="Bright living room with oak parquet flooring and floor-to-ceiling windows – 3-bedroom apartment Vienna Mariahilf"10. B2B & Industrial
Image: CNC milling machine in a production hall
alt="Machine"alt="PrecisionMill 5000 CNC Milling Machine – 5-axis machining center in production hall"Image: Cardboard box with shipping label on conveyor belt
alt="Shipping box with DHL label on automated conveyor belt in logistics center"3. Non-Product Images
11. Blog Images & Stock Photos
Image: Woman using a laptop in a café (stock photo in a blog about remote work)
alt="stock-photo-woman-laptop-cafe-2024.jpg"alt="Woman on laptop"alt="Young woman working focused on laptop in a bright café – Remote Work"Incorporate the article’s context – “Remote Work” is the topic of the blog post.
12. Infographics & Charts
Image: Pie chart showing e-commerce market shares
alt="Chart"alt="Pie chart e-commerce"alt="Pie chart: E-commerce market shares 2025 – Amazon 28%, Otto 8%, Zalando 5%, Other 59%"Include the key takeaway and most important data points in the alt text. Provide the complete data in the body text or in an HTML table..
Image: Bar chart showing online retail growth
alt="Bar chart: German online retail revenue, rising from €72B (2020) to €98B (2025)"13. Screenshots & Tutorials
Image: Screenshot of WordPress media library with highlighted alt text field.
alt="screenshot.png"alt="Screenshot: WordPress media library with red-highlighted alt text input field on the right side"For screenshots: “Screenshot:” is permitted at the beginning (unlike “Image of”)—the image type serves an informative purpose here.
14. Team & Portrait Photos
Image: CEO on the About page
alt="portrait-ceo.jpg"alt="Anna Müller"alt="Anna Müller, CEO of webAufstieg GmbH, smiling at the camera"For well-known individuals: Name + Role + Brief visual description. Blind people appreciate details that help them visualize the person.
15. Logos & Icons
Image: Company logo in the header (linked to homepage)
alt="logo.svg"alt=""alt="AutoAlt.ai Logo – go to homepage"The logo is linked → The alt text describes the link destination. An empty `alt=””` would be incorrect here, because the logo is a functional element.
Image: Shopping cart icon in the header
alt="Shopping cart (3 items)"Functional icons need alt text or ARIA labels that describe the action — not the image.
16. Banners & Hero Images
Image: Sale banner with text “Summer Sale – 30% off everything”
alt="Banner"alt="Summer Sale Banner: 30% off all summer collections, valid until August 31, 2026"Text within an image MUST be included in the alt text—otherwise, the information is lost to screen reader users..
17. Decorative Images (no alt text needed)
Images: Gradient as a separator, background pattern, atmospheric stock photo devoid of informational content.
alt="Beautiful blue gradient with clouds"(no alt attribute present)alt=""An empty `alt=””` attribute ≠ a missing `alt` attribute! An empty attribute → the screen reader skips the image (correct). A missing attribute → the screen reader reads out the filename (annoying).
18. Variation Images (Colors/Sizes)
Image: Same dress in 4 colors – Red, Blue, Black, White
alt="Dress" (identical for all 4 images)Correct: Each color variant needs its own alt text:
alt="Summer Breeze Dress in Red – Chiffon with V-neck"alt="Summer Breeze Dress in Royal Blue – Chiffon with V-neck"alt="Summer Breeze Dress in Black – Chiffon with V-neck"alt="Summer Breeze Dress in White – Chiffon with V-neck"Each color is a separate keyword in image search. “Red chiffon dress” and “Black chiffon dress” are different search queries.
4. Special Cases & the Universal Formula
19. Special Cases
🔗 Linked image (image as link)
Image: Product image linked to the product page
alt=""Red Dress" (describes only the image, not the link destination)alt="Summer Breeze Dress in Red – Go to Product Page"📝 Text in image
Image: Infographic with the text “5 steps to better SEO”
alt="Infographic"alt="Infographic: 5 Steps to Better SEO – 1. Keywords, 2. Alt Text, 3. Load Speed, 4. Backlinks, 5. Content"🖱️ Image as a button / CTA
Image: “Buy Now” button as a graphic
alt="Green button"alt="Buy Now"For image buttons: Alt text = action, not appearance. “Buy now”, not “green button with white text”.
📸 Image WITH caption
Image: Team photo at a conference. Caption below: “Our team at DMEXCO 2025”
alt="Our Team at DMEXCO 2025 (identical to caption)alt="Ten team members from webAufstieg GmbH pose in front of the AutoAlt.ai trade fair booth."Alt text ≠ caption. The alt text describes the image, the caption provides context. Don’t duplicate them.
5. The Universal Alt Text Formula
From the 30+ examples above, a simple formula can be derived that works for 90% of all images:
[Product name/main motif] in [color] – [type/material], [view/context]Applied:
Mode: [Summer Breeze Dress in Red – Chiffon with V-Neck [on model]
Electronic: [ProBook 15 Laptop] in [Space Grey] – [15.6-inch Display], [open on a desk]
Furniture: [Velvet Cloud 3-Seater Sofa] in [Forest Green] – [Velvet with Wooden Legs], [in a Living Room Setting]
Hotel: [Deluxe Double Room] with [King-Size Bed] – [Panoramic Mountain View of the Tyrolean Alps]
The formula automatically includes the most important SEO keywords (product name + color + material + type) and is also a natural sentence for screen readers. Win-win.
Or let the AI write.
For hundreds or thousands of images, manual text creation is impractical – even with a formula. AutoAlt.ai generates alt text using AI, automatically following the formula: product name, color, material, context – all extracted from the CMS context. 1,000 images in 30 minutes instead of 80 hours.
Seen 30+ Examples – Now Implement Automatically
AutoAlt.ai generates alt text using the optimal formula – via AI, directly in WordPress, WooCommerce, Shopware, Joomla, and Drupal. 50 credits/month, forever free.
6. SEO Power, Common Mistakes, & AI in Practice
21. Alt Text as an SEO Turbocharger: Why It Boosts Rankings
Alt text isn’t just for accessibility – it’s one of the most powerful on-page SEO tools that most shops completely ignore. Here are the facts:
📊 22.6% of all Google searches are image searches
Google Image Search is the second largest search engine in the world – bigger than YouTube and Bing combined. Those without alt text are invisible. Those with it appear in a channel that 83% of the competition ignores.
🏆 Alt text is Google’s #1 signal for image ranking
Google uses five signals to understand images: alt text (the strongest), surrounding text, filename, page title, and visual AI. Google’s John Mueller: “Alt text is extremely helpful for Google Images.” Without alt text, the most important signal is missing.
🛍️ Product images in the regular SERPs (Rich Snippets)
Google is increasingly displaying product images directly in regular search results – complete with thumbnails, prices, and star ratings. This requires a product schema and optimized alt text. This significantly increases the click-through rate (CTR) of your search results compared to text-only listings.
📈 Alt Text SEO Checklist (Short Version)
✓ Alt text descriptive + natural keywords (no stuffing)
✓ Descriptive filename: rotes-kleid-chiffon.jpginsteadIMG_2024.jpg
✓ File size compressed (WebP, under 200KB)
✓ Responsive Images (srcset-Attribute)
✓ Lazy Loading enabled
✓ Product schema with image attribute for rich snippets
✓ Image sitemap available
→ Detailed SEO guide: Alt text and SEO (Section 7 in the Pillar Guide)
22. How Alt Text Sounds in a Screen Reader
To understand why alt text is so important, you need to hear what happens when a blind user visits your website. Screen readers like JAWS, NVDA, or VoiceOver read image elements aloud like this:
❌ Without alt text – what the screen reader says:
🔊 “Graphic: IMG_20240315_142037_HDR.jpg”
The user hears a cryptic filename. No idea what the image shows. Frustration.
⚠️ With bad alt text:
🔊 “Graphic: Dress”
Which dress? Which color? Which brand? This hardly helps with the purchase decision.
✅ With optimal alt text:
🔊 “Graphic: Summer Breeze dress in red, light chiffon summer dress with V-neck, on model”
The user knows exactly what they “see” – product name, color, material, cut. They can make a purchase decision.
Pro tip: Test your own website with a screen reader. NVDA (Windows) is free, and VoiceOver is pre-installed on every Mac. Close your eyes and navigate through your product page. This will fundamentally change your perspective on alt text.
23. The 7 Most Common Alt Text Mistakes (and how to avoid them)
Alt attribute completely missing
Most common error: Screen reader reads the filename aloud. WCAG violation. Risk of a BFSG fine. Solution: Every <img><a> tag needs an alt attribute – either descriptive or empty ( alt="").
Keyword-Stuffing
“Buy red women’s summer dress cheap online sale” – that’s not alt text, that’s a keyword list. It harms both SEO and accessibility. Google recognizes stuffing and penalizes it.
“Image of…” or “Photo of a…”
The screen reader already says “Graphic:”. “Picture of a dog” becomes “Graphic: Picture of a dog” – twice. Wastes 10-15 valuable characters.
Identical alt text for all images
Five product images with the text “red dress” five times – Google sees four duplicates, screen reader users hear the same thing five times. Each image needs individual alt text that describes the respective perspective.
Too vague / too general
“Sofa” instead of “Velvet Cloud 3-seater sofa in forest green.” No product name, no color, no material. This wastes SEO potential and doesn’t help blind users make a purchase decision.
Decorative images with descriptive alt text
A background pattern doesn’t need alt text – “Nice blue gradient” annoys screen reader users. Decorative images: alt="" (empty attribute).
Alt text only in one language in a multilingual shop
German alt text in a French storefront? Makes no sense for French-speaking screen reader users and harms French-language SEO. Each language version needs its own alt text.
24. Manual vs. AutoAlt.ai: Practical Comparison
Theory is nice – but what does it look like in practice when an AI tool generates alt text? Here’s a realistic comparison using the example of a fashion shop with 500 products:
| criterion | Write manually | AutoAlt.ai Plugin |
|---|---|---|
| Time required (2,000 images) | ~80 working hours (2-3 min/image) | ~45 minutes (bulk generation) |
| Costs | €6,000-8,000 (Agency, €100/h) | €90 (2 x Profi-Pack at €45) |
| Product name in the alt text? | If the copywriter thinks about it | Automatically extracted from WooCommerce/Shopware |
| consistency | Varies depending on the writer/day | Consistent style across all images |
| Multilingual (DE+EN+FR) | 3 times the effort + translator needed | 1 credit = all languages included |
| Post-processing possible? | And | Yes, without additional credits. |
| CMS-Integration | Copy and paste into each image field | Directly in WordPress/WooCommerce/Shopware |
| BFSG Documentation | Create manually | Processing history as proof |
Concrete practical example: What AutoAlt.ai generates
You upload a product image – the AI visually analyzes the image, reads the product name and category from your shop, and generates:
// Input: Product image + WooCommerce context
Product name: “Summer Breeze Dress”
Category: “Women > Dresses > Summer Dresses”
Attribute: Farbe=Rot, Material=Chiffon
// Output (DE):
alt=”Summer Breeze Kleid in Rot – Leichtes Chiffon-Sommerkleid mit V-Ausschnitt, getragen von Model”
// Output (EN):
alt=”Summer Breeze Dress in Red – Lightweight chiffon summer dress with V-neck, worn by model”
// Output (FR):
alt=”Robe Summer Breeze en rouge – Robe d’été légère en mousseline avec décolleté en V, portée par un mannequin”
The AI automatically combines: visual analysis (recognizing dress, color, V-neck, model) + CMS context (product name, category, attributes) + SEO keywords (naturally integrated). The result follows exactly the universal formula from Section 20 – in all languages simultaneously.
25. Multilingual alt texts: How to do it right
Especially relevant for shops in the DACH region: If your website has multiple language versions (DE, EN, FR, IT), each version needs its own alt text in the respective language. Here’s an example for the same product image in four languages:
🇩🇪 German:
alt="Summer Breeze Kleid in Rot – Leichtes Chiffon-Sommerkleid mit V-Ausschnitt"
🇬🇧 English:
alt="Summer Breeze Dress in Red – Lightweight chiffon summer dress with V-neckline"
🇫🇷 French:
alt="Robe Summer Breeze en rouge – Robe d'été légère en mousseline avec décolleté en V"
🇮🇹 Italian:
alt="Abito Summer Breeze in rosso – Leggero abito estivo in chiffon con scollo a V"
💡 Cost comparison for 4 languages (1,000 images):
Manual: 1,000 × 4 languages × 3 min × €100/h = €20,000
AutoAlt.ai: 1,000 credits × €0.045/credit = €45 (all languages included)
→ Savings: 99.8%. AutoAlt.ai charges 1 credit per image, not per language – this is unique in the market. Compatible with WPML and Polylang.
26. 5 Pro Tips for Advanced Alt Text Optimization
🎯 Tip 1: Context before content
The same image requires different alt text depending on the page. An Eiffel Tower photo on an architecture page: “Eiffel Tower, iron lattice construction by Gustave Eiffel.” On a travel page: “Eiffel Tower at sunset from the Trocadéro.” The context determines which details are relevant.
🔍 Tip 2: Check the top 10 traffic pages first
80% of your traffic comes from 20% of your pages. First, check your top 10 pages in Google Analytics → optimize their alt text → then optimize the rest in bulk. Maximum impact with minimal effort.
📱 Tip 3: Don’t forget alt text in emails
Many email clients block images by default. Without alt text, the recipient only sees empty boxes. Adding alt text to newsletter images results in higher open and click-through rates because the recipient understands the content even without loading the images.
🏷️ Tip 4: Article number for technical products
For electronics, spare parts, or B2B: The item number/SKU in the alt text can be an SEO advantage. Users often search by model number. “ProBook 15 Laptop (PB15-2026) in Space Grey” catches searches for “PB15-2026”.
🔄 Tip 5: Update alt text regularly
Alt text isn’t a “set and forget” solution. If product names change, seasonal collections switch, or you identify new keywords, update your alt text. AutoAlt.ai lets you check old alt text in bulk and regenerate it as needed.
7. Frequently Asked Questions (FAQ)
How long should alt text be?
Ideally, the text should be 80-125 characters long. Screen readers read the text aloud in one go – too long is tiring. Most of the examples marked with an asterisk (*) in this article are in the 70-110 character range.
Can I use keywords in alt text?
Yes – provided they fit the description, of course. “Summer Breeze dress in red” automatically contains keywords (dress, red) without any stuffing. What DOESN’T work: “buy red women’s summer dress cheap online sale” – that’s a keyword list, not alt text.
What's the difference between alt="" and a missing alt attribute?
alt="" An empty attribute tells the screen reader: “This image is decorative, skip it.” This is correct for backgrounds and separators. A missing alt attribute, however, means the developer forgot to enter one. The screen reader will then often read the filename aloud (e.g., “IMG_20240315_142037_HDR.jpg”).
Do all product gallery images need different alt text?
Yes! Each image shows something different (front view, back view, detail, worn). Each needs individual alt text that describes the respective perspective. Identical alt text for different images is an SEO and accessibility error.
Can AI write good alt text following this formula?
Yes. AutoAlt.ai uses GPT-40 and Google Gemini to visually analyze images and automatically integrate the CMS context (product name, category, attributes). The generated alt text follows the formula from section 20 and can be manually edited at any time – without additional credits.
Alt text using the optimal formula — auto-generated
AutoAlt.ai generates SEO-optimized alt text using AI for WordPress, WooCommerce, Shopware, Joomla, and Drupal. Compliant with German data protection laws (BFSG). Made in Germany.
50 credits/month forever free • No credit card • 2 min setup