Bildoptimierung im Web: wie du Kilobyte sparst und das SEO deiner Seite verbesserst

Warum Bilder deine Core Web Vitals entscheiden

Die Core Web Vitals bestehen aus drei Metriken, und Bilder sind an allen dreien beteiligt. Largest Contentful Paint misst, wie lange das größte sichtbare Element zum Erscheinen braucht — bei einem Artikel das Titelbild, bei einer Produktseite das Hauptfoto. Cumulative Layout Shift misst unerwartete Bewegung, und die klassische Ursache ist ein Bild ohne angegebene Maße, das den Text nach unten schiebt, sobald es geladen ist. Interaction to Next Paint misst die Reaktionsfähigkeit; das ist zwar vor allem eine JavaScript-Frage, aber das Dekodieren eines Stapels überdimensionierter Bilder beansprucht exakt denselben Haupt-Thread.

Was Google tatsächlich belohnt

Hier lohnt Genauigkeit, denn das Thema zieht viel Übertreibung an. Page Experience ist kein starker Rankingfaktor, und eine schnelle Seite überholt keine relevantere. Was Geschwindigkeit bewirkt: Sie unterscheidet Ergebnisse vergleichbarer Relevanz und — weit folgenreicher — sie bestimmt, wie viele der Klickenden auch bleiben. Drei Sekunden Wartezeit bis zum Hauptbild erzeugen messbare Absprünge, und Absprünge sind ein Signal, das keine algorithmische Feinheit braucht, um zu schaden.

Felddaten, nicht dein Notebook

Die in der Suche verwendeten Core Web Vitals stammen aus dem Chrome User Experience Report: echte Messungen echter Chrome-Nutzer. Lighthouse, das im kontrollierten Labor auf deiner Maschine läuft, ist ein Diagnosewerkzeug, nicht die zählende Note. Eine Seite kann 98 in Lighthouse erreichen und trotzdem in den Felddaten durchfallen, weil die echten Besucher Android-Mittelklasse in überlasteten Mobilfunknetzen nutzen. Optimiere für diese Person, und der Laborwert folgt von selbst.

Die vier Hebel, nach Wirkung sortiert

Fast das gesamte Bildgewicht geht auf vier Entscheidungen zurück. Sie stehen hier in der Reihenfolge, die pro Minute Aufwand die meisten Kilobyte zurückgibt — was nicht die Reihenfolge der meisten Anleitungen ist.

1. Hör auf, Pixel auszuliefern, die niemand sieht

Das ist der große Hebel, und er ist fast immer vorhanden. Ein Foto direkt aus dem Handy hat 4000 × 3000 Pixel. In einer 800 Pixel breiten Inhaltsspalte dargestellt braucht es selbst bei einem 2×-Retina-Display 1600 Pixel Breite. Die übrigen 2400 werden geladen, dekodiert und weggeworfen: rund 84 % der Pixeldaten verschwendet, noch bevor über Kompression gesprochen wird. Kein Format und keine Qualitätsstufe holt das zurück; Verkleinern schon — und es ist die wirksamste verfügbare Änderung.

2. Nimm ein modernes Format

WebP liefert typischerweise 25–35 % kleinere Dateien als ein JPEG gleicher optischer Qualität und wird von jedem gebräuchlichen Browser unterstützt. AVIF geht weiter — oft 40–50 % kleiner als JPEG — bei inzwischen breiter, aber nicht universeller Unterstützung, was es zu einer progressiven Verbesserung statt zu einem Komplettersatz macht. Keines von beiden zwingt dich, JPEG aufzugeben: Über ein picture-Element ausgeliefert nehmen moderne Browser die kleinere Datei, ältere greifen auf die Alternative zurück.

3. Stelle die Qualität pro Bild ein, nicht pro Website

Qualitätsstufen sind im wahrgenommenen Wert nicht linear. Bei den meisten Fotos ist JPEG-Qualität 75–82 oder WebP 75–80 in normaler Betrachtungsgröße nicht vom Original zu unterscheiden, während Qualität 95 zwei- bis dreimal so viele Bytes für einen Unterschied kostet, den niemand sieht. Ausnahmen sind Bilder mit großen Flächen, harten Kanten oder Text: Screenshots, Logos und Diagramme zeigen Artefakte weit früher und brauchen eine höhere Stufe oder ein verlustfreies Format.

4. Lade sie in der richtigen Reihenfolge

Die verbleibenden Gewinne sind eine Frage der Reihenfolge, nicht der Größe. Das Titelbild muss sofort gefunden und geladen werden; alles unterhalb des sichtbaren Bereichs darf warten. Das umzudrehen — Lazy Loading auf das LCP-Bild anzuwenden ist ein wirklich verbreiteter Fehler — kann eine Sekunde LCP kosten, selbst wenn die Bilder ansonsten perfekt optimiert sind.

Formate: die Kurzfassung

