Bilder sind beim Kaufentscheid enorm wichtig und folglich auch essentiell für eine gute Konversion; schnelle Ladezeiten allerdings auch.
Und das ist die Krux an der Thematik Bilder. Eine hohe Bildqualität geht mit einer großen Dateigröße einher. Aber die vielen KBs, die beim Laden der Seite abgerufen werden, sind der Grund für hohen Netzwerktraffic.
Das ist insbesondere beim Mobile Shopping eine kritische Situation und voluminöse Bilddateien werden zum Performance-Killer.
Eine Lösung für diese Herausforderung ist, die Dateigrößen der Bilder zu verkleinern. Ein probater Ansatz, der allerdings in der aktuellen Praxis bedeutet, dass Bilder händisch bearbeitet werden müssen. Bei nahezu jedem:r Händler:in wird viel über Bildgröße und Bildqualität diskutiert. Dabei plädiert das Technik-Team für schnelle Ladezeiten; hingegen die Marketers für exzellente Bildqualität. Beide Teams investieren aus unserer Sicht viel zu viel Zeit und Nerven in das Thema.
Das Team von Lepona setzte die Lösung ImageMagick ein. Jedes Bild, das in den Shop geladen wurde, wurde bei der ersten Darstellung on-the-fly durch ImageMagick (PHP-Bibliothek) optimiert. Allerdings war die Reduzierung der Größe nur begrenzt möglich, es wurde einfach zu verpixelt. Außerdem wurde das nur für Produktbilder verwendet, andere Bilder wie Logos, Content-Fotos, etc. mussten vorher händisch bearbeitet werden.
Unser Feature “Smart Proxy Bildoptimierung” löst bei Lepona diese frustrierende Situation vollumfassend auf.
Zu große Bilddateien: können bis zu 80 % reduziert werden
Zu hoher Qualitätsverlust: die Reduzierung ist für das menschliche Auge unsichtbar
Intensive Arbeitsleistung: das Feature arbeitet automatisiert
Originalgröße: 1,1 MB
Optimierte Größe: 186 KB
Vorab: Die Bildoptimierung ist ein Bestandteil unseres neuen “Smart Proxys”. Hier handelt es sich um eine vorgeschaltete Node, die eigentlich für das Caching von Shopinhalten gedacht ist. Die Bildoptimierung kann aber auch ohne das generelle Caching genutzt werden.
Die Bilder, die vom Browser angefragt werden, werden beim ersten Mal vom Shop-Server abgerufen und werden einerseits direkt an den Browser ausgeliefert, andererseits werden sie optimiert sowie im Smart Proxy Cache gespeichert. Beim nächsten Aufruf desselben Bildes, wird dieses dann direkt aus diesem Cache ausgeliefert. Somit wird der Shopserver entlastet und auch der Smart Proxy muss die Optimierungsarbeit nur einmal erledigen
Das Neue dabei ist, dass die Bilder auch perfekt optimiert ausgeliefert werden. Denn ergänzend zu der bekannten Cache-Funktion, verkleinert das Feature die Bilddateien. Wir halten fest: der Smart Proxy speichert die Shop-Bilder und liefert diese automatisch optimiert aus. Das entlastet die Shop-Server. In Summe steigert dies die Performance und der/die User:in hat eine schnellere Ladezeit - insbesondere beim Mobile Shopping.
Insgesamt ist dabei wichtig zu wissen, dass eine Optimierung der Bilder stattfindet, ohne, dass der Code der Shopsoftware bearbeitet werden muss. Der Aufwand ist somit einmalig und gering.
Die Bildoptimierung geschieht anhand eines Algorithmus namens SSIM (structural similarity). Diese Methode schätzt die wahrgenommene Qualität ein. Das ist ein wichtiger Unterschied zu anderen Algorithmen, die sich häufig auf Fehler konzentrieren. Diese Methode vergleicht Bilder miteinander. Sie schließt beispielsweise Helligkeitsmaskierungen und Kontraste mit ein, also Strukturinformationen des Bildes. Dabei ist das Ursprungsbild immer die Referenz. Dieser Workflow ähnelt der menschlichen visuellen Wahrnehmung und kann somit Bilder optimal komprimieren, ohne dass das menschliche Auge dies sieht. Wahnsinn!
Das bedeutet, dass jedes Bild individuell optimiert wird und nicht wie bei anderen Tools ein Qualitätswert für alle Bilder angewendet werden muss. Dabei werden nur die Bilder optimiert, die auch das Potenzial dafür haben.
In unserem Case, der unten runtergeladen werden kann, ist das gut zu sehen. Das erste Bild hat das Potenzial für mehr als 80 % Reduzierung und das zweite Produktbild eben nur für knapp 40 %; beide werden automatisch reduziert.
Yes, endlich ist das Thema Bildgrößen vom Tisch! Das nervte zunehmend, gerade mobil. Zwar reduzierte ImageMagick bereits, aber bei weitem nicht in der Qualität und in dem Umfang. Die Bildoptimierung des Smart Proxy optimiert viel mehr, besser, individuell und automatisiert! Was will man mehr! Wir sind super happy; und lassen das jetzt in allen drei Shops implementieren.
Ja! Die Methode arbeitet mit einem Index. Je nachdem, wie dieser eingestellt wird, kann der Grad der Optimierung beeinflusst werden.
Erst seit Oktober 2020 ist das Feature Teil des Best Practice Bundle. Es ist im Bundle inkludiert und somit für jede:n ScaleCommerce Kund:in nutzbar und sinnvoll. Es entsteht lediglich Aufwand für die Einrichtung durch eine:n Techniker:in von uns.
Der Smart Proxy löst das leidige Thema Bildgrößen vollumfassend. Im Team werden die Prozesse als auch die Qualität der Bilder optimiert und in Summe spart jedes einzelne KB wertvolle Ladezeit - insbesondere mobil.