MarketingRadar
Bildoptimierung: ist es unser Ernst?

Bildoptimierung: ist es unser Ernst?

Beide Aspekte der Bildoptimierung sind von der gleich hohen Bedeutung: die Komprimierung der Bilder und die richtige Einstellung ihrer Abmessungen. Wir untersuchen am Beispiel von 10 Versicherungen, wie beide Aspekte optimiert sind und welche Optimierungspotenziale besitzen sie.

Dass die Ladezeit der Webseiten wichtig ist, gehört bereits zu den Floskeln. Trotz der allgemeinen Bekanntheit der Problematik und trotz der Änderung der Indexierungsparadigm zu mobile first, was von Google mehr als ein Jahr lang mantramäßig an jeder Ecke wiederholt wurde, scheint es, als würde man Performance der Webseiten, die beim manchen Geschäftsmodellen das einzige Standbein darstellen, nicht immer ernst nehmen.

Bilder sind statische Assets mit dem höchsten Dateivolumen

Bilder stellten bereits vor einigen Jahren zwei Drittel des ganzen Volumens einer Webseite dar – Tendenz steigend: also ja, es ist unser Ernst, speziell weil wir beim Testen von gefühlt jeder dritten Webseite mit den Bildern zu tun haben, als wären sie für den Hochglanz-Druck au A0-Format gedacht.

Bilder sind die grössten und zahlreichsten statischen Assets einer Webseite
Aufteilung der statischen Assets einer Webseite: Bilder sind sowohl die zahlreichsten Assets, als auch die Assets mit dem größten Transfer-Volumen. Auch sind sie meistens schlecht optimiert. Kurz gesagt: Performance Quick Win!

 

Zwei Aspekte der Bildoptimierung

Komprimierung

Bei der Optimierung der Bilder gibt es zwei Aspekte. Der eine Aspekt ist offensichtlich – man lässt die Bilder vor der Veröffentlichung komprimieren. Dazu gibt es mehrere Werkzeuge, von der Funktion „Für Web speichern“ in den Bild-Editor-Programmen über Online Services, wie https://kraken.io, bis zu Real Time Processing, wie https://www.imgix.com, wo es ausreicht zu der URL des eigenen Bildes ein Service Präfix hinzuzufügen und schon wird das Bild komprimiert geladen.

Bild-Abmessungen: Original vs. Anzeige

Der zweite Aspekt liegt allerdings nicht auf der Oberfläche: es ist der Unterschied in den Bild-Abmessungen zwischen dem originalen und dem tatsächlich angezeigten Bild. So lädt der Designer ein Bild in der Größe von 1024 x 768 Pixel auf den Server hoch – doch dem Bild steht zur tatsächlichen Anzeige nur der Platz von 160 x 120 Pixel zu Verfügung, CSS-Regel und HTML-Markup sind schuld.

Wir vergleichen die Anzeige-Abmessungen von zwei Bildern und ihre Dateigrößen:

Bild-Beispiel: Abmessungen sind wichtig!
Das Original-Bild liegt in den Abmessungen von 1024 x 768 px vor. Die Dateigröße bei der JPG-Komprimierung von 75% ist 144kB. Hier jedoch wurde das Bild vom Browser auf den zu Verfügung stehenden Platz heruntergerechnet – seine Anzeige-Abmessungen sind 620 x 465 px.

 

Bild-Beispiel: Bilder an die Anzeigengröße zugeschnitten sparen das Download-Volumen
Dieses Bild wurde bereits vor dem Upload auf die Anzeige-Größe von 620 x 465 px zugeschnitten – seine Dateigröße ist 68,8kB.

 

Bei der gleichen Anzeigengröße wurde die Datei doppelt so klein – ohne zu merken wurden hier 75kB eingespart!

Dieser Unterschied wird kaum wahrgenommen. Nachdem das Bild auf den Server hochgeladen wurde, ist die Wahrnehmung dieses Unterschieds kaum möglich – denn der Browser liefert nur die Bild-Version aus, die bereits an den zu Verfügung stehenden Platz zugeschnitten wurde.

Bild-Abmessungen in Zeiten von mobile first – es wird kritisch!

An dieser Stelle sollten noch einige Worte zu dem mobile first Paradigm gesagt werden, denn damit bekommt die Optimierung der Bild-Abmessungen noch wichtigere Bedeutung. Und zwar: zu den Zeiten von desktop first ist Google davon ausgegangen, dass alle Nutzer mit dem Desktop Rechner im Internet surfen. Das heißt in unserem Kontext – wenn ein Bild falsch zugeschnitten wurde, so hat dies unter Umständen weniger negativen Performance Impact gehabt. Das Bild wurde vom Browser, sagen wir mal, von 1024 x 768 px zu 800 x 600 px zurecht geschnitten – das Overhead bei der Dateigröße war nicht sehr dramatisch, speziell, weil Desktop Rechner meistens gute Internet Anbindung haben.

