Wer die User Experience, Ladegeschwindigkeit und die Sichtbarkeit seiner Website verbessern möchte, sollte darauf achten, Bilder richtig zu komprimieren. In diesem Guide zeigen wir Dir wie!
Bilder zählen zu den Elementen, die den größten Teil einer Webseite ausmachen. Format und Größe der Abbildungen auf einer Website haben damit einen großen Einfluss auf die Ladezeiten und auch auf das Ranking in den Suchmaschinen.
Ein Bild sagt mehr als tausend Worte – so das Sprichwort. Ein Bild ist oft allein ausschlaggebend dafür, ob wir den Artikel lesen oder das Produkt kaufen. Hochaufgelöste ausdrucksstarke Bilder sind Teil einer gelungenen User Experience und tragen somit maßgeblich zum Erfolg einer Website bei.
Die Kehrseite? Bilder belegen mehr Speicherplatz als viele tausend Worte. Fast 2 MB macht das durchschnittliche Downloadvolumen von Bildern auf Onlineshops aus – pro Seitenaufruf! Die Folge: Langsamer Page Speed.
Spätestens seit dem Google Algorithmus Speed Update wissen wir, dass Page Speed ein direkter Ranking Factor ist und sich auf die SEO-Performance auswirkt. 2021 ist die Ladegeschwindigkeit und Ladestabilität in Form der Core Web Vitals dann noch weiter in den Vordergrund gerückt. Was nützen die schönsten Produktfotos, wenn der Nutzer bereits bei deren Ladevorgang die Geduld verliert und die Website verlässt?
Für eine bestmögliche User Experience mit vielen hochaufgelösten Bildern und schnellem Page Speed solltest Du daher Bilder komprimieren. In diesem Guide zeigen wir Dir dazu verschiedene Methoden und Möglichkeiten, ob durch Programme, online im Browser oder durch automatisierte Services.
Im Allgemeinen unterscheidet man zwischen zwei verschiedenen Arten von Bildformaten: verlustfreie (lossless) und verlustbehaftete (lossy). Bilder mit verlustfreiem Format behalten auch komprimiert alle ursprünglichen Bildinformationen bei. Bilder mit verlustbehafteten Format können in diesem Prozess Informationen verlieren. Sie haben dafür aber ein höheres Optimierungspotential. Die wichtigsten Bildformate im Überblick:
JPEG ist das bekannteste und meistverwendete Bildformat im Internet. Flexibel in Farbtiefe und Modi ist es der Kompressionsstandard für die meisten Digitalkameras und wird auch für Printverfahren eingesetzt. Die verlustbehaftete JPEG-Kompression wird am besten für Fotos und Bilder mit vielen Details angewandt. Durch die Einteilung in Qualitätsstufen kann ein optimaler Kompressionsgrad ermittelt werden.
Das verlustfreie Format PNG kann Transparenzen darstellen und so vor einem andersfarbigen Hintergrund platziert werden. Die PNG-Kompression eignet sich weniger gut für Fotos. Bilder mit wenigen Details und gleichfarbigen Flächen kann sie dagegen viel besser komprimieren als beispielsweise JPEG. PNG bietet sich daher für Logos oder Infografiken an.
Auch GIF ist ein verlustfreies Bildformat, das transparente Flächen ermöglicht. Da damit allerdings nur 256 Farben dargestellt werden können, sollte die modernere PNG-Kompression bevorzugt werden. Ein kleines Revival hat das GIF-Format durch seine Möglichkeit der Animation bei Meme-Liebhabern erlebt. Als Website-Betreiber solltest Du trotzdem darauf verzichten.
Das von Google entwickelte Bildformat WebP bietet sowohl verlustfreie als auch verlustbehaftete Kompression an und ist daher flexibel einsetzbar. Ganz auf “Web Performance” optimiert, könnte das noch recht junge Format die Wachablösung für JPEG und PNG bedeuten. Bereits jetzt kann es PNG-Bilder bei gleicher Qualität um 26% verkleinern. WebP wird von den wichtigsten Browsern und Bild-Programmen unterstützt.
Wenn Du Dich auf der Kommandozeile zuhause fühlst, kannst Du Bilder von dort aus komprimieren. Mit Programmen wie ImageMagick, jpegoptim und Optipng lassen sich Bilder mit einer einzigen Anweisung optimieren und damit Zeit sparen. ImageMagick kann für alle gängigen Betriebssysteme installiert werden. Mit dem Kommando “convert” lassen sich dann beispielsweise JPEG-Bilder auf eine bestimmte Qualitätsstufe einstellen.
Abbildung 1: JPEG komprimieren mit “convert” von ImageMagick (Screenshot).
Das wichtigste Programm zur Bearbeitung und Aufbereitung von Bildern ist nach wie vor Adobe Photoshop. Unter „Bild > Bildgröße“ kannst Du das Bild verkleinern. Nach der Bearbeitung des Bildes stellt sich die Frage nach dessen Komprimierung. Unter „Datei > Für Web speichern“ bietet Photoshop alle gängigen Formate an. WebP kann über ein Plugin hinzugefügt werden.
Durch die vielen Optionen zur Kompression ist Photoshop das professionelle Tool, um Bilder zu komprimieren. Wenn Du Bilder allerdings nicht selbst erstellen oder bearbeiten, sondern einfach nur komprimieren möchtest, ist Photoshop nicht die beste Alternative. Von den hier vorgestellten Programmen ist es zudem das teuerste. Die manuelle Kompression von vielen Bildern nacheinander kann zudem sehr zeitaufwendig sein.
Abbildung 2: Bildgröße verändern in Photoshop.
Abbildung 3: Bilder fürs Web speichern.
Wer Bilder schnell und einfach komprimieren möchte, kann dazu kostenlose Tools verwenden. Eines davon ist das Freeware-Programm IrfanView, das sowohl für Windows als auch für Mac verfügbar ist. IrfanView unterstützt alle gängigen Formate und über ein Plugin auch WebP. Neben der Option, Bilder zu komprimieren, lassen sich auch Abmessungen und Farbtiefe modifizieren. Darüber hinaus können die bearbeiteten Bilder auch direkt mit einem Stempel versehen werden, um das eigene Copyright zu schützen.
Zur Komprimierung von Bildern stehen bei IrfanView verschiedene Möglichkeiten zur Verfügung. Um die Größe direkt in Pixeln oder Prozent zu ändern, wählt man den Speichern-Dialog und dort Dateiformat und Kompressionsstufe aus. Eine weitere Möglichkeit ist die sogenannte Batch-Konvertierung, bei der gleichzeitig große Mengen an Bildern bearbeitet werden können. Damit lassen sich etwa die Bildgröße verstellen, die Bilder in einen anderes Dateiformat konvertieren und die Komprimierung anpassen.
Abbildung 4: Bildbearbeitung mit IrfanView (Screenshot).
Wer sich nicht extra ein zusätzliches Programm installieren möchte, kann Bilder direkt online bearbeiten. Hierzu existieren mehrere Angebote im Netz, wie beispielsweise Compressjpeg oder Optimizilla. Bei ersterem können bis zu 20 JPGs per Drag & Drop hochgeladen werden, die dann automatisch komprimiert werden. Diese kann man anschließend einzeln oder als ZIP Archiv downloaden.
Optimizilla funktioniert im Grunde genauso, kann aber ein wenig mehr. Der Online-Optimierer benutzt eine intelligente Kombination der besten Optimierungs- und Kompressionsalgorithmen, um sowohl JPEG als auch PNG-Bilder auf die minimal mögliche Größe zu verkleinern, während das erforderliche Qualitätsniveau beibehalten wird. Hierbei können die Qualitätseinstellungen und der Komprimierungsgrad bearbeitet werden.
Abbildung 5: Mit Optimizilla lassen sich bis zu 20 Bilder gleichzeitig bearbeiten.
Ein weiteres praktisches Tool zur Bildkomprimierung ist TinyPNG. TinyPNG verwendet intelligente Komprimierungstechniken, um die Dateigröße Deiner PNG-Dateien zu reduzieren. Durch die selektive Verringerung der Anzahl der Farben im Bild werden zudem weniger Bytes für die Speicherung der Daten benötigt.
Abbildung 6: Abbildungen mit TinyPNG verkleinern.
Für die Betreiber von Websites mit vielen Bildern und Fotos, z.B. Online-Zeitungen und Onlineshops, ist die regelmäßige Komprimierung von Bildern mit einem erheblichen Aufwand verbunden. Um einen Kompromiss zu finden, verzichten sie daher meist auf eine individuelle Bildoptimierung und setzen stattdessen auf festgelegte Qualitätsstufen für alle Bilder. Dies führt oft zu einer minimalen Kompression und wenig Einsparnis beim Page Speed.
Um das Optimierungspotential jedes einzelnen Bildes zu berücksichtigen und eine maximale Kompression zu erreichen, können Algorithmen eingesetzt werden, die die Bildqualität wie das menschliche Auge einschätzen. Anbieter, wie beispielsweise der Cloud-Service wao.io, setzen auf solche Algorithmen, um Bilder vollautomatisch zu komprimieren. Mit wenigen Klicks kann die Optimierung eingerichtet werden und werden fortan komprimiert an die Nutzer der Website ausgegeben.
Abbildung 7: Automatisierte Bildkomprimierung in wao.io einstellen.
Wenn Du Dir nicht sicher bist, wie es um die Dateigrößen Deiner Bilder steht und welche Deiner Bilder komprimiert werden sollten, kannst Du diese ganz einfach in Ryte Web Performance prüfen. Der „Dateigrößen“-Report zeigt die Größen aller vorhandenen Website-Dokumente. Über den Dokumenten-Typ Filter kannst Du Deine Bilder separat betrachten und in der Tabellen Ansicht siehst Du alle Bildgrößen im Detail.
Abbildung 8: Bild-Dateigrößen prüfen mit Ryte
Auf Deiner Website solltest Du grundsätzlich nur Bilder verwenden, die für die Webnutzung optimiert sind. Generell gilt dabei: Fotos und hochwertige Grafiken sollten als .jpeg verwendet werden. Grafiken, die weniger Details und einfarbige Flächen haben dagegen als .png. An dieser Stelle geben wir Dir Tipps, wie Du Deine Website für Bilder optimieren kannst, um den Page Speed zu verbessern.
<picture>
<source srcset="img/testbild.webp" type="image/webp">
<source srcset="img/testbild2.jpg" type="image/jpeg">
<img src="img/testbild2.jpg" alt="Fallback-Bild">
</picture>
<img src="testbild.png" width="300" height="200">
Durch gute Bildkomprimierung lässt sich der Page Speed Deiner Website deutlich verbessern. Moderne Formate wie WebP sind hier zukunftsweisend. Dabei muss jedoch immer darauf geachtet werden, die Qualität eines Bildes zu wahren, damit es für den Nutzer immer noch ansprechend erscheint. Im Sinne der User Experience muss daher ein guter Kompromiss zwischen der Kompression eines Bildes und seiner Qualität gefunden werden.
Wir haben verschiedene Methoden gezeigt, mit denen man Bilder komprimieren kann. Dies beginnt bei der Detailarbeit an einzelnen Bildern in Photoshop oder anderen Bildprogrammen. Durch Stapelverarbeitung mit Online-Anwendungen lassen sich mehrere Bilder schnell bearbeiten. Wer viele Bilder auf seiner Website zur Verfügung stellt und den Aufwand zur Bild-Optimierung möglichst gering halten möchte, der ist mit einer automatisierten Alternative gut beraten.
Wie schnell laden Deine Website-Bilder?
Veröffentlicht am 25.03.2022 von Roland Guelle.
Roland Guelle ist als CTO der 1999 gegründeten Sevenval Technologies GmbH verantwortlich für Forschung und Entwicklung. Mit rund 170 Mitarbeitern in Köln und Berlin hat sich Sevenval auf Frontend Lösungen spezialisiert, die eine moderne, schnelle und vor allem sichere User Experience auch auf Basis historisch gewachsener IT-Systemlandschaften ermöglichen. Roland entwickelt auch heute noch selbst und spricht gerne auf Entwickler-Konferenzen.