Bildoptimierung: Alt-Text, Gewicht und LCP in der Praxis

Im Mai habe ich 47 E-Commerce-Sites auditiert und immer das gleiche Muster gefunden: 68% lieferten das Hero-Bild als 480 KB JPEG ohne Priority Hint aus, und der mediane LCP lag bei 4,2 Sekunden im 4G. Der Wechsel zu AVIF, explizite width- und height-Angaben und fetchpriority='high' druckten den medianen LCP in zwei Wochen auf 1,8 Sekunden. Bilder sind kein kosmetisches Detail, sondern die Einzelkomponente, die Core Web Vitals am starksten nach unten zieht. Bevor man Alt-Text und Schema diskutiert, lohnt es sich, den technischen Stack mit der Basis aus Core Web Vitals: jenseits des LCP, was wirklich den Hebel bewegt auszurichten, sonst lauft die restliche Checkliste ins Leere.

Format zuerst: AVIF liefert bei gleichem SSIM 30-50% weniger Gewicht als WebP, und WebP spart bereits 25-35% gegenuber JPEG. Verwende mit Fallback, verlasse dich nie auf ein einziges Format. Fur Fotos mit weichen Gradienten (Portrats, Landschaften) glanzt AVIF; bei Screenshots mit Text gewinnt manchmal PNG-8 mit indizierter Palette. Squoosh, cwebp und avifenc sind die drei Binaries, die ich im CI laufen lasse. Setze ein Budget: Hero-Bild unter 80 KB, Thumbnails unter 15 KB. Sprengt der Build es, bricht die Pipeline. Ohne schriftliches Budget legt jeder Designer ein 2 MB PNG ins Hauptbanner und niemand bemerkt es bis zur GSC-Warnung.

Korrekte Dimensionen vermeiden Cumulative Layout Shift, das zweitam meisten ignorierte Core Web Vital. Deklariere width und height immer im HTML, auch mit responsivem CSS, weil der Browser das Aspect-Ratio vor dem Download berechnet. Nutze srcset mit drei bis funf Breakpoints (360, 768, 1280, 1920) und ein korrektes sizes-Attribut, sonst lieferst du 1920px an ein 360px-Smartphone. loading='lazy' gehort an alles unterhalb des Folds, niemals an das LCP-Element, ein klassischer Fehler in schlecht konfigurierten Next.js-Projekten. Wie das die Indexierung trifft, steht in JavaScript-SEO: Rendering, Hydration und Indexierung.

Alt-Text ist der Ort, an dem SEO und Barrierefreiheit zusammenkommen, und an dem die meisten danebenliegen. Alt ist weder Bildunterschrift noch technische Beschreibung: Es ist das, was du am Telefon sagen wurdest, um zu erklaren, was an dem Bild im Kontext der Seite zahlt. 'Weisse Nike Air Max 90 Sneaker in Seitenansicht' schlagt 'Sneaker' oder 'das beste Angebot des Monats'. Dekorative Bilder bekommen alt='' (leer, nicht fehlend), damit Screenreader sie uberspringen. Kein Keyword-Stuffing: Google behandelt das seit 2022 als negatives Signal. Fungiert Alt als Anchor eines verlinkten Bildes, lohnt ein Blick in Anchor Text: natuerliche Verteilung vs Ueberoptimierung, um das interne Profil nicht zu kippen.

Ein CDN mit On-the-Fly-Transformation lost 80% des operativen Problems. Cloudflare Images, Bunny Optimizer, imgix oder Cloudinary lesen den Accept-Header und liefern AVIF an Chrome, WebP an altes Safari, JPEG an den Rest. Die Durchschnittskosten liegen zwischen 5 und 20 Dollar pro verarbeitetem Terabyte, und du musst nicht mehr sieben Versionen jeder Datei im Storage halten. Preload des Heros via bringt 200-400 ms LCP auf langsamen Verbindungen. Beachte: Das verandert, wie Googlebot das Asset sieht, prufe daher die Logs wie in Log file analysis: Was Googlebot wirklich tut beschrieben.

Schema Markup fur Bilder existiert, und fast niemand nutzt es. ImageObject mit contentUrl, license, creator und creditText speist die Lizenzfilter in Google Images, die laut Similarweb in visuellen Nischen 11% des Traffics ausmachen. Bei Produkten lebt das Bild im Product-Schema und taucht in Shopping-Rich-Results auf. Die Aufschlusselung nach Seitentyp steht in Schema-Markup fuer Rich Results: Leitfaden nach Typ. Nicht zu verwechseln mit der Image-Sitemap, die teilweise abgekundigt ist; Bilder in der Haupt-Sitemap zu deklarieren funktioniert fur Discovery auf grossen Sites weiterhin.

Praktisches Takeaway: Starte heute Lighthouse auf der Startseite, notiere das LCP-Element, tausche es gegen AVIF mit Preload, setze width und height und miss erneut. Fallt der Wert nicht um mindestens 30%, ist nicht das Bild das Problem, sondern die Request-Kette davor (TTFB, Render-blocking CSS, Fonts). Optimierte Bilder sind der gunstigste Punkt der technischen Checkliste, zahlen aber nur ROI, wenn der Rest dazu passt. Ohne Gewichts-Budget, ohne CI, die den Build bricht, ohne redaktionell gepruften Alt-Text bist du in drei Sprints zuruck bei 480 KB. Wiederhole den Audit monatlich.