Ratgeber

Die Bilder Ihrer Website optimieren, damit sie schnell lädt

Bilder machen die Hälfte des Gewichts einer durchschnittlichen Website aus. Vier Entscheidungen, kein Redesign, und die Seite wird 40 bis 70 % leichter.

Auf einer durchschnittlichen Website machen Bilder 50 bis 70 % von allem aus, was der Browser herunterlädt. Wenn Ihre Seite langsam ist, liegt es fast immer daran und nicht am Code. Die gute Nachricht: Das zu beheben verlangt keine Entwicklerkenntnisse – vier gut getroffene Entscheidungen lösen den größten Teil.

1. Liefern Sie die Größe aus, die wirklich angezeigt wird

Fehler Nummer eins ist, das Foto so hochzuladen, wie es aus der Kamera kam. Ein 4032 px breites Bild in einer 760 px breiten Spalte lädt fünfmal mehr Daten als nötig. Bevor Sie etwas hochladen, schauen Sie sich die tatsächliche Breite des Platzes an und verkleinern Sie auf diese Breite – oder auf das Doppelte, wenn es auf hochauflösenden Bildschirmen scharf bleiben soll.

Werte, die mit den meisten Vorlagen gut funktionieren:

• Bild über die volle Breite (Kopfbild): 1920 px.
• Bild in einem Artikel: 1280 px.
• Karte oder Liste: 800 px.
• Miniaturbild: 400 px.
• Profilbild: 200 px.

2. Nutzen Sie WebP

Bei gleicher wahrgenommener Qualität wiegt WebP 25 bis 35 % weniger als JPG, und alle heute genutzten Browser verstehen es. Die Bilder einer Website nach WebP umzuwandeln ist mit Abstand die Verbesserung mit dem besten Verhältnis von Aufwand zu Wirkung: Sie ändern nichts am Design, fassen keinen Code an, und die Seite verliert ein Drittel ihres Gewichts.

Wenn Ihr Redaktionssystem nicht selbst umwandelt, können Sie vor dem Hochladen stapelweise nach WebP umwandeln.

3. Verzögertes Laden für alles, was nicht sichtbar ist

Bilder unterhalb des ersten Bildschirms müssen erst geladen werden, wenn der Besucher dort ankommt. Ein Attribut genügt:

<img src="foto.webp" alt="…" loading="lazy" decoding="async">

Mit einer wichtigen Ausnahme: Das Hauptbild des ersten Bildschirms darf KEIN loading="lazy" tragen. Genau dieses soll so früh wie möglich ankommen, denn es ist in der Regel das, was Google als Largest Contentful Paint misst. Geben Sie ihm stattdessen fetchpriority="high".

4. Reservieren Sie den Platz, damit die Seite nicht springt

Wenn ein Bild seine Maße nicht angibt, weiß der Browser nicht, wie viel Platz er lassen soll, und der Inhalt springt, sobald das Laden fertig ist. Dieses Springen wird gemessen (Cumulative Layout Shift) und kostet Sie Punkte. Die Lösung ist eine Zeile: Setzen Sie immer width und height am Tag, mit den echten Werten der Datei. Das CSS darf das Bild weiterhin skalieren; entscheidend ist, dass der Browser das Seitenverhältnis vom ersten Moment an kennt.

Die drei Werte, auf die Google schaut

Ein Arbeitsablauf zum Wiederholen

1. Sammeln Sie alle Bilder, die Sie hochladen wollen, in einem Ordner.
2. Verkleinern Sie sie stapelweise auf die Breite aus der Tabelle oben.
3. Wandeln Sie sie mit Qualität 78–82 nach WebP um.
4. Benennen Sie sie mit beschreibenden Wörtern und Bindestrichen: laufschuh-blau.webp, nicht IMG_4821.webp. Der Dateiname ist ein echtes Signal für die Bildersuche.
5. Laden Sie sie hoch und schreiben Sie ein alt, das das Bild für alle beschreibt, die es nicht sehen können. Das ist keine Stichwortfüllung, sondern Barrierefreiheit – und ganz nebenbei gut fürs Ranking.

Die Schritte 2 und 3 erledigen Sie in einem Durchgang im Kompressor: maximale Größe wählen, WebP als Ausgabeformat, eine Qualitätsstufe setzen, dreißig Bilder ablegen und das ZIP herunterladen.

Was man erwarten darf

Auf echten Websites macht die Umsetzung dieser vier Punkte die Seite üblicherweise 40 bis 70 % leichter. Eine Startseite, die 4 MB wog, fällt auf 1,2 MB, und die Zeit bis zum ersten sichtbaren Inhalt halbiert sich bei mobilen Verbindungen. Ein Redesign ist dafür nicht nötig: Es ist reine Vorbereitung der Dateien.