Leitfaden für Bildupload Performance

Mehr Performance durch Bild-Optimierung

Jonas Ochudlo 26. August 2020 1

Worum geht es genau?

In diesem Beitrag reden wir über die unterschiedlichen Bildformate. Welche Art für welchen Bereich am besten genutzt wird und welchen Einfluss die unterschiedlichen Formate auf die Performance Deines Onlineshops haben können (diese Tipps sind auch im Allgemeinen anwendbar).

Warum sollte man unterschiedliche Formate nutzen?

Jedes Format hat einen Bereich, für den es am besten geeignet ist.

Durch die richtige Auswahl des Formats kann man sich oder seinem Grafiker einiges an Zeit und Arbeit ersparen.

Aber der hauptsächliche Grund, weshalb man insbesondere im Bereich des E-Commerce auf die Wahl seiner Bildformate achten sollte, ist die Performance. Die Wahl des Formats eines Bildes kann sich positiv oder negativ auf die Performance Deiner Website bzw. auf Deinen Onlineshop auswirken.

Jedes Format hat seine eigenen Eigenschaften, welche für bestimmte Zwecke optimaler geeignet sind, als z. B. andere Formate.

Mit der richtigen Auswahl des Formats eines Bildes kann man den häufigsten Grund für einen unperformanten Onlineshop leicht verhindern und so seinen Kunden ein optimales Shopping-Erlebnis liefern.

Wie sollte ich die Formate ändern?

Das Ganze kommt auf Deine Shopgröße an. Wenn Du niedrige Besucherzahlen und wenig Produkte hast, kannst Du diese selber ändern.

Das geht z. B. über den kostenlosen Dienst TinyPNG, wo Du Deine Bilder komprimieren kannst, um die Größe zu reduzieren. Wenn Du das Format Deines Bildes ändern möchtest, empfehlen wir Dir Convertio.

Solltest Du aber einen größeren Shop haben, empfehlen wir Dir eine automatische und kostenpflichtige Lösung über Imgix. Bei Imgix werden Deine Bilder von Imgix automatisch und performanceoptimiert komprimiert und dann auf den Browser des 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 das optimierte Format für das Bild verwendet.

Bilder optimieren

Passende Auflösung der Bilder:

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.

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

Dateinamen anpassen:

Jede Bilddatei sollte immer einen eindeutigen Namen haben, der mit Keywords versehen ist (z. B.: Demoshop_HerrenTshirt_schwarz).

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

Wir empfehlen hier TinyPNG. Dort kann man die Dateien per Drag & Drop hochladen und einfach und unkompliziert komprimieren.

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

Interne Ordnerstruktur
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 mit Blogbeiträgen in Deinem Shop haben solltest, sollte jeder Blogbeitrag einen eigenen Ordner mit Bildern haben.

Wann sollte ich welches Format verwenden?

Hier werde ich nur nennen, welches Format wann genutzt werden sollte. Falls Du noch Fragen hast, findest unten weitere Infos.

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, was man mit JPG’s nicht machen 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 wirklich detailliert ist. Warum nur wenig detaillierte Animationen?

Das liegt daran, da 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). Trotz der Animationen sind diese ziemlich kompakt und deutlich besser für kleine Animationen geeignet als ein Video.

WebP

WebP ist das aktuell bestgeeignetes Format in der Webanwendung. Nur gibt es hier ein kleines Problem: Obwohl es im Vergleich zu den anderen Formaten besser ist, wird es nicht von allen Browsern unterstützt.

Mittlerweile unterstützen zwar auch Browser wie z. B. Mozilla Firefox, Safari oder MS Edge das Format, aber dort auch nur die neuere Version. Wer also noch eine Browserversion aus dem Jahr 2018 oder 2019 hat läuft Gefahr, dass das Bild nicht angezeigt wird.

Welche Bildformate gibt es und was sind die Unterschiede?

PNG, JPG (oder JPEG. JPG = Abkürzung), GIF, SVG,

JPG (JPEG)

JPG ist dasselbe wie JPEG (Joint Photographic Experts Group) und ist im Endeffekt nur eine Abkürzung. Diese wurde verwendet, da Windows zur damaligen Zeit nur Formate mit 3 Zeichen unterstützt hat. Dennoch sind heutzutage noch beide Formate zu finden.

JPG 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, sprich ein reales Bild mit möglichst vielen Details anzuzeigen.

PNG

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.

Hier handelt es sich einmal um das PNG-8 (8-Bit-PNG) Format. Also ein Format mit einem 8 Bit Kanal.

Um mit den Kanälen und der Bit-Anzahl etwas anfangen zu können, müsstest Du Dich mit der Materie ein wenig mehr auseinandersetzen.

Falls Du daran Interessiert bist, empfehle ich Ihnen einen Blog Beitrag von Christoph Erdmann (https://compress-or-die.com/PNG-verstehen).

Um es aber vorerst einfach zu halten: Je mehr Bits das Format hat, desto mehr Informationen kann man Speichern. Somit kann man in einem 24-Bit-PNG Format mehr speichern, als einem 8-Bit-PNG Format.

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.