Bildkompression: Tipps & Tricks

Bildkompression: Tipps & Tricks

Zu einem einzigartigen Erlebnis im Online-Shop oder auf der Website gehören hochwertige Bilder. Fotos in einer hohen Auflösung gehen jedoch zulasten der Ladezeit. Da die Anzahl der Bilder steigt, ist Bildkompression immer wichtiger. Damit lässt sich die Größe der Datei reduzieren, ohne große Verluste in der Qualität in Kauf zu nehmen. In diesem Zusammenhang fassen wir zusammen, was Bildkompression ist, erklären wichtige Dateiformate und zeigen mögliche Wege für die Bildkomprimierung auf.

Bildkompression Definition

Bildkompression bedeutet, Bilder so umzuwandeln und Daten zu entfernen, dass der Verlust kaum oder gar nicht wahrnehmbar ist und sie gleichzeitig weniger Speicherplatz benötigen. Damit ist nicht das bloße Abspeichern in ein anderes Format gemeint, sondern das Entfernen unnötiger Bilddaten. Wichtig ist es, einen goldenen Mittelweg zwischen Reduzierung der Daten und guter Qualität zu finden. Wikipedia definiert es folgendermaßen:

 

"Bildkompression beruht wie jede Anwendung der Datenkompression darauf, die ursprünglichen Daten entweder in eine vollständig rekonstruierbare Form zu überführen, die weniger Speicherplatz benötigt oder Daten zu entfernen, deren Verlust kaum wahrnehmbar ist."

 

Gründe für die Bildkompression

Der Hauptgrund für die Bildkomprimierung ist denkbar einfach: eine bessere Ladezeit. Sie können den performantesten Server gebucht und richtig gut konfiguriert haben: Wenn die Bilder extrem groß sind, wirkt sich das negativ auf die Ladezeit aus. Die Ladezeit ist wiederum ein Faktor, die bei der Bewertung einer Website von Suchmaschinen hinzugezogen und von Besuchern wahrgenommen wird. Daher steht die Komprimierung von Bildern meist als einer der ersten Punkte auf der To-Do-Liste der Onpage-Optimierung. Das Ergebnis: Kleinere Bilddateien werden schneller vom Server zum Browser übertragen und die Ladezeit verbessert sich.

Einhergehend verbessert sich die Usability der Seite. Denn das Surfen auf einer Seite wird angenehmer, wenn diese schneller lädt. Die Besucher sind zufriedener und stöbern gerne auf der Website. Das gilt für die Nutzung am Desktop und mobil. Letzteres hat eine besondere Relevanz, da die Zugriffszahlen via mobilem Endgerät steigen. Unnötig große Daten für Bilder bewirken, dass diese mobil nur langsam heruntergeladen werden und darüber hinaus das Datenvolumen belasten. Wer also die Bilder komprimiert, verbessert auch die Usability auf mobilen Endgeräten wie Smartphones oder Tablets.

Ein weiterer Grund ist der Speicherplatz auf der Festplatte des Servers. Damit sollte ressourcenschonend umgegangen werden. Über komprimierte Bilddateien lässt sich Speicherplatz sparen, sodass dieser nicht so schnell an seine Grenzen kommt. Wenn der Speicherplatz nicht mehr ausreicht, muss oftmals auf einen größeren Server umgezogen werden.

Es sei angemerkt, dass es Fälle gibt, wo keine oder nur eine geringe Kompression vorgenommen werden sollte. Dazu gehören zum Beispiel Websites von Fotografen, die mit dem Foto als Produkt überzeugen wollen. Bei der Bildkompression ist also immer auch das Ziel zu berücksichtigen, das mit den Grafiken erreicht werden soll.

Gängige Bildformate

Elementar für das Verständnis der Bildkompression sind die unterschiedlichen Bildformate. Es gibt etliche Formate, von denen viele veraltet sind und gar keine Kompression unterstützen. Wir konzentrieren uns auf die aktuellen, gängigen Bildformate. Diese lassen sich in Bildformate mit verlustfreier und verlustbehafteter Kompression unterteilen.

