Bilder entscheiden im E-Commerce oft binnen Sekundenbruchteilen über Kauf oder Absprung. Sie sind auf 73 % aller Mobile-Seiten und 83,3 % der Desktop-Seiten das LCP-Element (Web Almanac 2024) und damit der zentrale Hebel für Ihre Core Web Vitals. Gleichzeitig klicken laut Baymard Institute 56 % der Shop-Besucher zuerst in die Produktgalerie — noch vor Titel und Preis (Baymard Institute). In diesem Leitfaden zeigen wir, wie Sie mit modernen Formaten wie WebP und AVIF, sauberen Alt-Texten und durchdachten SEO-Strukturen schnellere Ladezeiten, bessere Rankings und eine höhere Conversion erreichen — ohne dabei Barrierefreiheit oder rechtliche Vorgaben zu vernachlässigen.
Warum Bilder über Ihr Ranking entscheiden
Bilder sind in modernen Online-Shops längst kein dekoratives Beiwerk mehr, sondern der wichtigste visuelle Verkaufshebel. Laut Web Almanac 2024 ist auf rund 73 % der mobilen und 83,3 % der Desktop-Seiten ein Bild das LCP-Element (Web Almanac 2024) — also genau das Element, an dem Google die wahrgenommene Ladezeit festmacht. Wer Produktbilder vernachlässigt, verliert damit nicht nur UX-Punkte, sondern direkt Rankings und Sichtbarkeit in der organischen Suche.
- Die Median-Seite lädt rund 18 Bilder auf Desktop und 16 auf Mobile, im 90. Perzentil sogar 60 bzw. 55 Bilder (HTTP Archive)
- Die Median-Seite überträgt aktuell 135 KB an größter Image-Payload, ein Plus von 8 % seit 2022 (HTTP Archive)
- Im Schnitt verursacht eine Pageview rund 0,36 g CO2e, wobei Bilder einen erheblichen Anteil tragen (Sustainable Web Design)
- 56 % der Besucher klicken auf Produktseiten zuerst in die Bildergalerie — vor Titel oder Preis (Baymard Institute)
- 93 % der Konsumenten nennen visuelle Produktdarstellung als zentralen Kauffaktor (Justuno)
Dazu kommt die wachsende Bedeutung der visuellen Suche. Über 10,1 % des gesamten Google-Traffics entfallen auf images.google.com, im Schnitt verzeichnen Google-Bilder rund 1 Milliarde Klicks pro Tag (Backlinko). Wer hier sichtbar ist, erschließt sich einen eigenständigen Akquisitionskanal — besonders für visuell starke Sortimente wie Mode, Interior, Deko oder Spielwaren. Eine saubere Bildstrategie ist damit nicht länger optional, sondern Pflicht im modernen E-Commerce-SEO.
Laut Photoroom-Report 2026 bezeichnen 87 % der Käufer Produktvisuals als wichtigsten Kauffaktor, und 71 % sehen Marketplace-Betreiber in der Verantwortung für eine hohe Bildqualität (Photoroom). Bessere Bilder wirken damit nicht nur auf den Customer Lifetime Value, sondern auch auf das Vertrauen in Ihre Marke.
WebP, AVIF und JPEG im direkten Vergleich
Die Formatwahl ist der größte Performance-Hebel für Shop-Bilder. JPEG bleibt der klassische Industrie-Standard, doch moderne Codecs liefern bei nahezu identischer Wahrnehmung deutlich kleinere Dateien. Die groß angelegte WebP-Kompressionsstudie von Google auf Basis von rund 1 Million Bildern zeigt, dass WebP im Mittel 25–34 % kleiner ist als vergleichbar qualitatives JPEG bei gleichem SSIM-Score (Google WebP Compression Study). Noch sparsamer arbeitet AVIF: Gegenüber JPEG erreicht AVIF bei identischer visueller Qualität rund 50 % kleinere Dateigrößen, gegenüber WebP noch einmal 20–30 % (SpeedVitals / Cloudinary).
| Format | Bit-per-Pixel | Typische Ersparnis vs. JPEG | Browser-Support 2025 | Ideal für |
|---|---|---|---|---|
| JPEG | 2,0 (HTTP Archive) | — (Referenz) | 100 % | Legacy-Produktfotos, Fallback |
| PNG | 3,8 (HTTP Archive) | größer als JPEG | 100 % | Logos, UI-Grafiken mit Transparenz |
| WebP | 1,3 (HTTP Archive) | 25–34 % kleiner (Google) | 95,29 % (caniuse) | Hauptformat für Produktbilder |
| AVIF | 1,4 (HTTP Archive) | ~50 % kleiner (Cloudinary) | 93,8 % (caniuse) | Hero-Bilder, große Visuals |
| GIF | 6,7 (HTTP Archive) | deutlich größer | 100 % | Animation vermeiden — besser MP4/WebM |
Die Zahlen zeigen eindeutig: JPEG ist mit 2,0 Bit pro Pixel fast doppelt so groß wie WebP (1,3) und AVIF (1,4) bei gleichem Inhalt (HTTP Archive). Für große Hero-Bilder, Kollektionsbanner oder Produktvideos-Thumbnails lohnt sich der Schritt zu AVIF besonders, weil dort absolute Byte-Einsparungen besonders groß ausfallen. Für Listen- und Thumbnail-Ansichten mit vielen kleinen Bildern liefert WebP oft die bessere Balance aus Dateigröße, Encoder-Geschwindigkeit und Caching-Effekten.
Der Adoption-Trend untermauert diese Empfehlung: Der Anteil von WebP an allen Web-Bildern ist zwischen 2022 und 2024 um 34 % auf rund 12 % gestiegen, während der JPEG-Anteil von 40 % auf 32,4 % fiel (HTTP Archive). AVIF startet noch von einem kleinen Sockel, verzeichnet aber mit +386 % Wachstum (von 0,3 % auf 1,0 %) den stärksten Zuwachs aller Bildformate (HTTP Archive). Wer seinen Shop heute auf AVIF vorbereitet, positioniert sich damit frühzeitig für den sich abzeichnenden Format-Shift.
Browser-Support 2026: Wer kann was?
Kein Format bringt Vorteile, wenn es im Browser nicht funktioniert. Die gute Nachricht: Der Browser-Support für moderne Formate ist 2026 praktisch flächendeckend. WebP erreicht global 95,29 % Abdeckung (caniuse.com), AVIF liegt bei 93,8 % (caniuse.com). Apple hat AVIF mit iOS 16 und macOS Ventura nachgezogen, sodass Safari heute AVIF genauso unterstützt wie Chrome, Firefox und Edge. Für Shops bedeutet das: Der sichere Einsatz beider Formate ist möglich, solange ein JPEG-Fallback für die verbleibenden wenigen Prozent alter Browser bereitsteht.
WebP: 95,29 % Support
Chrome, Firefox, Edge, Safari und Opera rendern WebP nativ. Alte Internet Explorer-Versionen und sehr seltene Mobile-Browser benötigen ein JPEG-Fallback (caniuse.com).
AVIF: 93,8 % Support
Seit iOS 16 und macOS Ventura ist AVIF in Safari verfügbar. In Kombination mit dem picture-Element decken Sie nahezu alle aktiven Nutzer ab (caniuse.com).
Fallback per picture-Tag
Über das picture-Element liefern Sie AVIF zuerst, dann WebP, dann JPEG. Der Browser wählt automatisch das beste Format, das er versteht — ohne JavaScript.
Trotz der guten Verfügbarkeit nutzen viele Shops die Möglichkeiten kaum aus: Laut HTTP Archive setzen nur 42 % der Websites das srcset-Attribut ein, srcset in Kombination mit sizes sogar nur 32 %, während das picture-Element lediglich auf 9,3 % der Seiten auftaucht (HTTP Archive). Das ist ein enormes, kaum ausgeschöpftes Performance-Potenzial — gerade für headless Commerce-Setups, die moderne Front-End-Komponenten einsetzen können.
Bilder optimieren ohne Qualitätsverlust
Formatwahl ist nur der erste Schritt. Entscheidend ist, dass Sie Bilder in der richtigen Dimension, mit korrektem Kompressionsgrad und sauberer Cache-Strategie ausliefern. Eine typische Falle in WooCommerce- oder Shopware-Shops: Produktfotos werden in voller Druckqualität hochgeladen und anschließend nur per CSS verkleinert. Der Browser lädt dann unnötig große Dateien — ein klassischer LCP-Killer.
Setzen Sie stattdessen auf responsive Bild-Ausspielung über srcset, sizes und das picture-Element. So wählt der Browser automatisch die passende Auflösung für jedes Endgerät und spart Traffic für kleine Displays. Ein gutes Beispiel für ein robustes Pattern, das AVIF, WebP und JPEG gleichzeitig kombiniert, sieht so aus:
<picture>
<source
type="image/avif"
srcset="/images/shoe-480.avif 480w,
/images/shoe-800.avif 800w,
/images/shoe-1200.avif 1200w,
/images/shoe-1600.avif 1600w"
sizes="(max-width: 600px) 92vw,
(max-width: 1024px) 50vw,
640px">
<source
type="image/webp"
srcset="/images/shoe-480.webp 480w,
/images/shoe-800.webp 800w,
/images/shoe-1200.webp 1200w,
/images/shoe-1600.webp 1600w"
sizes="(max-width: 600px) 92vw,
(max-width: 1024px) 50vw,
640px">
<img
src="/images/shoe-800.jpg"
srcset="/images/shoe-480.jpg 480w,
/images/shoe-800.jpg 800w,
/images/shoe-1200.jpg 1200w"
sizes="(max-width: 600px) 92vw,
(max-width: 1024px) 50vw,
640px"
width="1600"
height="1200"
loading="eager"
fetchpriority="high"
decoding="async"
alt="Beige Laufschuhe mit Mesh-Upper und schwarzer Sohle, Seitenansicht">
</picture>Wichtig ist die konsequente Angabe von width und height auf dem img-Element: Ohne diese Maße rechnet der Browser die Seitenhöhe erst nach dem Laden neu und provoziert Layoutsprünge, die Ihr CLS-Score direkt abstrafen wird. Ergänzend sollten Sie decoding="async" setzen, damit der Main-Thread nicht blockiert wird, und über fetchpriority="high" gezielt das LCP-Bild priorisieren.
Lazy Loading richtig einsetzen
Lazy Loading ist einer der wirkungsvollsten Hebel, um Shop-Seiten zu entlasten. Laut web.dev kann modernes Image-Loading die LCP um mehr als 70 % verbessern, wenn es richtig eingesetzt wird (web.dev). Die Logik ist simpel: Bilder außerhalb des sichtbaren Bereichs werden erst geladen, wenn der Nutzer in ihre Nähe scrollt. Das entlastet Bandbreite, CPU und Akku — und ist seit Chrome 76 über das native loading="lazy"-Attribut ohne Bibliothek möglich.
Der gleiche web.dev-Datensatz zeigt auch die Schattenseite: Wird das LCP-Bild fälschlich mit loading="lazy" markiert, verschlechtert sich der LCP spürbar. Im 75. Perzentil liegt der LCP bei falschem Lazy Loading bei 3.546 ms gegenüber 2.922 ms ohne Lazy Loading — das sind rund 600 ms Verlust pro Seitenaufruf (web.dev). Die Regel lautet deshalb: Alle Bilder oberhalb des ersten sichtbaren Viewports eager laden, den Rest lazy — und niemals pauschal loading="lazy" an jedes img-Tag hängen.
- Hero-Bild: stets
loading="eager"plusfetchpriority="high" - Produktbild oberhalb des Folds: eager laden, ebenfalls mit hoher Priorität
- Thumbnails in der Galerie unterhalb des Folds:
loading="lazy" - Bilder im Footer, Cross-Sell und Reviews:
loading="lazy"plusdecoding="async" - Hintergrundbilder per CSS: nur mit
image-set()und Media-Queries
Alt-Texte: Pflicht für SEO und BFSG
Alt-Texte sind der am meisten unterschätzte Hebel im Image SEO. Sie dienen zwei Zielen gleichzeitig: Sie helfen Screenreadern und damit der Barrierefreiheit, und sie geben Google den textlichen Kontext, der für Bild-Rankings notwendig ist. Google selbst gibt an, dass für das Web-Ranking vor allem die ersten rund 16 Wörter eines Alt-Textes bewertet werden, während in der Image Search bis zu 50 Wörter ausgewertet werden können (Google Search Central). Entsprechend wichtig ist es, Keyword und Motiv präzise im vorderen Bereich des Alt-Textes zu platzieren.
Dazu kommt die rechtliche Dimension: Seit dem 29.06.2025 gilt das BFSG ohne Übergangsfrist, und Verstoße können mit Bußgeldern von bis zu 100.000 € geahndet werden (BFSG-Gesetz / Bundesfachstelle für Barrierefreiheit). Fehlende oder nutzlose Alt-Texte sind einer der häufigsten BFSG-Audit-Befunde — und gleichzeitig mit wenig Aufwand zu beheben.
- Produktbild: Produktname + Farbe + Material + Ansicht (z.B. "Rote Lederhandtasche mit Gold-Verschluss, Frontansicht")
- Detailbild: beschreibt das konkrete Detail (z.B. "Nahaufnahme der Naht am Trageriemen")
- Lifestyle-Bild: Szene statt reine Nennung des Produkts (z.B. "Frau trägt rote Lederhandtasche am Marktplatz")
- Dekorative Grafiken: leeres
alt="", damit Screenreader sie überspringen - Keine Stopfen:
alt="Bild",alt="Produkt"oderalt="IMG_1234.jpg"sind schlechter als ein leeres Alt - Keine Keyword-Stopfung: natürliche Sprache schlägt Ankettung von SEO-Begriffen (Google Search Central)
Google nennt Bildplatzierung, Page Authority, Freshness und Bildqualität als offizielle Ranking-Signale für Bilder. EXIF-Daten gehören ausdrücklich nicht dazu (Google Search Central). Wer Bilder in WCAG 2.2-konforme Strukturen einbettet — also mit klarer Überschrift, umliegendem Fliesstext und Bildunterschrift — gibt dem Crawler genau die Kontext-Signale, die er für ein gutes Ranking braucht.
Image CDNs als Skalierungs-Hebel
Bei wachsendem Sortiment und mehr Traffic wird die manuelle Bildpflege zum Flaschenhals. Hier spielen Image CDNs ihre Stärken aus: Sie konvertieren Originalbilder on-the-fly in WebP oder AVIF, erzeugen automatisch verschiedene Größen für srcset und cachen das Ergebnis weltweit. Laut HTTP Archive werden bereits 54 % aller Web-Requests über CDN ausgeliefert, und bei den Top-1.000-Websites liegt die Quote sogar bei 71 % (HTTP Archive).
Ein Blick auf die Technik zeigt, wie effektiv solche Edge-Optimierungen sein können: Der CDN-Anbieter Cloudflare berichtet, dass sein Polish-Feature im Lossy-Modus die durchschnittliche Bilddateigröße um 48 % reduziert, im Lossless-Modus immerhin noch um 21 %. In Kombination mit WebP-Konvertierung spart Polish bei PNG-Dateien rund 26 % und bei JPEGs rund 17 % zusätzlich ein (Cloudflare). Solche Werte sind besonders für Marketplaces, Multistore-Setups und B2B-Sortimente mit hohem Bild-Volumen relevant.
Globale Edge-Zustellung
Bilder werden aus dem nächstgelegenen PoP ausgeliefert, das senkt die TTFB und verbessert den LCP für internationale Besucher.
Automatische Format-Negotiation
Das CDN erkennt per Accept-Header, welches Format der Browser unterstützt, und liefert AVIF, WebP oder JPEG ohne Entwickler-Aufwand aus.
Signierte URLs & Hotlink-Schutz
Viele CDNs verhindern Hotlinking und schützen vor ungewollter Traffic-Nutzung, was besonders für exklusive Produktbilder wichtig ist.
XICTRON integriert Image CDNs in der Regel gemeinsam mit der Hosting-Architektur des Shops, damit Caching, Security und Formatwahl zusammenpassen. So vermeiden Sie die typischen Fehler, bei denen sich Shop-Cache, CDN-Cache und Image CDN gegenseitig in die Quere kommen — ein Problem, das Express-Checkout-Flows besonders häufig trifft, weil dort LCP und Interaktivität eng verzahnt sind.
Schema.org ImageObject im Online-Shop
Structured Data ist kein Bonus mehr, sondern zentraler Bestandteil jeder ernstzunehmenden SEO-Strategie. Google empfiehlt explizit, Bilder über das ImageObject-Schema maschinenlesbar auszuzeichnen, und bevorzugt dabei JSON-LD (Google Search Central). Für Shops bedeutet das: Jedes Produktbild sollte Teil des Product-Schemas sein und gleichzeitig als eigenständiges ImageObject ausgezeichnet werden können.
{
"@context": "https://schema.org",
"@type": "Product",
"name": "Leichter Trailrunning-Schuh Summit Pro",
"description": "Trailrunning-Schuh mit Mesh-Upper, Vibram-Sohle und 8 mm Sprengung.",
"sku": "SP-2026-42",
"image": [
{
"@type": "ImageObject",
"contentUrl": "https://shop.example.com/images/summit-pro-1600.avif",
"thumbnailUrl": "https://shop.example.com/images/summit-pro-480.avif",
"width": 1600,
"height": 1200,
"caption": "Summit Pro Trailrunning-Schuh Seitenansicht",
"encodingFormat": "image/avif",
"creator": {
"@type": "Organization",
"name": "Shop Example"
},
"creditText": "Shop Example",
"copyrightNotice": "Copyright 2026 Shop Example",
"license": "https://shop.example.com/lizenz/"
}
],
"brand": {
"@type": "Brand",
"name": "Summit"
}
}Die zusätzlichen Felder creator, creditText, copyrightNotice und license sind für die Darstellung in Google Images relevant: Seit dem Rollout der Bildlizenz-Funktionen zeigt Google diese Informationen als Overlay an und macht Ihren Shop damit als Quelle sichtbar (Google Search Central). Für Shops, die stark auf Pinterest oder Visual-Search-Traffic setzen, ist das ein direkter Brand-Hebel — denn laut Sprout Social verzeichnet Pinterest 2025 rund 619 Millionen MAUs, mehr als 600 Millionen Visual Searches pro Monat und 80 % der Nutzer entdecken dort neue Produkte (Sprout Social).
Image SEO im Workflow verankern
Einmalige Optimierung reicht im wachsenden Shop nicht aus. Neue Produkte, saisonale Kampagnen und Creator-Content führen permanent dazu, dass neue Bilder ins System gelangen. Verankern Sie Image SEO daher als festen Bestandteil Ihres Redaktions- und Entwicklungs-Workflows — idealerweise in engem Schulterschluss mit Ihrer Content-Cluster-SEO-Strategie.
- Einheitliches Dateinamen-Schema definieren (z.B.
marke-produkt-variante-view.jpg) — sprechende Dateinamen sind eines der wenigen Kontextsignale, die Google ohne Alt-Text erhält. - Bild-Presets pro Verwendung anlegen: Hero, Produkt, Thumbnail, Zoom, OG-Image. So bleibt die Ausgabe konsistent.
- Upload-Pipeline mit automatischer Konvertierung in AVIF, WebP und JPEG aufsetzen — etwa im PIM, CMS oder Image CDN.
- Alt-Text als Pflichtfeld im Redaktions-Tool erzwingen, inkl. Hinweis auf die ersten 16 Wörter als SEO-Kern.
- Lighthouse- und CWV-Monitoring automatisieren — etwa täglich über CI/CD oder wöchentlich über ein Dashboard.
- Regressions-Budget festlegen: Keine Seite darf den Ziel-LCP nach einem Release verlassen — andernfalls blockt das Deployment.
- Quartalsweises Image-Audit durchführen: alte Bilder archivieren, verwaiste Thumbnails löschen, Metadaten nachpflegen.
Für Shops, die ihre Lighthouse-Score-Entwicklung verfolgen, ist wichtig zu wissen: Der LCP wird aktuell mit 25 % in den Lighthouse-Performance-Score eingerechnet (Chrome for Developers). Web.dev zeigt, dass Top-Sites ihre LCP-Werte bei rund 1.220 ms halten und damit fast ausschliesslich einen Score von 99 erzielen (web.dev). Wer seinen Shop konsequent auf moderne Bildformate und sauberes Lazy Loading umstellt, bewegt sich strukturell genau in diese Zone — mit spürbarem Effekt auf Sichtbarkeit, Conversion und Serverkosten.
Cloudflare verweist auf Amazon-Zahlen, wonach jede +100 ms Latenz rund 1 % Umsatz kostet, und auf Walmart-Messungen, die +1 % Conversion pro gesparter Sekunde zeigen (Cloudflare). Case Studies von CXL und Shopify belegen darüber hinaus: Uniqlo erzielte +7,2 % Conversion, als statt einem Produktbild drei angezeigt wurden, und Zalando verzeichnete +9 % Conversion nach einer Vergrößerung der Bildfläche (CXL / Shopify). Mehr und bessere Bilder lohnen sich damit doppelt: in den Rankings und an der Kasse.
Was XICTRON für Ihre Bild-Optimierung leistet
Als spezialisierte E-Commerce-Agentur aus Niedersachsen betrachten wir Bilder nicht isoliert, sondern als Teil der Gesamtarchitektur Ihres Shops. Wir prüfen die aktuelle Bildstruktur, identifizieren LCP-Killer, planen den Umstieg auf moderne Formate und verankern das Ganze in Ihrem Hosting — inklusive Caching, CDN-Anbindung und Monitoring. Gleichzeitig achten wir auf die Einhaltung der BFSG-Vorgaben, damit Alt-Texte und semantische Strukturen nicht nur SEO-wirksam, sondern auch rechtssicher sind. Unsere Entwicklungsteams setzen Bildoptimierung, srcset-Strategien und Schema.org-Markup direkt in Shopware-, WooCommerce- oder Headless-Commerce-Projekten um — damit Ihre Bilder endlich genau das tun, wofür sie da sind: verkaufen.
Dieser Artikel basiert auf Daten aus: Web Almanac 2024, HTTP Archive, Google WebP Compression Study, SpeedVitals, Cloudinary, caniuse.com, web.dev, Chrome for Developers, Google Search Central, BFSG-Gesetz / Bundesfachstelle für Barrierefreiheit, Backlinko, Cloudflare, Baymard Institute, Justuno, Photoroom, Sprout Social, CXL, Shopify sowie Sustainable Web Design. Die genannten Zahlen können je nach Erhebungszeitpunkt und Marktentwicklung variieren.
AVIF liefert zwar die beste Kompression, aber ein JPEG- oder WebP-Fallback über das picture-Element ist aktuell weiterhin empfehlenswert. So decken Sie auch die verbleibenden Browser ohne AVIF-Support ab (caniuse.com). Typischerweise nutzen wir AVIF für Hero- und Produktbilder und WebP für Thumbnails als ausgewogene Kombination.
Als Richtwert gilt: Die wichtigsten Informationen — Produktname, Farbe, Material, Ansicht — gehören in die ersten rund 16 Wörter, weil Google vor allem diesen Bereich für das Web-Ranking berücksichtigt (Google Search Central). Für die Image Search können bis zu 50 Wörter helfen, sofern die Sprache natürlich bleibt und keine Keyword-Stopfung betrieben wird.
In der Regel lohnt sich eine automatisierte Migration über das Image CDN oder die Shop-Media-Pipeline, damit alle Bilder einheitlich optimiert ausgeliefert werden. Neue Bilder werden dann im gleichen Workflow erzeugt. Erfahrungsgemäß holen Sie so die größten LCP-Gewinne heraus, gerade wenn ältere Produktlisten stark besucht werden.
Ja, auch Google Shopping-Feeds profitieren von qualitativ hochwertigen Bildern, klaren Motiven und sauberer Auflösung. Baymard weist darauf hin, dass rund 25 % der Shops eine unzureichende Auflösung oder fehlende Zoom-Funktion aufweisen (Baymard Institute). Wer das in Feeds und im Shop behebt, profitiert in beiden Kanälen.
Die wichtigste Regel: Das LCP-Bild darf niemals loading="lazy" erhalten, sondern sollte mit fetchpriority="high" eager geladen werden. web.dev zeigt, dass falsch gesetztes Lazy Loading den LCP im 75. Perzentil typischerweise von 2.922 ms auf 3.546 ms erhöht (web.dev). Eine strikte Regel in Template-Systemen und ein CWV-Monitoring helfen, diesen Fehler zu vermeiden.
In vielen Fällen ja. Laut HTTP Archive werden bereits 54 % aller Webrequests über CDN ausgeliefert (HTTP Archive). Ein Image CDN übernimmt Format-Negotiation, Caching und Größenanpassung automatisch und entlastet so insbesondere kleine Teams. Der Effekt auf LCP und Serverkosten ist meist bereits ab mittlerem Traffic spürbar — und damit schneller amortisiert, als viele vermuten.