• AVIF — die kleinsten Dateien bei fotografischem Inhalt, hervorragend bei niedrigen Bitraten, langsamer zu kodieren. Als erste Quelle in einem picture-Element einsetzen.
• WebP — die vernünftige Standardwahl 2026. Universell unterstützt, spürbar kleiner als JPEG, beherrscht auch Transparenz und Animation.
• JPEG — der Rückfall, der immer funktioniert. Für Fotos in Ordnung; nie für Screenshots, Logos oder irgendetwas mit Text.
• PNG — verlustfrei, für Flächen, harte Kanten und Transparenz. Richtig für Logos und Oberflächen-Screenshots, verschwenderisch für Fotos.
• SVG — vektorbasiert, also auflösungsunabhängig und meist winzig. Die richtige Antwort für Logos, Icons und einfache Diagramme; entferne vor der Veröffentlichung die Editor-Metadaten, sie verdoppeln die Datei oft.

Das Markup, das die Arbeit abschließt

Optimierte Dateien müssen auch richtig angefordert werden. Fünf Attribute erledigen den Großteil, und keines davon braucht einen Build-Schritt.

• Setze immer width und height. Der Browser reserviert den richtigen Platz, bevor das Bild eintrifft, und der Layoutsprung entfällt. CSS mit aspect-ratio hält es responsiv; die Attribute bleiben trotzdem Pflicht.
• loading="lazy" für alles unterhalb des sichtbaren Bereichs. Nativ, ein Attribut, keine Bibliothek. Es verschiebt Anfragen für Bilder, zu denen die Besucherin vielleicht nie scrollt.
• Niemals das LCP-Bild lazy laden. Gib dem Titelbild stattdessen fetchpriority="high" und sorge dafür, dass es im initialen HTML steht und nicht per Skript eingefügt wird.
• Nutze srcset und sizes für responsive Bilder. Ein Handy sollte nicht die Desktop-Datei laden. Drei oder vier Breiten decken fast jedes Layout ab.
• Schreib echten Alternativtext. Das ist zuerst eine Anforderung der Barrierefreiheit und erst danach ein SEO-Signal: Beschreibe, was das Bild vermittelt, keine Stichwortliste. Dekorative Bilder bekommen ein leeres alt-Attribut, damit Screenreader sie überspringen.

Dateinamen und Kontext zählen ebenfalls

Für die Bildersuche identifizieren Dateiname, Alternativtext, Bildunterschrift und umgebender Absatz das Bild. „esstisch-eiche-140cm.webp“ sagt einem Crawler etwas; „IMG_20260714_113255.webp“ sagt ihm nichts. Das kostet weder Bytes noch Zeit — und ist der Teil des Bild-SEO, der am häufigsten komplett ausgelassen wird.

Budgets, die sich lohnen

• Titelbild / LCP: unter 200 KB. Dieses Bild entscheidet deinen LCP. Behandle die Zahl als harte Grenze.
• Bilder im Artikel: unter 100 KB je Bild. Mit 1200–1600 Pixeln Breite in WebP ist das für die meisten Fotos bequem erreichbar.
• Vorschaubilder und Avatare: unter 30 KB. Wiegt ein 150-Pixel-Thumbnail 400 KB, ist es ein Bild in Originalgröße, das der Browser herunterskaliert.
• Alle Bilder einer Seite: unter 1 MB insgesamt. Darüber springen mobile Besucher mit langsamer Verbindung ab, bevor die Seite nutzbar ist.

Die Veränderung messen

1. 1 Halte den Ausgangszustand fest: PageSpeed Insights für die URL, mit Laborwert und Felddaten, falls die Seite genug Traffic für welche hat.
2. 2 Öffne die Entwicklerwerkzeuge, filtere das Netzwerk-Panel auf Bilder und sortiere nach Größe. Die drei größten Dateien sind deine Arbeitsliste.
3. 3 Behebe genau diese drei: auf die Anzeigegröße verkleinern, nach WebP konvertieren, komprimieren und das Ergebnis in voller Größe prüfen.
4. 4 Miss sofort erneut im Labor und warte dann 28 Tage, bis die Felddaten die Änderung abbilden: CrUX berichtet über ein gleitendes 28-Tage-Fenster, über Nacht bewegt sich nichts.
5. 5 Nimm die obigen Budgets in deine Veröffentlichungs-Checkliste auf, damit der Gewinn beim nächsten Bilderschwung nicht wieder verfällt.

Warum ein Workflow im Browser hier passt

Bildoptimierung ist wiederholte Stapelarbeit, die keinen Server braucht: Verkleinern und Neukodieren ist genau das, wofür Canvas API und Web Workers gemacht sind. Lokal bedeutet: keine Upload-Wartezeit bei fünfzig Fotos, keine Warteschlange, keine Größenbeschränkung und keine Kopien unveröffentlichter Produktbilder im temporären Speicher eines Dritten. Es bedeutet außerdem, dass du den ganzen Vorgang im Zug ohne Empfang durchziehen kannst — was öfter nützlich ist, als es klingt.