Verlustfreie Kompression

Bildformate, die verlustfreie Kompression unterstützen, haben den Vorteil, dass sie den Inhalt der Bilder in allen Details reproduzieren. Das Prinzip der Bildkompressionen basiert in diesem Fall darauf, dass Redundanzen erkannt und entfernt werden. Das ist vor allem bei professionellen Anwendungen mit farblichen Abstufungen wichtig. So lässt sich der Werteverlust in der Qualität vermeiden. Verlustfreie Bildtypen sind unter anderem:

PNG

PNG sorgt für fast verlustfreie Kompression. Besonders ist das großes Farbspektrum. Das Format eignet sich vor allem für Grafiken, Logos und Texte beziehungsweise Bilder mit Textinhalten. PNG komprimiert Bilder mit wenigen Farben auf ein Bruchteil der Größe.

  • Verwendbare Transparenz mit 256 Stufen.
  • Kann bis 16,7 Millionen Farben abbilden.
  • Dateigröße im Vergleich zu anderen Formaten teils höher.
  • Eignet sich für Bilder mit Text sowie Logos.

GIF

GIF ist weit verbreitet und beliebt, wenn es um kleine Animationen geht. Diese können über ein GIF fast verlustfrei komprimiert werden, sodass sie sich für den Webeinsatz eignen. Allerdings ist das Farbspektrum mit 256 Farben sehr gering, sodass eventuell Abstriche in der Qualität gemacht werden müssen.

  • Kann bis zu 256 Farben abbilden.
  • Wenige Farben, sodass Bilder & Animationen unnatürlich wirken können.
  • Eignet sich für kleine Animationen & simple Grafiken.

Verlustbehaftete Kompression

Bei der verlustbehafteten Datenkompression wird sich die Wahrnehmung der Menschen zunutze gemacht. Kleine Änderungen an der Farbe sind für das bloße Auge nicht sichtbar, da das Empfinden von Farben eingeschränkt ist. Ein geringer Informationsverlust im Bild wird also überhaupt nicht bemerkt, solange die Qualität der Bildinhalte angemessen bleibt.

JPEG und JPEG 2000:

JPEG gehört zu den bekanntesten Bildformaten und ist sehr verbreitet. Das Ziel bei der Entwicklung des JPEG-Formats war Bilder zu komprimieren, aber möglichst realistisch darzustellen. Im Ergebnis ist eine sehr starke Komprimierung möglich, die bei zu hoher Einstellung allerdings zulasten der Qualität geht.

  • Kann bis zu 16,7 Mio Farben abbilden.
  • Starke Komprimierung möglich (Mehr als Faktor 10).
    Beispiel: 20 Megabytes Ausgangsgröße lässt sich auf weniger als 2 Megabyte komprimieren.
  • Eignet sich zum Speichern von Grafiken und Bildern mit vielen Farben sowie starken Kontrasten.

Verlustbehaftete & verlustfreie Kompression

webp:

Das Bildformat WebP wurde 2010 von Google entwickelt, als eigentlich ein Videoformat entwickelt werden sollte. Es beinhaltet verlustbehaftete und verlustfreie Komprimierung. Das Verfahren basiert auf prädiktiver Kodierung. Vereinfacht gesagt, beruht dieses Prinzip darauf, benachbarte Pixelblöcke zu überprüfen, einen Block vorherzusagen und dann nur den Unterschied zu codieren. Das Verfahren komprimiert Bilder mit einer sehr hohen Rate zwischen 26 und 34 Prozent, wobei gleichzeitig eine sehr hohe Qualität erhalten wird. Allerdings eignet sich WepP nicht für sehr detailreiche Bilder. Der Nachteil ist außerdem, dass aktuell (noch) nicht alle Browser das Format unterstützen und auch die Anzeige des Formats nicht mit allen Programmen möglich ist. Aufgrund der hohen Qualität ist WebP eine interessante Alternative zu GIF.

  • Behält nach Komprimierung eine hohe Bildqualität.
  • Hohe Komprimierungsraten zwischen 26 und 34 Prozent erreichbar.
  • Eignet sich zum Speichern von Grafiken und Animationen.

