Wenn ich die Ladezeit einer Website analysiere, landen wir sehr oft bei den Bildern. Ein einziges unbearbeitetes Foto vom Smartphone kann mehrere Megabyte groß sein – mehr als der ganze Rest der Seite zusammen. Dabei braucht kein Besucher ein Bild in voller Kameraauflösung.
Das richtige Format
WebP ist heute das Format der Wahl für Fotos und Grafiken im Web. Bei gleicher sichtbarer Qualität sind die Dateien meist deutlich kleiner als JPEG oder PNG, und alle aktuellen Browser unterstützen es. WordPress kann beim Hochladen WebP-Varianten erzeugen – das stellt man im Theme ein oder erledigt es mit einem Plugin.
- Fotos: WebP (oder JPEG)
- Logos, Symbole, Grafiken: SVG – gestochen scharf in jeder Größe und meist winzig
- Screenshots mit Text: WebP oder PNG
Die passende Größe mit srcset
Ein Bild, das auf dem Handy 360 Pixel breit angezeigt wird, muss nicht in 2000 Pixeln geladen werden. Mit srcset und sizes bietet die Seite mehrere Größen an, und der Browser wählt die passende – abhängig von Bildschirmbreite und Pixeldichte. WordPress erzeugt diese Größen beim Hochladen automatisch, wenn das Theme sie sinnvoll definiert.
Tipp: Laden Sie Bilder nicht riesig hoch. Für die allermeisten Websites reichen 2000 Pixel an der langen Seite völlig aus.
Lazy Loading – aber richtig
Bilder weiter unten auf der Seite müssen nicht sofort geladen werden. Mit loading="lazy" holt der Browser sie erst, wenn sie in die Nähe des sichtbaren Bereichs kommen. Das spart Daten und beschleunigt den Seitenaufbau.
Ein häufiger Fehler: Auch das große Titelbild ganz oben wird „lazy“ geladen. Genau dieses Bild bestimmt aber oft den LCP-Wert – es sollte im Gegenteil mit fetchpriority="high" bevorzugt geladen werden.
Feste Seitenverhältnisse gegen Springen
Wenn ein Bild ohne Breite und Höhe eingebunden ist, weiß der Browser nicht, wie viel Platz er freihalten soll. Sobald das Bild da ist, rutscht der Text nach unten. Mit width– und height-Angaben oder einem festen Seitenverhältnis per CSS reserviert der Browser den Platz von Anfang an – und die Seite bleibt ruhig.
Alternativtext nicht vergessen
Ein guter Alt-Text beschreibt, was auf dem Bild zu sehen ist und warum es dort steht. Er hilft Menschen, die Bilder nicht sehen können, und Suchmaschinen beim Verstehen der Seite. Rein dekorative Bilder bekommen dagegen einen leeren Alt-Text, damit Screenreader sie überspringen.
Checkliste
- Fotos als WebP, Grafiken als SVG
- passende Größen über srcset, keine Riesenbilder
- Lazy Loading für alles unterhalb des sichtbaren Bereichs
- Titelbild bevorzugt laden
- Breite und Höhe immer angeben
- aussagekräftige Alt-Texte
Sie möchten wissen, wie viel Ladezeit in Ihren Bildern steckt? Auf der Seite SEO & Web-Vitals zeige ich, wie ich Seiten schneller mache.
