Alt-Text für AVIF, SVG & WebP

2026 haben sich die Bildformate geändert, mit denen moderner E-Commerce läuft. JPEG und PNG — Formate aus den 1990ern — sind heute der Fallback, nicht der Standard. WebP ist zum alltäglichen Arbeitspferd geworden, AVIF liefert die kleinsten Dateien für Hero-Bilder und Produktgalerien, und SVG übernimmt Logos, Icons und UI. Der Gewinn ist real: schnellere Seiten, niedrigere Bandbreitenkosten und bessere Core Web Vitals.

Es gibt aber einen blinden Fleck. Die meisten Alt-Text-Ratgeber gehen noch davon aus, dass alles ein JPEG ist. Moderne Formate werfen zwei praktische Fragen auf, die niemand beantwortet: Kann Ihr Alt-Text-Tool sie überhaupt lesen, und was kostet es Sie, sie in großer Menge zu taggen? Dieser Guide deckt beides ab — die Barrierefreiheits- und SEO-Seite sowie die Credit-Kosten-Seite, mit der die meisten Anbieter nicht werben.

1. Warum moderne Formate den E-Commerce übernommen haben

Der Wechsel hat nichts mit Optik zu tun — es geht um Geschwindigkeit, und Geschwindigkeit ist im E-Commerce bares Geld. Unabhängige Tests zeigen durchgängig: WebP-Dateien sind rund 25–35 % kleiner als vergleichbare JPEG oder PNG, und AVIF geht noch weiter — etwa 60 % kleiner als JPEG und rund 20 % kleiner als WebP bei gleicher Bildqualität.

Diese Gewichtsreduktion schlägt direkt auf den Largest Contentful Paint (LCP) durch, jene Core-Web-Vitals-Kennzahl, die am stärksten an Ihren Hero- und Produktbildern hängt. Ein großes Bild zu halbieren kann den LCP auf Mobilgeräten um 200–500 ms verschieben — oft der Unterschied zwischen „gut“ und „verbesserungswürdig“. Google sagt klar, dass das Format selbst kein Ranking-Faktor ist — aber die damit erreichte Seitengeschwindigkeit ist einer. Schnellere Produktseiten konvertieren zudem besser, und das ist der eigentliche Grund, warum Shops den Aufwand betreiben.

Das ist wichtiger, als es klingt: Bilder sind auf rund 73 % der mobilen und 83 % der Desktop-Seiten das Largest-Contentful-Paint-Element (Web Almanac 2024) — das Format, das Sie ausliefern, ist also oft der Hebel auf Ihrer schwächsten Core-Web-Vitals-Kennzahl. Zur Auffindbarkeit: Google Search indexiert Bilder in BMP, GIF, JPEG, PNG, WebP, SVG und AVIF — ein modernes Format schadet Ihrer Sichtbarkeit in der Bildersuche also nicht, solange das Bild in einem echten <img>– oder <picture>-Tag steht (CSS-Hintergründe indexiert Google nicht) und einen sauberen Alt-Text trägt. Und: Google hat erklärt, dass EXIF-Metadaten kein Ranking-Signal sind — das übernimmt der Alt-Text.

2. Die vier Formate, denen Sie begegnen — und ihre Alt-Text-Folgen

Die goldene Regel für alle: Alt-Text beschreibt, was das Bild zeigt, niemals das Dateiformat. „Roter Lederstiefelette, Seitenansicht“ ist guter Alt-Text — egal ob die Datei ein JPEG, ein WebP oder ein AVIF ist. Schreiben Sie nie „AVIF-Bild eines Stiefels“ — das Format ist für jemanden mit Screenreader oder für Google Bilder völlig irrelevant.

3. Die versteckten Kosten: der „Format-Aufschlag“

Jetzt der Teil, den fast kein Format-Ratgeber erwähnt. Viele KI-Alt-Text-Generatoren rechnen per Credits ab — meist 1 Credit pro Bild. Moderne Formate sind aber aufwändiger zu verarbeiten: AVIF und HEIC nutzen schwerere Codecs, und SVG ist Code (XML) statt eines Bildes, sodass das Tool die Datei oft erst dekodieren oder rastern muss, bevor ein KI-Modell sie „sehen“ kann.

Um diese Kosten abzudecken, verlangen manche Anbieter einen Format-Aufschlag: moderne Formate werden mit 2 Credits statt 1 berechnet. Die Dokumentation von AltText.ai etwa bepreist Formate wie AVIF, SVG, HEIC, HEIF, JP2 und TIFF mit je 2 Credits. Das ist völlig legitim — hat aber eine reale Kalkulations-Konsequenz, sobald Ihr Katalog gemischte Formate enthält.