Es gibt natürlich weitere Bildformate. Wir haben uns hier auf die gängigen und bekannten Bildformate konzentriert. Wobei JPEG nach wie vor der Platzhirsch ist. Jetzt geht es darum die Bildformate entsprechend zu komprimieren. Dafür können Sie verschiedene Wege wählen.

Bildkompression – wie gehe ich vor?

Möglichkeit 1: Direkt über den Server

Sie haben die Möglichkeit direkt über den Server die Bildkomprimierung zu starten. Auf den Servern von Timme Hosting stellen wir Tools wie optipng oder jpegoptim zur Verfügung. Auf der Kommandozeile kann man mithilfe dieser Tools ganz einfach alle PNG- und JPG-Dateien eines Verzeichnisses mit einem Befehl optimieren. Sie laden dafür wie gewohnt die Bilder über das Shopsystem beziehungsweise CMS hoch. Danach verbinden Sie sich per ssh mit dem Server und starten das gewünschte Tool, um die Bilder zu optimieren. Hier finden Sie eine passende Anleitung: verlustfreien Optimierung der Bilder .

Möglichkeit 2: Bilderbearbeitung

Bei Online-Shops ist es aufgrund der vielen Produktbilder extrem wichtig, gleich von Anfang an auf das passende Bildformat zu achten. Im ersten Schritt macht es also Sinn, die entsprechenden Bildformate zu definieren. Zum Beispiel das für das Logo ein PNG eingesetzt wird und für große Grafiken lieber JPEG. Beim Speichern der Grafiken mit einem Bildbearbeitungsprogramm lässt sich die Komprimierung einstellen und so werden große Dateien im Shop vermieden.

Photoshop als professionelles Bildbearbeitungsprogramm bietet diesbezüglich einige Funktionen. Die Software von Adobe hat die praktische Option „Für Web speichern“. Hier stehen für die Komprimierung die drei Webformate GIF, PNG und JPEG zur Verfügung. Außerdem kann das auf mobile Geräte ausgerichtete Format WBMP (Wireless Bitmap) gewählt werden. In einem neuen Fenster sind weitere Einstellungsmöglichkeiten auswählbar und das Ergebnis des Zielbildes wird während der Anpassung angezeigt. So lässt sich auf einen Blick sehen, ob sich die Komprimierung auf die Qualität auswirkt.

Möglichkeit 3: Über die Shop-Software oder das CMS

Bilder können in Shopware, Magento, Drupal und zahlreichen anderen Systemen beim Hochladen komprimiert werden. Zum Beispiel gibt es bei Shopware einen Mediaoptimizer. Dieser sucht das optimale Bildformat, um das Bild im Shop auszuspielen und das Datenvolumen gering zu halten. Die Stärke der Komprimierung wird über das CMS gesteuert. Diese - sehr praktische - Funktion lässt sich aktivieren und deaktivieren.

Möglichkeit 4: Plugins

Es gibt für jedes Shopsystem oder CMS zahlreiche Erweiterungen, die die Bildkompression übernehmen und den Prozess erleichtern. Bei WordPress sind es zum Beispiel Imagify oder Image Optimizer. Damit können Sie schnelle Ladezeiten erzielen und verbrauchen weniger Speicherplatz auf dem Server. Im Vergleich arbeitet WordPress und Plugin effizienter in der Bildkomprimierung als Pagespeed. Es muss allerdings bedacht werden, dass Plugins einmalig Ladezeit benötigen, um die Komprimierung vorzunehmen. Dies kann jedoch vernachlässigt werden.

Möglichkeit 5: Pagespeed aktivieren

