User Experience
Wie kleinere Bilder Ihrer Website zu größerer Performance verhelfen
Von Barbara Fellner
07 Juli 2020
2 Min Lesezeit
©
Foto von CHUTTERSNAP auf Unsplash
Ganz gleich, ob wir uns im Internet Rezepte anschauen, eine neue Jacke kaufen oder einen Urlaub buchen – Bilder sind für unseren täglichen Gebrauch von großer Bedeutung geworden. Wenn es uns gelingt, die Größe der Bilder im Web so weit wie möglich zu reduzieren, ohne ihre Gesamtqualität zu beeinträchtigen, wird dies die Seitengeschwindigkeit und dadurch die User Experience auf unseren Websiten erheblich verbessern. Und die Verwendung von WebP ist dafür eine der besten Möglichkeiten.
Schauen Sie sich die drei Katzenbilder an. Können Sie einen Unterschied erkennen?
Das Bild auf der linken Seite ist ein 139KB PNG, das Bild in der Mitte ein 57KB JPG und das Bild auf der rechten Seite ein 29KB WebP. Das mag bei einem einzigen Katzenbild kein großer Unterschied sein, dennoch nimmt das JPG fast doppelt so viel Platz am Server ein und das PNG fast das fünffache! Wenn Ihre Website besonders auf Bilder angewiesen ist, summieren sich diese wenigen KB schnell.
Welche Vorteile hat das für mich und meine Website?
- Mit kurzen Ladezeiten punkten Sie bei Ihren Benutzern. Das letzte, was Sie möchten, ist die Menschen, die Interesse an Ihrem Unternehmen zeigen, immer wieder warten zu lassen.
- Kein Geheimnis: Mehr Engagement kommt durch längere Verweildauer auf Ihrer Website. Genervte Nutzer:innen tendieren eher dazu, Ihrer Website den Rücken zu kehren und sich anderswo umzusehen. Das WWW ist schließlich groß genug. Mit dem gern getrackten Engagement ist dann Schluss.
- Google mag Websites, die Bilder in Formaten der nächsten Generation anbieten, da sie schnellere Downloads und weniger Datenverbrauch bieten. WebP-Bilder sind also eine Möglichkeit, wie Google Ihre Website mit einem verbesserten SEO-Ranking belohnen kann.
- WebP vereint das Beste aus beiden Welten: Die geringe Dateigröße von JPGs und die Möglichkeit nach Transparenz, die wir von PNG kennen.
Ab wann ist WebP auch für meine Website verfügbar?
WebP ist ein Bildformat, das von Google bereits im Jahr 2010 entwickelt wurde. Ja, das ist schon ziemlich lange her. Seit dem letzten iOS-Update (iOS 14 im Oktober 2020) unterstützt nun auch Apples Internet-Browser Safari das WebP-Format. Damit sind nun endlich alle modernen Browser in der Lage, von WebP-Bildern zu profitieren, und mit ihnen etwa 90% aller Internet-Nutzer.
Wer bildet hier mit 10% die Ausnahme? Web-Entwickler:innen ahnen es vielleicht schon: Es ist der Internet Explorer. Doch mit einer Fallback-Lösung im PNG- oder JPG-Format für den Internet Explorer 11 können auch dessen Nutzer:innen die Inhalte und Funktionen Ihrer Website entdecken - in Ihrem gewohnten Tempo 😜 Und das Beste daran: Die Web Performance bei 90% Ihrer Benutzer:innen wird davon kein bisschen beeinträchtigt.
Tipp: Stop using Internet Explorer 🤗
Fazit
Kleinere Bilddateigrößen bedeuten weniger Daten, weniger Daten bedeuten schnellere Seiten, und schnellere Seiten sorgen für zufriedenere User.
“
Find a job you love and you never have to work a day in your life.
Barbara Fellner
Web Developer
Hallo, ich bin Babsi. Meine Vorliebe für neue Technologien hat man zwischen den Zeilen vermutlich schon herauslesen können. Dass dafür zwischen den Zeilen genügend Platz ist, geht auf meine Kappe: Mein Spezialgebiet liegt im Frontend. Ich lasse Websites und Applikationen die nötige Liebe zum Detail angedeihen, entwerfe und entwickle Animationen und hab die Nutzerfreundlichkeit, die Usability im Blick. Falls dir diese Seite hier also besonders gut gefällt, dir eine Animation ins Auge fällt oder du entdeckt hast, wie das „Meet us for …“ im Hero verwischt – das war ich.