Es summiert sich mit zwei weiteren gängigen Aufschlägen: Abrechnung pro Sprache (manche Tools berechnen +1 Credit pro Zusatzsprache) und animierte bzw. mehrbildrige Dateien. Nichts davon ist böswillig versteckt — es steht in den Preis-Dokumenten — aber es wird leicht übersehen, bis die Credits schneller alle sind als geplant. Wenn Ihr Katalog modern aufgestellt ist, ist ein pauschaler Preis pro Bild unabhängig vom Format schlicht leichter zu kalkulieren.

4. SVG richtig gemacht: dekorativ vs. bedeutungstragend

SVG ist das eine Format, bei dem sich die Alt-Text-Entscheidung wirklich ändert, weil SVGs für zwei sehr unterschiedliche Aufgaben genutzt werden. Macht man es falsch, überflutet man Screenreader-Nutzer mit Lärm oder versteckt Informationen, die sie brauchen.

Dekorative SVGs → ausblenden

Trennlinien, Hintergrund-Verzierungen, rein ornamentale Icons neben Text, der dasselbe schon sagt — diese tragen keine Information. Geben Sie ihnen ein leeres Alt-Attribut oder verstecken Sie sie vor assistiver Technik:

Bedeutungstragende SVGs → beschreiben

Logos, Diagramme, Infografiken und eigenständige Icons, die ein Bedienelement beschriften, tragen alle Bedeutung und brauchen echten Alt-Text:

Bei einer Infografik oder einem Diagramm sollte der Alt-Text die Kernaussage zusammenfassen („Balkendiagramm: organischer Traffic +40 % nach Hinzufügen von Alt-Text“), nicht jeden Datenpunkt auflisten — die vollständigen Daten gehören in benachbarten Text oder eine Tabelle. Und Achtung: Weil SVG Vektor-Code ist, können manche KI-Tools es nicht direkt analysieren und müssen es erst rastern — ein weiterer Grund, vor dem Verlassen darauf zu prüfen, ob Ihr Tagging-Tool SVG tatsächlich unterstützt.

Inline-SVG vs. <img>: der technische Haken

Hier eine Falle, die die meisten Ratgeber auslassen. Das alt-Attribut funktioniert nur, wenn das SVG als Datei per <img src="logo.svg" alt="..."> eingebunden ist. Steht das SVG inline im HTML — der Code direkt in die Seite kopiert — gibt es kein alt-Attribut. Den zugänglichen Namen geben Sie dann anders:

Ein kurzes <title> mit role="img" ist das Minimum; <desc> ergänzt Diagramme, die mehr Detail brauchen. Ein dekoratives Inline-SVG bekommt stattdessen aria-hidden="true". Genau an diesem <img>-vs-inline-Unterschied scheitern viele Generatoren: manche können SVG gar nicht verarbeiten (Webflows KI etwa erzeugt Alt-Text für JPG, PNG, GIF, WebP und AVIF, aber nicht für SVG), andere taggen die Datei, ignorieren aber Inline-Grafiken. Wenn Logos und Icons für Ihre Marke zählen, prüfen Sie, ob Ihr Tool beides abdeckt.

5. Auch Dateinamen zählen — und KI kann sie reparieren

Alt-Text bekommt die Aufmerksamkeit, aber der Dateiname ist ein zweites, eigenständiges Bild-SEO-Signal — und das, das die meisten Shops vernachlässigen. IMG_4821.avif sagt Google und Käufern nichts; roter-leder-stiefelette.avif sagt beiden genau, was das Bild zeigt. Beschreibende, mit Bindestrich getrennte, kleingeschriebene Dateinamen helfen Produkten in Google Bilder — und sie überstehen die Formatkonvertierung: einmal umbenennen, und der Name bleibt, ob Sie später WebP oder AVIF ausliefern.

Der Haken ist die Menge. Tausende kamera- oder lieferantennummerierte Dateien von Hand umzubenennen ist die Aufgabe, die nie erledigt wird. Hier verdient sich Automatisierung ihren Platz: Manche Tools erzeugen gleichzeitig mit dem Alt-Text einen SEO-freundlichen Dateinamen aus dem Bildinhalt. AutoAlt.ai etwa kann neu hochgeladene Dateien im Upload-Flow in keyword-basierte Namen umbenennen — so werden Alt-Text und Dateiname in einem Durchgang erledigt statt in zwei.

6. Moderne Formate ausliefern, ohne die Core Web Vitals zu ruinieren

