Bessere Performance durch Bildoptimierung

Daniel Wolf 26. August 2020 1

Leitfaden: Durch Bildoptimierung zum schnellen Onlineshop

Performance Optimierung wird immer relevanter und steht stetig auf der To-Do-Liste vieler Shopbetreiber. Wir zeigen Dir in diesem Beitrag wie Du die Bilder in Deinem Onlineshop bestmöglich optimieren kannst. Du erfährst welche Bildformate es gibt, welche wofür geeignet sind und welchen Einfluss die unterschiedlichen Formate auf die Performance Deines Onlineshops haben.

Der Einfluss von Bildern auf die Performance

Warum solltest Du überhaupt optimierte Dateiformate und -größen in Deinem Shop nutzen? Die Wahl des Formats eines Bildes kann sich positiv oder negativ auf die Performance Deiner Website bzw. Deines Onlineshops auswirken. Mit der richtigen Bildoptimierung kannst Du schnell und einfach eine Verbesserung der Shopperformance erzielen und so Deinen Kunden ein optimales Shopping Erlebnis liefern.

Verwendung unterschiedlicher Dateiformate im eCommerce

Jedes Format hat seine eigenen Eigenschaften, welche für bestimmte Zwecke optimaler geeignet sind, als andere Formate. Du solltest für die unterschiedlichen Bereiche Deines Onlineshops auch unterschiedliche Bildformate und -auflösungen bereitstellen. Logos unterscheiden sich dabei von Produktbildern im Listing und diese wiederum von Bildbannern in Blogbeiträgen oder auf Landingpages. Mach Dir also am besten vor der Optimierung Gedanken darüber, wofür das Bild später verwendet wird.

Die verschiedenen Bildformate und deren Verwendung - eine Übersicht

Wir haben eine kleine Übersicht erstellt, wann welches Format eingesetzt werden sollte

JPG (JPEG)

JPG sollte man hauptsächlich als Produktbild oder als ähnliche Grafiken mit hoher Qualität nutzen. Der Vorteil an JPG Bildern ist, dass man hohe Qualität bei geringer Dateigröße darstellen kann.

PNG

PNG hat im Vergleich zu JPG eine größere Dateigröße. Nun stellt sich die Frage: "Warum sollte ich dann PNG’s verwenden?" Im PNG-Format kannst Du Deine Bilder mit einem transparenten Hintergrund darstellen, der für Grafiken und Logos relevant sein kann.

Somit sollte man PNG’s nur dann nutzen, wenn man unbedingt einen transparenten Hintergrund benötigt.

SVG

Aufgrund der Kompaktheit von SVG-Grafiken und dem Vorteil, dass man dieses skalieren kann, ohne einen Qualitätsverlust zu erleiden, sollte man diese bevorzugt für statische Ressourcen verwenden, wie z. B. Logos oder Grafiken - welche man selten ändert.

GIF

Das GIF-Format sollte man nutzen, wenn man eine animierte Grafik darstellen möchte, welche nicht sehr detailliert ist. Warum nur wenig detaillierte Animationen?

Das liegt daran, dass Du mit dem GIF-Format nur 256 unterschiedliche Farben pro Pixel darstellen kannst (zum Vergleich: JPG’s und PNG’s können 16 Millionen Farben darstellen). GIF's sind ziemlich kompakt und deshalb für kleine Animationen besser geeignet als ein Video.

WebP

WebP ist das aktuell bestgeeignete Format in der Webanwendung. (Eigentlich.) Das Problem: es wird nicht von allen Browsern unterstützt. Man läuft also Gefahr, dass das Bild bei einigen Browserversionen nicht angezeigt wird.

Der Unterschied zwischen jpg und png

JPG für Produktfotos

JPG oder JPEG (Joint Photographic Experts Group) ist eines der am meisten verbreiteten Bildformate.

Der wohl größte Unterschied zu anderen Formaten ist, dass JPG´s keinen transparenten Hintergrund haben können. Sie sind dafür optimiert ein Foto, mit möglichst vielen Details anzuzeigen und eignen sich daher für die Verwendung auf Detail- und Listingseiten.

PNG für transparenten Hintergrund

PNG's werden bevorzugt für Grafiken und Logos genutzt. Nur so ist es möglich, transparente Hintergründe auch transparent darzustellen und weiße Ränder zu vermeiden. Nicht nur bei Deinem eigenen Shoplogo, sondern auch bei den Logos Deiner Versand- und Zahldienstleister ist PNG die richtige Wahl.