Doch was passiert in Zeiten von mobile first? Google indexiert die Seiten zuerst mit dem mobilen User Agent. Wenn also Google eine URL mit dem Bild abruft, wird das Bild von der Größe, in der es am Server liegt, an die Größe des mobilen Gerät zurecht geschnitten – das Gerät aber lädt das große Bild herunter. So, das Bild wird von 1024 x 768 px (bei uns im Test 144kB groß) zu 320 x 240 px verkleinert:

Das Bild ist an die Iphone-Größe zugeschnitten
Das Bild ist an die Iphone-Größe zugeschnitten

Seine Dateigröße ist dabei 23kB. Was passierte? Gerade hat das mobile Gerät 121kB umsonst heruntergeladen.

Wie funktioniert die Optimierung beider Aspekte bei den Versicherern?

In den letzten Jahren wird es für die Versicherungen zunehmend eng in den Suchergebnissen. Google scheint dem vermeintlichen Wunsch der Nutzer nachzugehen, anstatt Versicherungen die Versicherungsvergleiche in Top-10 zu sehen. Umso mehr werden die Onpage Faktoren für gute Rankings wichtig.

Die Optimierung dieses Aspekts ist nur machbar, wenn Designer die Bild-Vorgaben vom Frontend-Ingenieur bekommt und umsetzt, denn nur der Frontend-Ingenieur hat die Kenntnis darüber, wie viel Platz dem Bild letztendlich zu Verfügung steht. Oft arbeiten beide Fachbereiche nebeneinander, ohne die Vorgaben zu teilen und die Arbeitsergebnisse abzustimmen.

Was ist das Subjekt der Untersuchung? Wir wollten überprüfen, wie es um die beiden Aspekte der Bildoptimierung bestellt ist. Eine gute Optimierung würde zeigen, dass die Kommunikationsströme zwischen Design und Entwicklung richtig funktionieren und das Performance in der Unternehmenskommunikation fest verankert ist.

Vorgehen

Folgende Schritte sind wir bei der Auswertung gegangen:

  1. Es wurden 10 Webseiten verschiedener Versicherungen ausgewählt.
  2. Dann haben wir von jeder Webseite je ca. 300 URLs gecrawlt.
  3. Anschließend haben wir einen Script geschrieben und ihn auf die Seiten losgelassen: von jeder URL hat unser Script alle Bilder geladen und ihre zugehörigen Abmessungen errechnet: width und height (die Abmessungen der Bild-Anzeige im Browser bei der Auflösung 1920 x 1200), naturalWidth und naturalHeight (Abmessungen des Original-Bildes, das am Server liegt). Die größtmögliche Monitor-Auflösung wurde gewählt, um eventuelle Herunterskalierung der Bilder durch media queries bedingte breakpoints nicht auszulösen.
  4. Nachdem alle Daten zu den beiden Abmessungen vorhanden waren, haben wir ausgerechnet, welche Bild-Originale nicht komprimiert und überdimensioniert sind,
  5. Die überdimensionierten Bilder haben wir auf ihre tatsächlichen Anzeige-Abmessungen herunterskaliert und gespeichert.
  6. Die nicht komprimierten Bilder haben wir komprimiert und gespeichert.
  7. Abschließend haben wir das Ersparnis in der Dateigröße zwischen den Original-Bildern und den zugeschnittenen Bildern kalkuliert.

Auswertung

Domains

Folgende Domains der Versicherungen wurden ausgewertet:

VersicherungAusgewertete DomainsBezeichnung in der Auswertung
INTER Versicherungsgruppehttps://www.inter.de, https://www.inter-makler.netinter.de
Continentale Versicherungsverbundhttps://www.continentale.de, http://www.continentale-soldatenversicherung.decontinentale.de
Die Bayerischehttps://www.diebayerische.dediebayerische.de
GVV-Versicherungenhttps://www.gvv.degvv.de
Verti Versicherung AGhttps://www.verti.deverti.de
Westfälische Provinzialhttps://www.provinzial-online.de, https://www.provinzial-nordwest.de, https://www.provinzial.deprovinzial-online.de
Deutsche Familienversicherunghttps://www.deutsche-familienversicherung.dedeutsche-familienversicherung.de
Mecklenburgische Versicherungsgruppehttps://www.mecklenburgische.demecklenburgische.de
Versicherungen für Privatkunden – basler.dehttps://www.basler.debasler.de
Barmenia Versicherungenhttp://www.barmenia.debarmenia.de

Anzahl der gecrawlten URLs

Wir haben im Durchschnitt von jeder Domain 234 URLs untersucht.

Gecrawlte URLs pro untersuchte Domain
Gecrawlte URLs pro untersuchte Domain