AVIF zu wählen ist nur die halbe Miete — wie Sie es ausliefern, entscheidet, ob Sie das Tempo wirklich gewinnen. Das 2026er-Produktionsmuster ist das <picture>-Element mit gestaffeltem Fallback, und der Alt-Text steht einmal am inneren <img>, geteilt über alle Quellen:

Ein paar Regeln verhindern, dass moderne Formate nach hinten losgehen:

• Das LCP-Bild nicht lazy-loaden. Ihr Hero- oder erstes Produktbild soll sofort laden — fetchpriority="high" setzen und loading="lazy" dort weglassen. Das LCP-Element lazy zu laden ruiniert den Wert am schnellsten.
• Immer width und height setzen (oder ein aspect-ratio), damit der Browser Platz reserviert und kein Layout-Shift (CLS) entsteht.
• Alles unterhalb des Folds lazy-loaden mit loading="lazy" — jedes Bild außer dem LCP-Element.
• Den Alt-Text über alle Quellen identisch halten. Welches Format der Browser wählt, ist für einen Screenreader irrelevant; die Beschreibung ändert sich nie.

7. Häufige Alt-Text-Fehler — Format-Edition

Dieselbe Handvoll Fehler taucht immer wieder auf, und moderne Formate steuern einen eigenen bei:

• Das Format benennen. „AVIF-Bild eines Stiefels“ oder „SVG-Logo-Grafik“ — das Format ist Lärm. Beschreiben Sie den Inhalt.
• Dateiname als Alt-Text. alt="IMG_4821" hilft niemandem, und ein Screenreader, der einen Pfad vorliest, ist eine schlechte Erfahrung.
• Keyword-Stuffing. alt="stiefel schuhe stiefel kaufen beste stiefel" liest sich für Google als Spam und ist auf dem Screenreader eine Qual. Eine natürliche Nennung genügt.
• Identischer Alt bei jeder Variante. Zwanzig Produktbilder, alle mit „unser Produkt“, geben Google keinen Grund, eines davon zu ranken. Beschreiben Sie, was sich jeweils unterscheidet.
• Alt komplett weglassen. Das Attribut wegzulassen ist schlimmer als ein leeres alt="" — assistive Technik liest dann womöglich den Dateipfad vor. Dekoratives bekommt alt="", alles Bedeutungstragende eine Beschreibung.

8. Eine formatunabhängige Alt-Text-Checkliste

Welche Formate Ihr Shop auch nutzt — diese Regeln gelten immer:

• Modern ausliefern, Fallback behalten. Das 2026er-Muster ist AVIF → WebP → JPEG per <picture>-Element. Das Alt steht am inneren <img> und bleibt für alle Quellen gleich.
• Inhalt beschreiben, nicht Format oder Dateiname. Kein „IMG_4821.avif“, kein „Foto von“, keine Formatnamen.
• Knapp halten. Ziel: unter ~125 Zeichen; das Wichtigste für die Produktsuche zuerst.
• Dekoratives bekommt nichts. Leeres alt="" oder aria-hidden — beschreiben Sie keine Abstandshalter und Ornamente.
• Beachten Sie, wo Ihre Bilder verarbeitet werden. Cloud-Tagger laden Ihre Bilder auf ihre Server — prüfen Sie, ob das innerhalb der EU geschieht und ob die Dateien gespeichert oder gelöscht werden, was unter der DSGVO zählt.
• Tool wählen, das Ihre Formate liest — zu kalkulierbarem Preis. Prüfen Sie, ob es AVIF/SVG/HEIC unterstützt und ob diese Extra-Credits kosten.

9. Wie AutoAlt.ai mit modernen Formaten umgeht

AutoAlt.ai wurde für gemischte, moderne Kataloge gebaut. Es verarbeitet PNG, JPG, JPEG, WebP, GIF, SVG und AVIF, und jedes Bild zählt als 1 Credit unabhängig vom Format — kein 2×-Aufschlag für AVIF oder SVG, und Übersetzungen sind in diesem einen Credit enthalten. Im Upload-Flow können Sie die Generierung sogar auf bestimmte Formate beschränken, damit Sie nur für die Bilder zahlen, die zählen. Die gesamte Verarbeitung läuft auf EU-Servern in Deutschland, ohne Bildspeicherung.

Der Punkt ist nicht, dass Pauschalpreise immer am günstigsten pro Bild sind — sondern dass für einen formatvielfältigen E-Commerce-Katalog kalkulierbar besser ist als günstig-mit-Sternchen. Sie können Ihre gesamte Bibliothek taggen, AVIF und SVG inklusive, und wissen genau, was es kostet.

10. Häufige Fragen