Ein Foto direkt aus der Kamera oder vom Handy hat oft 4.000 Pixel Breite und mehrere Megabyte. Auf der Website wird es vielleicht 1.200 Pixel breit angezeigt. Trotzdem lädt jeder Besucher die volle Datei, auch unterwegs über das Handynetz.
Bilder sind auf vielen Websites der größte Teil der Datenmenge. Und sehr oft ist das große Bild ganz oben der Grund für einen schlechten LCP-Wert bei PageSpeed Insights. Die gute Nachricht ist, dass sich kaum etwas so leicht verbessern lässt.
Warum Bildgröße so viel ausmacht
Ein Bild, das doppelt so breit ist wie nötig, hat ungefähr die vierfache Pixelzahl. Entsprechend größer ist die Datei. Wer ein 4.000-Pixel-Foto hochlädt, um es in 1.000 Pixeln zu zeigen, lädt also ein Vielfaches dessen, was der Bildschirm überhaupt darstellen kann.
Dazu kommt das Format. JPG stammt aus den Neunzigern. Neuere Formate speichern dasselbe Bild bei gleicher Qualität deutlich kleiner.
WebP und AVIF kurz erklärt
WebP
WebP hat Google 2010 vorgestellt. Es kann Fotos verlustbehaftet speichern wie JPG und Grafiken verlustfrei wie PNG, unterstützt Transparenz und sogar Animationen. Laut einer Studie von Google (öffnet in neuem Tab) sind verlustbehaftete WebP-Bilder bei vergleichbarer Qualität 25 bis 34 Prozent kleiner als JPG. Alle aktuellen Browser zeigen WebP an.
AVIF
AVIF beruht auf dem Videoformat AV1 und wurde 2019 veröffentlicht. Bei Fotos ist es oft noch kleiner als WebP, besonders bei Flächen mit sanften Farbverläufen. Chrome, Firefox, Edge und Safari unterstützen AVIF inzwischen ebenfalls. Der Nachteil ist, dass das Erstellen länger dauert. Für Website-Betreiber ist das egal, wenn das System es automatisch übernimmt.
Welches Format wofür
- Fotos: AVIF oder WebP
- Screenshots und Grafiken mit Text: WebP verlustfrei oder PNG
- Logos und Icons: SVG, das bleibt bei jeder Größe scharf und ist meist winzig
- Animationen: kurze Videos statt GIF, die sind um ein Vielfaches kleiner
Bilder komprimieren in drei Schritten
1. Auf die richtige Größe bringen
Überleg, wie breit das Bild auf der Seite maximal angezeigt wird. Als Richtwert reichen für ein Bild über die volle Breite 1.600 bis 2.000 Pixel, für Bilder im Text etwa 1.200 Pixel. Auf hochauflösenden Bildschirmen darf es etwas mehr sein, aber selten mehr als das Doppelte der angezeigten Breite.
2. Das Format wählen
Speichere Fotos als WebP oder AVIF. Wenn dein System beides kann, ist AVIF mit WebP als Ersatz ideal.
3. Die Qualität einstellen
Eine Qualität um 75 bis 80 ist für Fotos meist ein guter Kompromiss. Den Unterschied zum Original sieht man am Bildschirm kaum, die Datei wird aber deutlich kleiner. Vergleiche beide Versionen nebeneinander und geh so weit herunter, bis du einen Unterschied siehst, dann wieder eine Stufe hoch.
Als grobe Orientierung sollte ein großes Foto danach deutlich unter 300 KB liegen, ein Bild im Text oft unter 150 KB.
Werkzeuge zum Komprimieren
- Squoosh: Ein kostenloses Werkzeug von Google unter squoosh.app (öffnet in neuem Tab). Läuft im Browser, verarbeitet die Bilder auf deinem Gerät und zeigt Original und Ergebnis mit einem Schieberegler nebeneinander.
- Bildprogramme: GIMP, Affinity Photo und Photoshop können WebP speichern, neuere Versionen auch AVIF.
- Online-Dienste: Viele Websites komprimieren Bilder kostenlos. Dabei lädst du die Bilder auf fremde Server hoch. Für Fotos mit erkennbaren Personen oder vertraulichen Inhalten ist ein Werkzeug, das lokal arbeitet, die bessere Wahl.
Was dein Website-System übernehmen sollte
Am besten musst du dich gar nicht um jedes Bild einzeln kümmern. Gute Systeme erledigen das automatisch:
- Passende Größen: Die Website erzeugt aus einem hochgeladenen Bild mehrere Größen und liefert jedem Gerät die passende aus. Im Code heißt das srcset.
- Moderne Formate: Das System wandelt Bilder beim Ausliefern in WebP oder AVIF um, je nachdem, was der Browser kann.
- Feste Seitenverhältnisse: Breite und Höhe stehen im Code, damit nichts springt, wenn das Bild lädt. Das verbessert den CLS.
Sanity, das Redaktionssystem hinter meinen Websites, liefert Bilder automatisch in passender Größe und modernem Format aus. Webflow kann Bilder im Asset-Bereich in WebP oder AVIF umwandeln. WordPress unterstützt WebP und AVIF, das automatische Umwandeln übernehmen dort meist Plugins.
Lazy Loading richtig einsetzen
Lazy Loading heißt, dass ein Bild erst geladen wird, wenn es bald in den sichtbaren Bereich scrollt. Moderne Browser können das von selbst, mit dem Attribut loading="lazy" im Bild-Code. So lädt die Seite am Anfang weniger Daten.
Eine Ausnahme ist wichtig. Das große Bild ganz oben gehört nicht dazu. Wird es verzögert geladen, erscheint es später, und der LCP wird schlechter statt besser. Dieses Bild sollte sofort und mit hoher Priorität laden, im Code mit fetchpriority="high".
Die Faustregel lautet also, alles, was man ohne Scrollen sieht, lädt sofort, alles darunter lazy.
Häufige Fehler
- Das Original hochladen: Mehrere Megabyte für ein kleines Vorschaubild.
- PNG für Fotos: PNG ist für Grafiken gedacht. Fotos werden als PNG oft viel größer als nötig.
- Lazy Loading für das erste Bild: Macht genau das Bild langsamer, auf das alle warten.
- Hintergrundbilder vergessen: Bilder, die über CSS als Hintergrund eingebunden sind, übersehen viele beim Optimieren.
- Kein Alternativtext: Kompression macht ein Bild schneller, aber nicht verständlich. Was in einen guten Alternativtext gehört, steht im Beitrag Welche Bilder auf deine Website gehören.
Kurz zusammengefasst
Bilder komprimieren ist der einfachste Weg zu einer schnelleren Website. Bring Bilder auf die angezeigte Größe, speichere sie als WebP oder AVIF mit einer Qualität um 75 bis 80 und lass weiter unten liegende Bilder erst beim Scrollen laden. Noch besser ist ein System, das das alles automatisch erledigt.
Wie Bilder in eine schnelle Website als Ganzes passen, steht im Beitrag Was eine statische Website ist und warum sie so schnell lädt. Wenn du wissen willst, wo deine Seite gerade Zeit verliert, schau ich mir deine Startseite im kostenlosen Kurz-Check an. Mehr dazu unter Performance-Optimierung.
Titelbild: Foto von freestocks.org über Wikimedia Commons, Lizenz CC0 (öffnet in neuem Tab), gefunden über Openverse.
