Mit optimierten Bildern können die größten Leistungssteigerungen erzielt werden. Dazu sollte man folgende Regeln befolgen:
Bildformate
Hier wird zunächst unterschieden in:
- Verlustfreie (lossless) Formate: Diese Formate behalten bei einer Komprimierung alle Bildinformationen. Dazu zählen .png und .gif.
- Verlustbehaftete (lossy) Formate: Diese Formate verlieren bei einer Komprimierung Bildinformationen. Dazu gehört .jpg.
Die Wahl des richtigen Bildformats ist sehr entscheidend. Grundsätzlich kann man sagen, dass .jpg für Fotos und .png (.jpg und .png = Rastergrafiken) oder .svg (= Vektorgrafik) für Grafiken verwendet werden sollte. Die Gründe: .jpg kann bis zu 16 Millionen Farben darstellen und ist daher für Fotos (insbesondere komplexe) sehr gut geeignet. Sollte aber ein Foto mit transparenten Anteil dargestellt werden, kann auf .png zurückgegriffen werden. Dabei sollte PNG-8 vor PNG-24 bevorzugt werden, da es deutlich kleiner in der Dateigröße ist. Dafür wirkt es etwas blasser als PNG-24. .png kann auch für Grafiken eingesetzt werden, wobei man hier Vektorgrafiken (.svg) vorziehen sollte, da diese sehr klein, aber unendlich skalierbar sind und sich daher hervorragend für Retina-Displays ohne Qualitätsverluste eignen. Vor allem bei hochauflösenden Monitoren kann man durch den Einsatz von .svg sehr scharfe Resultate erzielen.
WebP und JPEG-XR
WebP ist ein von Google entwickeltes Bildformat und ist 26 % kleiner als .png und 25-34 % kleiner als .jpg. Der einzige Nachteil: Das Bildformat wird nur von Chrome, Opera und Android Browser unterstützt. Ähnlich bei JPEG-XR (Abk. für JPEG extended range): Das von Microsoft entwickelte Format wird nur vom Internet Explorer 9-11 und Edge unterstützt. Dabei handelt es sich um ein weiterentwickeltes .jpg-Format, welches verlustfrei komprimiert werden kann. Über die .htaccess kann man jedoch WebP für die Chrome- und Opera-Nutzer bereitstellen, JPEG-XR für Internet Explorer Nutzer, während dem Rest .jpg und .png ausgeliefert wird. Hier lohnt sich vorher ein Blick in die Analytics-Daten, um die Browser-Nutzung näher zu analysieren.
Was JPEG-XR angeht konnte Tobias Baldauf von Trivago zusammen mit Cloudinary feststellen, dass JPEG-XR sogar negativen Einfluss auf den Pagespeed haben kann. Das Dekodieren von JPEG-XRs wird auf den CPU übertragen. Dieser verwendet den gleichen Thread wie der aktive Browser-Tab, was Auswirkungen auf der Seiten-Rendering und die Seitenladegeschwindigkeit hat. Mit dem Performance Monitor von Windows konnte man dann feststellen, dass die Arbeitsleistung des CPUs beim Einsatz von JPEG-XRs ca. doppelt so hoch war als bei normalen JPEGs. Vor allem bei JavaScript-lastigen Webseiten wie SPAs wird dies nochmal besonders deutlich. Dies führte zu einer Verschlechterung des Pagespeeds. Dadurch verschlechterten sich wichtige KPIs inkl. Conversions um ca. 1 %.
Komprimierung
Ziel hierbei ist, die Dateigröße so gering wie möglich zu halten. Im ersten Schritt helfen dabei Bildbearbeitungsprogramme wie Photoshop oder Gimp. Vor dem Export der Datei kann man hier etwas mit den Qualitätseinstellungen spielen. Bei .jpg sollten man vorsichtig sein, da hier bei der Komprimierung mit erheblichen Qualitätsverlusten zu rechnen ist. Versuche hier den Mittelweg zwischen Kompression und Qualität zu finden. Neben den genannten Bildbearbeitungsprogrammen sollten noch Online-Bild-Komprimierer wie Compressor.io, Kraken.io oder Optimizilla zum Einsatz kommen. Für .svg-Dateien kann man SVGO einsetzen. Benötigt man eine API, dann kann man zu kraken.io oder shortpixel.com greifen. Bei WordPress helfen Plugins wie SmashIT oder EWWW Image Optimizer.
GZIP
Auch für Raster- und Vektorgrafiken sollte man GZIP aktivieren. Mehr dazu hier.
Brotli
Statt GZIP könnte man auch Brotli alternativ verwenden. Mehr dazu hier.
Base 64
Base 64 ist ein Verfahren, um Bilder in Zeichen umzuwandeln. So wird aus einem Bild ein HTML-Code, der deutlich schneller lädt und einen HTTP-Request umgeht. Für sehr große Bilder eignet sich dieses Verfahren eher nicht, da dadurch sehr viel Code generiert wird, der sich dann negativ auf den Pagespeed auswirken kann. Für kleinere Bilder kann diese Methode sehr sinnvoll sein. Die Umwandlung kann mit Tools, wie diesem hier, stattfinden.
Bittiefe
Wenn in einem Bild nur wenige Farben eingesetzt werden, dann macht es Sinn die passende Bittiefe zu wählen, um Dateigröße zu sparen. Daher sollten man sich z.B. bei .png fragen, ob immer 32-Bit (16 Mio. Farben) oder auch manchmal 5-Bit (32 Farben) ausreichend sind.
Meta-Daten
Viele Bilder-Dateien enthalten einige Meta-Daten, die man nicht benötigt und beim Entfernen einige Bytes einsparen kann. Die Meta-Daten entfernt man, indem man mit Rechtsklick auf das Bild zu den “Eigenschaften” wechselt. Dort navigiert man zum Tab “Details”. Ganz unten klickt man auf “Eigenschaften und persönliche Informationen entfernen”. Im darauffolgenden Fenster wählt man noch aus, was alles an Meta-Daten gelöscht werden soll.
Upload: Bildgröße
Achte darauf, dass du das Bild in der angezeigten Größe auf der Webseite hochlädst. Wird das Bild in 500 x 500 Pixel dargestellt, so sollte es nicht in 2000 x 2000 Pixel hochgeladen werden. Das erhöht unnötig die Übertragungsgröße, was zu einer langsameren Ladegeschwindigkeit führt.
Quellcode: Bildgröße
Damit ein Browser die Bildermaßen nicht selbst berechnen muss, sollte diese direkt im HTML definiert werden. Das spart Ladezeit. Beispiel:
<img src="bild.png" width="500" height="150">
Lazy Loading
Mit Lazy Loading (Deferred Loading oder Delayed Loading) werden Bilder versetzt geladen und erst dann geladen und ausgespielt, wenn der Nutzer zum Bereich des Bildes kommt. Bei Seiten, die sehr lang sind und viele Bilder beeinhalten (z.B. Kategorie-Seiten bei Online-Shops) ist diese Methode eine gute Möglichkeit den Pagespeed zu verbessern.
Anfang April 2019 hatte das Chrome-Team angekündigt, dass Lazy Loading ab Chrome 75 nativ für Bilder und iFrames unterstützen wird. Hierzu wird keine JavaScript mehr benötigt. Ab Chrome 75 wird für das Aktivieren von Lazy Loading nur ein neues Loading-Attribut im Code benötigt. Dieses Attribut ermöglicht es, dass Bilder und iFrames erst geladen werden, wenn der Nutzer in der Nähe ist. Das Attribut wird bspw. folgendermaßen eingesetzt:
<img src="bild.jpg" loading="lazy" alt="..." />
<iframe src="seite2.html" loading="lazy"></iframe>
CSS Sprites
Mit CSS Sprites können mehrere Grafiken als eine Datei geladen werden. Dadurch spart man sich ein paar Requests. CSS Sprites sind eine Art Schablone (eine Datei), die alle Grafiken enthält. Mit speziellen CSS-Befehlen wird die benötigte Grafik am benötigten Platz auf der Webseite ausgegeben.
Responsive Images
Bei Responsive Images wird dem Nutzer das passende Bild zum Endgerät ausgespielt. Ruft ein Nutzer die Webseiten mit einem großen Bildschirm auf, so wird ihm ein großes Bild ausgegeben. Ruft der Nutzer die Webseite mit dem Smartphone auf, so wird ihm ein kleines Bild ausgegeben. Je nach Viewport bekommt der Nutzer also ein passendes Bild. Die HTML-Elemente <srcset> und <picture> sind die 2 Methoden, die die Ausgabe korrekt steuern. Beides wird mittlerweile von allen gängigen Browsern unterstützt. Ausnahmen: Internet Explorer und Opera Mini. Diese beiden müssen mit Polyfills (“Ein Polyfill, auch Polyfiller, ist ein – meist in JavaScript geschriebener – Code-Baustein, der in älteren Browsern eine neuere, von diesen nicht unterstützte Funktion mittels eines Workarounds nachrüsten soll” – Quelle) umgesetzt werden.
Bilder auf Subdomain auslagern (bis HTTP/2)
Bei vielen zu ladenden Dateien mussten früher Browser diese eine nach der anderen Laden. Moderne Browser unterstützen jedoch das Pipelining. Der Browser hat dadurch mehrere Anforderungen gleichzeitig schicken. Wenn dies auf die Webseite unterstützt können bis zu 8 Requests parallel laufen. Diese Einschränkung gilt pro Domain. Bei 16 zu ladenden Dateien (8 davon wären z.B. Bilder) wären also 2 Läufe notwendig. Nun kann man dies umgehen, indem man bspw. die Bilder über eine Subdomain (neue Domain = weiteres Pipelining) lädt. Während für die erste Domain 8 Requests parallel laufen, werden parallel dazu auf der zweiten Domain weitere 8 Requests parallel abgearbeitet.
Alternativen
Oft lässt sich der Einsatz von Bilddateien vermeiden, in dem man alternative Technologien benutzt. Beispielsweise kann man für Farbverläufe, Schattierungen oder Elemente wie Buttons CSS benutzen. Oder anstatt Text als .jpg oder .png einzusetzen, sollte dieser einfach als Webschriftart ausgeliefert werden.
Einsatz hinterfragen
Ein Bild sagt mehr als Tausend Worte und hilft dabei, den Webseitentext etwas aufzulockern. Frag dich aber trotzdem immer, ob die Einbindung eines Bildes sinnvoll ist. Manchmal erkennt man, dass an der gewünschten Stelle das Bild nicht den gewünschten Effekte erzielt. Hier macht es Sinn die Ressource zu entfernen.
Leere <img src=”” /> vermeiden
Dies hat zwar nichts mit der direkten Optimierung von Bildern zu tun, sondern vielmehr mit Code-Optimierungen, aber es betrifft Bilder. Leere Image-Tags sollten vermieden werden, da diese einen HTTP-Request verursachen, der aber einen Fehlercode zurückgibt. Das betrifft die Browser Internet Explorer, Chrome und Safari. Opera ignoriert leere Image-Tags und Firefox sendet ab Version 3.5 keinen Request mehr (Bug).
Resource Hints
Mit Resourcen Hints lassen sich Inhalte vorab schon laden. Seit Chrome 73 kann rel=”preload” zusammen mit Responsive Images verwendet werden, um die Auslieferung zu beschleunigen.
