Bilder komprimieren – Ladezeit reduzieren: So geht’s!

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.

Warum Du Bilder fürs Web komprimieren solltest

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.

Bildformate und deren Einsatz

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, auch JPG (Joint Photographic Experts Group)

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.

PNG (Portable Network Graphic)

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.

GIF (Graphics Interchange Format)

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.

WebP

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.

Bilder komprimieren auf Windows und Mac

Bilder komprimieren mit ImageMagick

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

Bilder komprimieren mit Photoshop

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.

Bilder komprimieren mit Freeware-Programmen

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

Bilder online komprimieren mit Optimizilla & Co.

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.

Bilder automatisiert komprimieren

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.

Bildgrößen mit Ryte prüfen

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

Tipps zur Bildoptimierung für schnelleren Page Speed

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.

• Nicht alle Browser unterstützen derzeit das WebP-Format: Wenn Du WebP-Bilder verwenden möchtest und eine browserübergreifende Darstellung sicherstellen möchtest, dann richte einen Fallback zu einem JPEG- oder PNG-Bild ein.

• Gib im Quellcode die entsprechende Bildgröße an: Wenn ein Browser die Maße von Grafiken selbst berechnen muss, kann das Ladezeit kosten. Die angegebene Größe sollte der Originalgröße des auf dem Server hinterlegten Bildes entsprechen. Die Ausgabe der Bildgröße kannst Du auch über CSS definieren.

• Meta-Tags und EXIF-Daten von Bildern entfernen: Wenn Du zum Beispiel Bilder von der eigenen Kamera oder dem Smartphone verwendest, verfügen diese über zahlreiche Zusatzinfos wie Aufnahmeort, verwendete Kamera und andere Daten. Mit einem Tool wie TinyPNG kannst Du diese entfernen und Speicherplatz sparen.

• Umstellung auf HTTP/2: Werden Deine Bilder über eine normale HTTP-Verbindung geladen, muss jedes Bild einzeln angefordert werden. Durch die Umstellung auf HTTP/2 im Webserver werden alle Bilder und andere Dateien der Website über eine einzige Verbindung geladen, was die Ladezeit erheblich verringern kann. Für HTTP/2 ist ein SSL-Zertifikat vonnöten.

• Nutzung einer CDN: Wenn trotz aller Optimierung noch viele große Bilder geladen werden müssen, können sie einfach näher zum Nutzer gebracht werden. Durch ein Content Delivery Network (CDN) wie beispielsweise das oben erwähnte wao.io werden die Bilder Deiner Website auf schnellen Servern zwischengespeichert und von dort aus an den Nutzer übertragen.

• Mehr Tipps für schnellere Ladezeiten in unserem ausführlichen Artikel zur Page Speed-Optimierung
  

Fazit: Bessere Website Performance durch Bildkomprimierung

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.