WordPress Tuning: Bilder optimieren

Lesezeit: 3 Minuten

Bilder optimieren allgemein

Eine Webseite oder ein Blog ohne Videos oder gar Bilder ist nicht denkbar. Bilder geben den Webseiten erst den richtigen Schliff. Bilder haben aber auch mit den größten Einfluss auf die Ladezeit von Webseiten, daher ist Bilder optimieren so wichtig. Jetzt wirst Du vielleicht denken, dass mit den heutigen Internetseiten die Ladezeit nicht mehr so wichtig ist und sowieso alles sehr schnell da ist. Dem ist nur bedingt so. Natürlich bedeutet eine schnellere Internetleitung auch, dass die Daten schneller vom Webserver bei Ihnen als Konsument ankommen. Aber die Datenübertragung ist nicht der einzige Zeitfaktor. Wir schauen uns einfach ein Beispiel an:

Performance Einfluß von Bilder

Mein Blog ist erreichbar unter der Adresse https://www.thedigitaltransformation.de.

Ein Aufruf der Seite, gemessen mit https://tools.pingdom.com hat aktuell die folgenden Performancewerte (gemittelt aus mehreren Tests):

  • Load Time: 2 Sekunden
  • Page Size: 621 kB
  • Requests: 22

Mein Headerbild hat aktuell 161kB. Bei einer 25Mbit-Internetleitung (die heute oft üblich ist), bedeutet das eine Ladezeit von gerade einmal rund 5ms. Also auf den ersten Blick völlig vernachlässigbar. Aber: hinzu kommen noch die Zeiten für

  • SSL-Verbindung: 122ms
  • http-Connect: 202ms
  • Wartezeit: 105ms (Bearbeitungszeit durch den Server)

Und diese Punkte werden bei jedem Bild (genauer gesagt, bei jedem Objekt, auch bei CSS-Dateien, und so weiter) durchlaufen. Wie sehen also, dass es hier auf mehrere Faktoren ankommt:

  • Die Bildgröße und
  • Die Anzahl der Objekte (auch, aber nicht nur Bilder) auf der Seite

Bei der Bildgröße kann man nur sagen: So klein wie möglich und so groß wie nötig. Hier sind die richtige Auswahl des Dateiformats, die Größe des Bildes und die Stärke der Komprimierung wichtig.

Für eine Webseite kommen grundsätzlich die folgenden Formate in Frage

.gif
Eigentlich ein altes Format, das immer noch verwendet wird. Es beherrscht Transparenz und ist aufgrund der einstellbaren Anzahl an Farben recht klein. .gif hat sich immer sehr gut bewährt für Symbole, Fortschrittsbalken, und so weiter.

.png:
Das Standardformat für Bilder im Internet. Auch .png unterstützt die Transparenz von Bildern. Sie sollten .png für alle Zwecke verwenden, mit Ausnahme hochauflösender Fotos oder Aufnahmen, hier hat unter Umständen noch .jpg den Vortritt.

.jpg:
.jpg beziehungsweise .jpeg kann Bilder komprimieren und damit sehr klein bekommen. Aber Achtung: Die Komprimierung ist verlustbehaftet, das heißt die Komprimierung äußert sich recht schnell in Artefakten. Nichts desto trotz ist das ein ideales Format für Fotos, Aufnahmen und ähnliche Zwecke. Die aktuellen Formate sind JPEG2000 und JPEG XR.

.webp:

Ein neues Format, das aktuell auch noch nicht von allen Endgeräten unterstützt wird. Ein guter Überblick, welches Endgerät webp unterstütz gibt es hier.

Aber wie groß soll nun ein Bild auf der Homepage sein? Das hängt vom Zweck ab: Als Fotograf möchtest Du die Bilder als Referenz für Dich verwenden, darum sollten diese möglichst qualitativ hochwertig mit wenig Artefakten verfügbar sein. Im Gegenzug dazu kann ein abstraktes Headerbild durchaus gut komprimiert werden.

Anzahl der Bilder

Aber an der Rechnung oben sehen wir, dass auch die Anzahl der Bilder (eigentlich die Anzahl der ganzen Objekte einer Homepage) Einfluss auf die Ladezeiten haben. Natürlich kann man jetzt sagen: Je weniger – desto besser. Andererseits möchten Sie dem Betrachter ja auch eine vernünftige Ansicht bieten, die nicht nur spartanisch aussieht. Es gibt keine Richtlinien, die irgendwie die Anzahl der Bilder berücksichtigt, und das ist aus unserer Sicht auch gut so. Trotzdem sollte sich jeder, der eine moderne Homepage (Stichwort „mobile Geräte“) betreibt, Gedanken machen und lieber einmal mehr überlegen, ob das nun notwendig ist oder nicht.

Abmessung der Bilder

Ein letzter sehr wichtiger Punkt ist die Abmessung der Bilder (in Pixel). Wir sprechen hier nicht von Komprimierung, sondern eher vom Vergleich Din-A3 zu Din-A4. Bilder werden an vielen Positionen, an denen Sie hinterlegt werden, zum Beispiel im Header, in einer bestimmen Größe angezeigt. Das ist logisch, der Header ist eben nur zum Beispiel 600px x 200px groß. Für die Anzeige ist der Browser zuständig. Es ist kein Problem und auch technisch kein „Verstoß“ gegen irgendetwas, wenn wir für diesen Header ein Bild hinterlegen, das zum Beispiel 1200px x 400px groß ist. In so einem Fall skaliert der Browser das Bild entsprechend nach unten, damit es „passt“. Das Problem ist nur: in der ersten Variante werden 120.000 Pixel übertragen, in der 2. Variante werden 480.000 Pixel übertragen- also das Vierfache! An der Anzeige ändert sich nichts, der Browser wird auch das größere Bild nach unten skalieren und nur mit 600px x 200px anzeigen. Im Gegenteil, es ist sogar negativ, da der Browser, zusätzlich zu den unnötigen Daten, die übertragen werden, noch eine gewisse Rechenzeit, um das Bild zu verkleinern.

Bilder optimieren Fazit

Es ist somit immer sinnvoll, sich bei Bildern auf der Homepage Gedanken zu machen, wie groß sie angezeigt werden. Verschwenden wollen wir die wertvolle Bandbreite ja nun auch nicht.

Das könnte Dich auch interessieren …

1 Antwort

  1. Stefan M. sagt:

    Guten Tag,

    interessanter Beitrag, danke für die Tipps!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Ich akzeptiere

4 × vier =