Wenn wir eine bestehende Kundenseite uebernehmen, ist eines fast immer gleich. Die Bilder sind viel zu gross. Beim Thema WebP AVIF Bilder optimieren reden wir nicht ueber ein Nerd-Detail, sondern ueber den Unterschied zwischen einer Startseite, die auf dem Handy in einer Sekunde da ist, und einer, die drei Sekunden laedt, waehrend der Kunde schon wieder weg ist. Handyfotos vom Chef, direkt hochgeladen, 4000 Pixel breit, vier Megabyte schwer. Das bremst alles aus.
Warum sind grosse Bilder so ein Problem fuer die Ladezeit?
Ein Bild mit vier Megabyte muss komplett ueber die Mobilfunkverbindung geladen werden, bevor der Besucher es sieht. Auf einer typischen KMU-Startseite liegen schnell fuenf, sechs solcher Bilder. Macht in Summe neun oder zehn Megabyte, die das Handy erst durchleiern muss. Im WLAN faellt das kaum auf. Unterwegs am Ortsrand von Maisach mit zwei Balken Empfang wird daraus eine Geduldsprobe.
Das Bittere daran. Die Bilder sehen auf dem Handy nicht besser aus, nur weil sie 4000 Pixel breit sind. Der Bildschirm zeigt vielleicht 400 Pixel. Der Rest ist Ballast, der geladen, aber nie sichtbar wird. Genau hier setzen wir an, und die Wirkung ist jedes Mal groesser, als Kunden erwarten.
Was ist der Unterschied zwischen JPEG, WebP und AVIF?
JPEG kennt jeder, das Format ist ueber 30 Jahre alt. Es funktioniert, aber es packt Bilder nicht besonders sparsam. WebP ist der modernere Nachfolger von Google und schafft bei gleicher Bildqualitaet oft 25 bis 35 Prozent kleinere Dateien. AVIF geht noch einen Schritt weiter und druckt die Datenmenge nochmal deutlich, bei feinen Farbverlaeufen und Fotos ist der Vorsprung am groessten.
Der Clou. Kein Mensch sieht den Unterschied. Wir vergleichen die Bilder nebeneinander am grossen Monitor, und selbst bei 80 Prozent weniger Dateigroesse erkennt man mit blossem Auge nichts. Das ist kein Marketingversprechen, das koennen Sie selbst nachpruefen. Ein Foto von der Ladentheke bleibt scharf, die Farben stimmen, nur die Datei ist ein Bruchteil so gross.
Und wenn ein Browser AVIF nicht kann?
Deshalb liefern wir nie nur ein einziges Format aus. Wir bauen die Bilder mit dem HTML-Element picture und mehreren Quellen. Der Browser sucht sich selbst das beste Format, das er versteht. Neue Handys bekommen AVIF, aeltere Geraete WebP, und ganz alte Browser fallen auf JPEG zurueck. Niemand sieht ein kaputtes Bild, jeder bekommt das kleinstmoegliche.
Was hat es mit srcset auf sich?
Das zweite Werkzeug heisst srcset. Damit hinterlegen wir von jedem Bild mehrere Groessen. Eine kleine Version fuers Handy, eine mittlere fuers Tablet, eine grosse fuer den Desktop-Monitor. Der Browser rechnet aus, welche Groesse er gerade braucht, und laedt nur diese. Das Handy zieht sich also die 400-Pixel-Variante, nicht die riesige Desktop-Datei.
Kombiniert man beides, modernes Format plus passende Groesse, ist der Effekt enorm. Bei einer Baecker-Seite aus dem Landkreis, die wir letztes Jahr uebernommen haben, ist mir das nochmal richtig vor Augen gefuehrt worden. Die Startseite wog vorher neun Megabyte. Fast alles davon waren vier ungeschrumpfte Fotos von Broten und der Ladenfront. Nach der Umstellung. Unter ein Megabyte.
Die Ladezeit auf dem Handy hat sich ungefaehr halbiert. Der Baecker hat das nicht gemessen, der hat es gemerkt, weil seine Seite sich ploetzlich anfuehlte wie eine richtige Seite und nicht wie eine Diashow im Zeitlupentempo. Solche Momente sind der Grund, warum wir das bei jedem Projekt machen.
Warum interessiert Google die Bildgroesse?
Google misst seit Jahren, wie schnell Seiten laden, und packt das in die sogenannten Core Web Vitals. Grosse, langsam ladende Bilder ziehen genau diese Werte nach unten. Besonders der Wert LCP, der misst, wann das groesste Element sichtbar wird, und das groesste Element ist auf den meisten Startseiten. Ein Foto. Mehr dazu steht in unserem Beitrag zu langsamen Websites und Core-Web-Vitals-Fehlern.
Zwei Dinge passieren also gleichzeitig, wenn wir Bilder verkleinern. Google bewertet die Seite besser, was beim Ranking hilft. Und der echte Besucher bleibt laenger, weil er nicht auf eine ladende Seite starren muss. Gerade der zweite Punkt zaehlt. Studien von Google (aeltere Zahlen, mit Vorsicht zu lesen) deuten seit langem darauf hin, dass jede zusaetzliche Ladesekunde Abspruenge kostet. Wie stark genau, haengt von Branche und Geraet ab, aber die Richtung ist klar.
Wie laeuft die Umstellung bei uns konkret ab?
Wir nehmen die vorhandenen Bilder und schleusen sie durch unsere Build-Pipeline. Das ist ein Skript, das jedes Foto automatisch in WebP und AVIF umwandelt, in mehreren Groessen ausspuckt und die passenden picture- und srcset-Angaben in den Code schreibt. Manuell waere das Wahnsinn, automatisiert dauert es Minuten.
- Format: AVIF und WebP als Hauptformate, JPEG nur noch als Rueckfalloption
- Groessen: mehrere Varianten pro Bild, ausgeliefert per srcset
- Ladeverhalten: Bilder ausserhalb des sichtbaren Bereichs laden erst beim Scrollen (lazy loading)
- Massmasse: feste Breiten- und Hoehenangaben, damit nichts springt beim Laden
Der letzte Punkt wird oft vergessen. Wenn ein Bild ohne Groessenangabe laedt, ruckelt das Layout, sobald es reinploppt. Das nervt und Google straft es ab. Wir setzen die Masse fest, damit der Platz von Anfang an reserviert ist. Diese Handgriffe gehoeren fuer uns zu jedem Webdesign-Projekt dazu, nicht als Aufpreis, sondern als Selbstverstaendlichkeit.
Uebrigens ist die Bildgroesse nur die halbe Miete. Genauso wichtig ist, dass die Fotos ueberhaupt etwas taugen. Verwackelte, dunkle Handybilder schrecken Kunden ab, egal wie schnell sie laden, das haben wir im Beitrag ueber schlechte Website-Fotos ausfuehrlicher beschrieben.
Haeufige Fragen
Verliere ich Bildqualitaet, wenn ich auf WebP oder AVIF umstelle?
In der Praxis nicht sichtbar. Wir stellen die Kompression so ein, dass das Auge keinen Unterschied erkennt, waehrend die Datei trotzdem 60 bis 80 Prozent kleiner wird. Bei extremen Motiven pruefen wir jedes Bild von Hand nach.
Funktioniert das auf allen Handys und Browsern?
Ja. WebP versteht heute praktisch jeder Browser, AVIF die meisten aktuellen. Fuer den Rest liefern wir automatisch ein JPEG als Rueckfall aus. Kein Besucher sieht jemals ein leeres Bild.
Kann ich meine Bilder auch selbst umwandeln?
Fuer einzelne Bilder gibt es kostenlose Online-Konverter. Sinnvoll wird es aber erst mit den passenden Groessen und dem richtigen Code drumherum. Wer nur das Format tauscht, laesst den halben Effekt liegen.
Wenn Sie den Verdacht haben, dass Ihre Seite an zu schweren Bildern haengt, schauen wir uns das gern an. Wir bieten einen kostenlosen Website-Check an, ein Blick von 30 Minuten auf Ladezeit, Bilder und die groebsten Bremsen. Ohne Verkaufsdruck, einfach damit Sie wissen, wo Sie stehen. Melden Sie sich unter bytebrise.com/kontakt, wir sind aus Fuerstenfeldbruck und kennen den Muenchner Westen.