Pagespeed ist bei Timme Hosting von Haus aus auf den Servern installiert. So haben Sie die Möglichkeit Pagespeed über die Verwaltungsoberfläche für Ihren Webserver zu aktivieren. Einmal aktiviert, übernimmt Pagespeed die Bildkomprimierung und weitere Optimierungsverfahren. Das ist natürlich sehr kompfortabel. Jedoch kann es besser sein, wenn das CMS oder ein Plugin die Bildkomprimierung übernimmt. Diese haben direkten Zugriff auf die Bilder, sind besser integriert und erhalten zum Beispiel Informationen über Aktualisierungen von Bildinhalten direkt.

Möglichkeit 6: Browser-Software

Es gibt eigens dafür entwickelte Programme, die über den Browser aufgerufen werden können. Alle haben gemeinsam, dass man darüber sehr einfach Bilder komprimieren kann. Die Bilder werden per Drag & Drop hochgeladen, komprimiert und stehen dann als Download zur Verfügung. Der Aufwand ist zwar relativ hoch, aber wer nicht zu viele Bilder hat, für den lohnen sich diese Tools. Zu den bekannten Bildkomprimierungs-Tools gehören Optimizilla, TinyPNG oder Imagify. Es gibt natürlich etliche mehr. Hier eine kurze Beschreibung der drei genanntenTools.

Imagify

Imagify ist sehr leicht zu bedienen, allerdings erfordert es im Vergleich zu den anderen beiden Tools eine Anmeldung. Das Bild oder mehrere Bilder werden danach per Drag & Drop hochgeladen. Die Komprimierung der Bilder beginnt sofort und dauert nur kurze Zeit. Die Bilder lassen sich dann einzeln oder alle als .zip herunterladen. Wer möchte, kann sie gleich auf Social Media teilen. Imagify hat 3 Stufen der Komprimierung, die sich einstellen lassen: Normal, Aggressive und Ultra. Dadurch lässt sich mit Imagify eine relativ hohe Optimierung des Datenvolumens erreichen. Bei Ultra ist der Datenverlust jedoch leicht sichtbar. Wenn keine High Quality Bilder benötigt werden, reicht das aber für die Webansicht aus.

Screenshot Imagify

TinyPNG

Der Name weist auf PNG hin. Über TinyPNG lassen sich aber ebenfalls JPEGS komprimieren. Wie bei Imagify werden die Bilder per Drag & Drop hochgeladen, jedoch ist hier (erstmal) keine Anmeldung nötig. Die Komprimierung startet sofort und der Download ist kurz danach verfügbar. Hier lassen sich die Bilder direkt in der Dropbox speichern. Ein Hinweis zeigt, welche Einsparung des Speichervolumens erreicht wurde.

Screenshot TinyPNG

Optimizilla

Über Optimizilla lassen sich JPEG und PNG Bilder verkleinern. Bis zu 20 Bilder können gleichzeitig zur Komprimierung hochgeladen werden. Nach einem Klick auf das Bild haben Sie die Möglichkeit über einen Slider die Qualität anzupassen. Das Gute: Es wird gleich eine Vorschau der Kompression im Vergleich zum Originalbild angezeigt.

Screenshot Optimizilla

Wir fassen zusammen

Hinsichtlich der Performance eines Online-Shops oder einer Website – gerade auch in Hinsicht auf mobile Endgeräte – bleibt Bildkompression ein wichtiger Faktor. Dies ist ein Weg über den sich das Datenvolumen verringern lässt, sodass die Übertragung der Daten vom Server zum Browser schneller geht. Für die Umsetzung gibt es nicht den einen Königsweg, sondern es gilt, einen möglichst geschickten Weg zur Optimierung der Bildinhalte zu finden. Wir haben verschiedene Wege aufgezeigt. Darüber lassen sich die Bilder im Shop weitestgehend verlustfrei komprimieren.

Testen Sie uns 14 Tage kostenlos Jetzt testen