Bei PNG ist zu beachten, dass es hier 3 unterschiedliche Arten des Formats gibt. Diese sind einmal 8-Bit-Formate, 24-Bit-Formate und 32-Bit-Formate.

Vereinfacht: Je mehr Bits das Format hat, desto mehr Informationen können in diesem abgespeichert werden.

Der eigentliche Unterschied zwischen 8-Bit und 24- / 32-Bit-PNG Formaten liegt darin, dass ein 8-Bit-PNG Bild, im Gegensatz zu einem 24- oder 32-Bit-PNG, nur 265 unterschiedliche Farben pro Pixel darstellen kann. 24-Bit oder 32-Bit PNG’s können 16 Millionen Farben pro Pixel darstellen.

Dateiformate anpassen und Bilder verkleiner

Der erste Schritt bei der Optimierung der Bilder Deines Onlineshops sollte die Komprimierung der verwendeten Dateien sein. Unsere Erfahrungen haben gezeigt, dass Shopbetreiber oft viel zu große Bilddateien nutzen und durch eine Optimierung Ladezeit einsparen können.

Tools zur schnellen Komprimierung

Wenn Du einen kleinen Shop mit wenigen Produkten betreibst, empfehlen wir den kostenlosen Dienst TinyPNG zur Komprimierung von Bildern. Hier kannst Du bis zu 20 Dateien auf einmal hochladen und von dem Tool komprimieren lassen. Mit einem einzigen Klick lädst Du die Bilder wieder herunter und kannst sie dann in Deinem Shop austauschen. Wenn Du das Format Deines Bildes ändern möchtest, empfehlen wir Dir Convertio. Von JPG zu PNG und von PNG zu SVG. Das geht mit diesem Datei-Konverter problemlos.

Bilder automatisch verkleinern

Solltest Du einen größeren Shop haben, nimmt die manuelle Bildkomprimierung wahrscheinlich sehr viel Zeit in Anspruch. Wir empfehlen wir Dir dann eine automatische und kostenpflichtige Lösung über Imgix. Bei Imgix werden alle Bilder automatisch optimiert, wieder abgespeichert und bei der Verwendung jederzeit auf den Browser Deiner Kunden angepasst.

Beispiel: Wenn der Browser des Kunden WebP-Bilder unterstützt, werden ihm diese auch bereitgestellt. Sollte der Browser des Kunden aber kein WebP unterstützen, wird ein optimiertes Format für das Bild verwendet.

Bildauflösung optimieren

Je größer die Auflösung eines Bildes ist, desto größer ist die Datei. Daher ist es wichtig, die richtigen Bildgrößen zu verwenden und dadurch unnötig große Bilder zu vermeiden.

Ohne einen Richtwert kannst Du Deine Bilder nicht komprimieren, das ist klar. Leider können wir Dir auch keine Pauschallösung nennen. Während eine Dateigröße von 50 KB für ein Bild im Produktlisting absolut ausreichend ist, sollte ein Banner auf der Startseite eine etwas höhere Bildauflösung und Dateigröße haben.

Einkaufswelten	1920 x 1080
Banner	1920 x 1080
Artikelbilder	200 - 400 x 200 - 400

Was ist mit der Bildqualität?

Große Bilddateien und schlechte Performance oder schneller Shop aber miserable Bildqualität?

Vor dieser Entscheidung stehst Du gar nicht! Denn durch die von uns aufgeführten Tools wird ausschließlich die Dateigröße komprimiert. Die Qualität Deiner Fotos leidet nicht unter der Verkleinerung der Dateien.

Bilder komprimieren für eine bessere Performance

Durch das Komprimieren der Bilder, werden überflüssige Daten aus der Bilddatei entfernt, wodurch die Größe der Datei reduziert wird.

In der Vergangenheit konnten wir oft feststellen, dass man durch das Komprimieren bis zu 80 % der Datenmengen einsparen kann, ohne einen spürbaren Qualitätsverlust zu erleiden.

Interne Ordnerstruktur
Übrigens: Eine ordentliche Ordnerstruktur ist immer wichtig, um Zeit zu sparen und Dateien schnell finden und editieren zu können. Wenn Du z.B. einen Blog in Deinem Shop hast, sollte jeder Blogbeitrag einen eigenen Ordner mit Bildern haben. Das erleichtert Dir und Deiner Agentur die Arbeit, wenn es um das Thema Bildoptimierung geht.

So und jetzt los: optimiere die Bilder Deines Onlineshops und trage so zur Verbesserung der Performance bei.

Wir wünschen Dir viel Spaß dabei!