Anzahl der Bilder pro URL

Anzahl der Bilder pro untersuchte URL
Anzahl der Bilder pro untersuchte URL

Wie viele Bilder lassen ein Ersparnis der Dateigröße erreichen?

Nach den ersten Berechnungen haben wir die erste Überraschung entdeckt:

ein Ersparnis bei der Dateigröße war durchschnittlich bei 85% der untersuchten Bilder möglich!

Folgendermaßen verteilen sich die möglichen Ersparnisse durch die untersuchten Domains:

Prozent-Anteil der Bilder mit dem möglichen Ersparnis der Dateigröße
Prozent-Anteil der Bilder mit dem möglichen Ersparnis der Dateigröße

Wie lassen sich die Ersparnisse erreichen?

Wir haben die optimierbaren Bilder nach Aspekten der möglichen Optimierung aufgeteilt:

Bilder, die komprimiert werden müssen

Der Prozent-Anteil der zu komprimierenden Bildern teilt sich durch die Domain wie folgt:

Prozent-Anteil der zu komprimierenden Bildern
Prozent-Anteil der zu komprimierenden Bildern

Bilder, die überdimensioniert sind

Der Prozent-Anteil der überdimensionierten Bildern teilt sich durch die Domain wie folgt. Überdimensioniert heißt: width x height (Abmessungen der Anzeige) ist kleiner als naturalWidth x naturalHeight (Abmessungen des Originals).

Prozent-Anteil der überdimensionierten Bilder
Prozent-Anteil der überdimensionierten Bilder

Zwischen-Fazit zur Lage der Nation

Alle untersuchten Seiten haben hohes Potenzial bei der Optimierung des offensichtlichen Aspekts – der Bild-Komprimierung.

Das zweite Aspekt der Optimierung, die Bild-Abmessungen, ist zwar weniger ausgeprägt – durchschnittlich sind es aber immer noch 20% aller Bilder, die überdimensioniert sind.

Wie viel genau lässt sich einsparen?

Um eine Bezugsgröße zu schaffen und die Ersparnisse greifbar darzustellen, werden wir die Ersparnisse in den Bezug zu der Dateigröße der jeweiligen HTML-Datei setzen, wo die Bilder veröffentlicht sind.

Durchschnittliche HTML-Dateigröße pro Domain in Bytes

Durchschnittliche HTML-Dateigröße pro Domain
Durchschnittliche HTML-Dateigröße pro Domain in Bytes

Durchschnittliche Ersparnisse der Dateigröße pro URL und Domain in Bytes

Durchschnittliche Ersparnisse der Dateigröße bei richtiger Optimierung pro URL und Domain
Durchschnittliche Ersparnisse der Dateigröße bei richtiger Optimierung pro URL und Domain

Fazit: Platz für Optimierung gibt es IMMER!

Sollte die Optimierung der Bilder bei den untersuchten Domains und URLs korrekt und detailgetreu erfolgen, so lässt sich pro URL ein Datenmenge einsparen, die von einem bis zu 10 Mal die Größe der jeweiligen HTML-Datei übersteigt.

Ersparnisse bei der Bild-Dateigröße übersteigen die Größe der HTML-Dateien, wo die Bilder erscheinen
Ersparnisse bei der Bild-Dateigröße übersteigen die Größe der HTML-Dateien, wo die Bilder erscheinen

Sollten Sie an den Gedanken kommen, Ihre Webseite könnte ein Optimierungspotenzial haben – lassen Sie uns sprechen, wir lassen und vom Paretoprinzip nicht aufhalten!

Anhang

Tools

Folgende Tools wurden für die Untersuchung eingesetzt:

Scripte

Folgende Scripte wurden eingesetzt:

  • Der iMacros Script ruft alle URLs aus einer CSV-Datei ab, lädt die Seiten im Browser, speichert alle Bild-URLs und ihre zugehörigen Größen: width, height, naturalWidth, naturalHeight. iMacros herunterladen.
  • Batch-Scripte für ImBatch lesen CSV-Datei mit den lokalen Bild-URLs, öffnen die Bilder, lesen aus den weiteren Spalten der CSV-Datei die Bild-Abmessungen und ändern entsprechend das geöffnete Bild. Script-Autor: Maxim SmirnovBatch-Script 1 herunterladen, Batch-Script 2 herunterladen.

Evgeniy Orlov

Evgeniy Orlov ist Senior SEO Consultant bei mediaworx berlin AG. Er hilft Unternehmen schnelle und effektive Seiten zu bauen, die von den Nutzern geliebt und von Google respektiert werden. Die Highlights in seinem Repertoire sind Indexierungsmanagement, Performance Optimierung, Data Mining sowie die Lösung außergewöhnlicher technischer Fragestellungen.