Technologie

Wie kleinere Bilder Ihrer Website zu größerer Performance verhelfen

Barbara Fellner

Von Barbara Fellner

07. Oktober 2020

2 Min Lesezeit

Kleinere Bilder mit größerer Performance

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.

Katze WebP Bild Katze WebP Bild Katze WebP Bild

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 deine 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 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 die Inhalte und Funktionen Ihrer Website entdecken - in Ihrem gewohnten Tempo 😜 Und das Beste daran: Die Web Performance bei 90% Ihrer Benutzer wird davon kein bisschen beeinträchtigt.

Internet Explorer 11

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.

Barbara Fellner

Find a job you love and you never have to work a day in your live.

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 Webseiten 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.