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 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."
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, der 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.
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.
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 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.
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.
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. Wählt man den Kopressionsgrad jedoch zu hoch, können unschöne Artefakte im komprimierten Bild entstehen. Daher ist es ratsam, getroffene Einstellungen je nach Bildinhalt anzupassen und komprimierte Bilder zu prüfen.
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.
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. Ein Nachteil ist, dass einige ältere Browserversionen das Format nicht unterstützen und auch die Anzeige und Bearbeitung des Formats nicht mit allen Programmen möglich ist. Aufgrund der hohen Qualität ist WebP eine interessante Alternative zu JPEG und GIF.
Es gibt natürlich weitere Bildformate. Wir haben uns hier auf die gängigen und bekannten Bildformate konzentriert. Wobei PNG und JPEG nach wie vor die Liste anführen. Jetzt geht es darum die Bildformate entsprechend zu komprimieren. Dafür können Sie verschiedene Wege wählen.
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 .
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.
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.
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. Es muss allerdings bedacht werden, dass Plugins einmalig Ladezeit benötigen, um die Komprimierung vorzunehmen. Dies kann in diesem Fall jedoch vernachlässigt werden.
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 genannten Tools.
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.
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.
Ü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.
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.
Die robots.txt ist ein mächtiges Werkzeug zur Steuerung der Webcrawler-Zugriffe auf Ihre Website. Eine sorgfältig erstellte robots.txt-Datei trägt nicht nur dazu bei, Ihre SEO-Bemühungen zu optimieren, sondern verbessert auch die die Effizienz und Sicherheit Ihrer Website.
Am 27.09.2024 findet bereits zum siebten Mal die von JTL organisierte E-Commerce-Messe JTL Connect statt. Auf dem Gelände eines ehemaligen Paketzentrums XPOST in Köln werden bis zu 3.700 Besucher erwartet. Treffen Sie uns vor Ort und fragen nach unserer Messeaktion!
Testen Sie uns 14 Tage kostenlos Jetzt testen
