Bilder sind auf einer Webseite meist mit Abstand das Schwerste, was sie zum am schnellsten zu behebenden Problem macht. Unten voreingestellt auf WebP bei 1920px — die Kombination, die für die meisten Seiten passt.
Voreingestellt auf WebP, eingepasst in 1920px — sinnvolle Standardwerte für die meisten Websites.
Auf einer typischen Content-Seite machen Bilder den Großteil des gesamten Seitengewichts aus — regelmäßig mehr als Skripte, Stylesheets, Schriften und Markup zusammen.
Das macht sie ungewöhnlich lohnend zu optimieren. Dein JavaScript zu halbieren ist ein ernstes Engineering-Projekt. Dein Bildgewicht um 70 % zu reduzieren ist ein Nachmittag, ändert keinen Code und birgt kein Risiko, irgendetwas kaputtzumachen.
Largest Contentful Paint ist die Kennzahl, die Bilder am direktesten beeinflussen, und auf den meisten Seiten ist das größte inhaltstragende Element ein Bild. LCP ist ein Rankingsignal und wird an echten Besuchern gemessen, nicht im Labor — ein Hero-Bild, das auf einem Mittelklasse-Handy vier Sekunden braucht, schadet dir also unabhängig davon, wie schnell es sich auf deinem Laptop anfühlt.
Cumulative Layout Shift hat nichts mit Gewicht zu tun, lohnt sich aber, gleich mit zu beheben: Setze immer width- und height-Attribute auf deine <img>-Tags, damit der Browser den Platz reserviert, bevor das Bild ankommt.
loading="lazy" auf jedem Bild außer dem Hero.Komprimierung hilft nur, wenn der Browser die kleine Datei auch wirklich bekommt. Zwei Dinge, die du nach dem Optimieren prüfen solltest.
Erstens: Stell sicher, dass dein CMS nicht seine eigenen Versionen aus dem Original neu erzeugt und stattdessen die ausliefert — viele tun das, ohne es zu zeigen. Lade die komprimierte Datei als Quelle hoch, nicht das Kamera-Original.
Zweitens: Setze eine lange Cache-Lebensdauer für Bild-URLs, damit wiederkehrende Besucher sie nicht erneut herunterladen. Ein perfekt komprimiertes Bild, das bei jedem Seitenaufruf neu geladen wird, ist immer noch verschwendete Bandbreite.
WebP für fast alles — es ist bei gleicher Qualität 25–35 % kleiner als JPEG und wird von jedem aktuellen Browser unterstützt. Behalte PNG nur, wo du verlustfreie Grafik oder Transparenz brauchst und WebP nicht nutzen kannst.
Eine Qualitätsstufe um 75 kombiniert mit Verkleinern auf die dargestellte Größe ergibt die beste Balance. Verkleinern zählt mehr als die Qualitätszahl — die meisten Bilder werden weit größer ausgeliefert, als sie je dargestellt werden.
Indirekt, aber spürbar. Largest Contentful Paint ist ein Rankingsignal und wird meist von einem Bild bestimmt, leichtere Bilder verbessern also eine Kennzahl, die Google an echten Besuchern misst.
1920px Breite für vollbreite Hero-Bilder, 1200px für Bilder in einer Artikelspalte und 800px oder weniger für Vorschaubilder. Alles Größere auszuliefern verschickt Daten, die nie dargestellt werden.