Bilder fürs Web optimieren: kleiner, schneller, schärfer

Sie fotografieren Ihre schönste Baustelle mit dem Handy und laden das Bild direkt auf die Webseite. Das Foto ist gut. Die Datei ist riesig. Und Ihre Seite braucht auf dem Handy plötzlich zehn Sekunden zum Laden. Bilder sind der mit Abstand häufigste Grund für langsame Webseiten, und zugleich der, den Sie am leichtesten selbst beheben können.

Warum Fotos die häufigste Bremse sind

Ein modernes Handy nimmt Fotos mit mehreren tausend Pixeln Breite auf. Die Datei ist schnell mehrere Megabyte groß. Auf Ihrer Webseite wird dieses Foto dann in einer Spalte von vielleicht 800 Pixeln Breite angezeigt. Der Browser lädt trotzdem die komplette große Datei herunter und rechnet sie erst danach klein.

Das heißt: Ihr Besucher wartet auf Daten, die er nie zu sehen bekommt. Bei fünf Bildern auf einer Seite kommen so leicht 15 Megabyte zusammen. Im WLAN fällt das kaum auf. Unterwegs im Mobilfunknetz wird daraus eine gefühlte Ewigkeit, und genau dort sind die meisten Ihrer Besucher unterwegs. Warum das direkt aufs Ranking durchschlägt, steht im Artikel zu Ladezeit und Core Web Vitals.

Schritt eins: die richtige Größe in Pixeln

Bevor Sie über Dateiformate nachdenken, verkleinern Sie die Pixelmaße. Das bringt am meisten und dauert am kürzesten. Als Faustregel gilt: doppelte Anzeigebreite, damit das Bild auf hochauflösenden Bildschirmen scharf bleibt.

Die Zahlen sind Richtwerte, keine Gesetze. Der Punkt ist die Größenordnung: Aus 4 Megabyte werden 100 Kilobyte, ohne dass ein Besucher einen Unterschied sieht.

WebP und AVIF: was die modernen Formate bringen

Nach der Größe kommt das Format. Ein Format ist die Art, wie ein Bild gespeichert wird. JPEG kennen Sie von der Kamera, es stammt aus den Neunzigern. Seitdem hat sich einiges getan.

WebP ist der heutige Standard fürs Web. Es speichert dasselbe Bild in sichtbar gleicher Qualität deutlich kleiner als JPEG, oft in der Größenordnung eines Drittels weniger. Alle gängigen Browser zeigen WebP seit Jahren an, Sie müssen dabei niemanden ausschließen.

AVIF ist der Nachfolger und komprimiert noch stärker. Der Preis dafür: Das Umwandeln dauert länger, und in seltenen Fällen kommen ältere Geräte nicht mit. Für die meisten Betriebe ist WebP die richtige Wahl, weil es unkompliziert funktioniert. AVIF lohnt sich, wenn Sie sehr viele große Bilder zeigen, etwa in einer umfangreichen Projektgalerie.

Welches Format wofür

Ein Sonderfall sind bewegte Bilder. Animierte GIFs sind fast immer die schlechteste Lösung, weil sie riesig werden. Ein kurzes, stummes Video ist an dieser Stelle deutlich kleiner.

Komprimieren, ohne dass man es sieht

Beim Speichern können Sie die Qualitätsstufe wählen, meist als Wert zwischen 0 und 100. Viele stellen aus Sorge um die Schärfe auf 100. Genau das bläht die Datei auf, ohne dass jemand den Unterschied bemerkt.

• Qualität 75 bis 85 ist für Fotos im Web der übliche Bereich. Auf einem Bildschirm sehen Sie keinen Unterschied zu 100.
• Prüfen Sie am Original. Öffnen Sie beide Fassungen nebeneinander in voller Größe. Sehen Sie nichts, ist der Wert richtig.
• Nie mehrfach komprimieren. Jede Runde verschlechtert das Bild dauerhaft. Bewahren Sie das Original immer separat auf.
• Erst zuschneiden, dann verkleinern, dann speichern. In dieser Reihenfolge bleibt am meisten Schärfe erhalten.

Damit nichts springt und nichts unnötig lädt

Zwei technische Kleinigkeiten machen beim Ladeverhalten einen großen Unterschied. Ihr Dienstleister oder Ihr Redaktionssystem erledigt das meist automatisch, prüfen sollten Sie es trotzdem.

Feste Bildmaße im Code. Wenn im Quelltext steht, wie breit und hoch ein Bild ist, kann der Browser den Platz freihalten, bevor das Bild da ist. Fehlt die Angabe, springt der Text beim Laden nach unten. Das ist nicht nur lästig, sondern fließt als Kennzahl auch in die Bewertung durch Google ein.

Verzögertes Laden. Bilder weit unten auf der Seite müssen nicht sofort geladen werden. Mit einer kleinen Angabe im Code lädt der Browser sie erst, wenn der Besucher in ihre Nähe scrollt. Das erste sichtbare Bild ganz oben nehmen Sie davon aus, sonst erscheint es verspätet.

<img src="badsanierung-bremen.webp"
     width="1200" height="800"
     loading="lazy"
     alt="Neu gefliestes Badezimmer mit bodengleicher Dusche">

Sie müssen das nicht selbst schreiben können. Es hilft aber, es zu erkennen, wenn Sie über den Quelltext Ihrer Seite schauen oder mit einem Dienstleister sprechen.

Dateiname und Alt-Text: Bilder, die gefunden werden

Ein Bild kann Besucher bringen, wenn Google versteht, was darauf zu sehen ist. Dafür gibt es zwei Stellschrauben, und beide kosten Sie nur Sekunden.

Der Dateiname sollte beschreiben, was das Bild zeigt. „IMG_4821.jpg" sagt niemandem etwas. „badsanierung-bremen-walle.webp" schon. Nutzen Sie Kleinbuchstaben, Bindestriche statt Leerzeichen und keine Umlaute.

Der Alt-Text ist eine kurze Beschreibung im Hintergrund. Sie wird vorgelesen, wenn jemand die Seite mit einem Screenreader nutzt, und sie erscheint, falls das Bild nicht lädt. Beschreiben Sie in einem knappen Satz, was zu sehen ist. Aneinandergereihte Suchbegriffe helfen niemandem und wirken schnell wie ein Trick. Dasselbe Prinzip gilt übrigens für Ihre Seitentitel und Meta-Beschreibungen: beschreiben statt stapeln.

Ein Arbeitsablauf für den Alltag

Damit das nicht zur Dauerbaustelle wird, hilft eine feste Reihenfolge. Vier Schritte, die Sie sich einmal angewöhnen:

1. Zuschneiden. Weg mit dem unnötigen Rand. Das Motiv soll wirken.
2. Auf Zielbreite verkleinern. Nutzen Sie die Richtwerte aus der Tabelle weiter oben.
3. Als WebP speichern, mit Qualität um die 80.
4. Sinnvoll benennen und beschreiben, dann hochladen.

Dieselben optimierten Bilder verwenden Sie gleich weiter: für Ihr Google Unternehmensprofil und für Ihre Social-Media-Beiträge. Einmal aufbereitet, mehrfach genutzt.

Wenn Sie das nicht selbst machen möchten: Bei den Webseiten, die wir umsetzen, läuft die Bildaufbereitung automatisch mit. Was dazugehört, sehen Sie auf unserer Seite zum Webdesign. Und weil der größte Teil Ihrer Besucher am Handy ankommt, lohnt danach ein Blick auf Mobile First und die Handy-Ansicht Ihrer Seite.