Intelligente Bildoptimierung mit ShimmerCat - Textalk Abicart

Komprimierte Bilder - schnellerer Webshop Große Bilder sind der häufigste Grund, warum Websites langsam laden. Das ärgert nicht nur die Besucher - es wirkt sich auch negativ auf dein Ranking in den Suchergebnissen aus. In vielen Fällen können die Seitengröße und die Ladezeit allein durch die Komprimierung von Bildern um die Hälfte reduziert werden. Bilder brauchen viel Platz auf Websites und können lange laden, wenn ein Besucher z. B. eine langsame mobile Verbindung hat. Deshalb ist es wichtig, deine Bilder so zu komprimieren, dass sie so wenig Platz wie möglich benötigen. Du kannst Formate wie .jpg und .png oft um mehr als 70% komprimieren, ohne dass die Bildqualität darunter leidet. Wenn du zum Beispiel ein 1 MB großes Bild hast, kann es so komprimiert werden, dass es nur noch 0,1 MB benötigt. Da du wahrscheinlich zehn oder mehr Produktbilder auf deinen Produktseiten hast, kann die Bildoptimierung also einen erheblichen Einfluss auf die Ladezeit haben. Gleichzeitig geht es bei der Bildkomprimierung aber auch um Qualität. Es ist immer möglich, Bilder so zu komprimieren, dass sie fast keinen Platz mehr einnehmen, aber auf der anderen Seite kann es unmöglich sein, zu erkennen, was das Bild darstellt. Die große Herausforderung einer effektiven Bildoptimierung besteht darin, eine Harmonie zwischen Qualität und Kompression zu finden - und genau darauf konzentriert sich ShimmerCat. Mit einer automatisierten Lösung, die auf von Forschern entwickelter KI basiert, bekommst du die intelligenteste Bildoptimierung auf dem Markt, die sich um sich selbst kümmert!

Bildoptimierung ist nicht nur Komprimierung, sondern auch Qualität

Das Hauptziel der Bildoptimierung ist es, ein Gleichgewicht zwischen minimaler Dateigröße und akzeptabler Bildqualität zu finden.

Um die Dateigröße zu verringern, werden durch verlustbehaftete Komprimierung Informationen aus dem Bild entfernt. Wenn dies auf intelligente Weise geschieht, zum Beispiel durch die Nutzung von Regelmäßigkeiten im Bild, die das menschliche Auge nicht erkennen kann, ist es möglich, auch Ergebnisse mit akzeptabler Bildqualität zu erzielen.

Die beiden wichtigsten Punkte, die bei der Bildoptimierung zu beachten sind, sind das Dateiformat und die Art der Komprimierung. Wenn du die richtige Kombination aus Dateiformat und Komprimierungsart wählst, kann die Bildoptimierung große Auswirkungen haben.

Wenn du zum Beispiel mehr über Bildkomprimierung erfahren möchtest, schau dir den Blogbeitrag Bildkomprimierung und Next-Gen-Bildformate an.

Optimierte Bilder und Google PageSpeed Insight

Eine häufige Empfehlung in Google PageSpeed Insights "Serve images in next-gen formats". Mit der Bildoptimierung von ShimmerCat erfüllst du dieses Kriterium, und das wirkt sich in der Regel sehr positiv auf das Ranking deiner Website aus.

Was sind Next-Gen-Formate?

Next-Gen-Bildformate sind moderne Dateiformate wie WebP und AVIF, die im Vergleich zu den traditionellen JPEG- und PNG-Formaten eine bessere und effizientere Komprimierung für Bilder bieten.

WebP ist ein von Google entwickeltes Bildformat mit wirklich guten Komprimierungsmöglichkeiten. Es verspricht 25-35% kleinere Bilddateien als JPEG und 26% kleiner als PNG. Außerdem unterstützt es Komprimierung, transparente Hintergründe und Animationen. Daher kann es als eine gute Alternative zu JPEG, PNG und GIF angesehen werden.

AVIF (AV1 Image File) ist ein neues Bildformat, das von der Alliance for Open Media entwickelt wurde. AVIF konkurriert nicht nur mit JPEG, sondern auch mit Next-Gen-Formaten wie JPEG 2000 und JPEG XL sowie mit Googles WebP. Ziel ist es, AVIF als bessere Alternative mit höherer Bildqualität bei gleichzeitig besserer Komprimierung (die die Dateigröße reduziert) anzubieten.

Gibt es irgendwelche Nachteile bei den neuen Next-Gen-Formaten?

Nicht im Geringsten, aber ein kleiner Nachteil bei der Verwendung von WebP ist, dass Safari das Format immer noch nicht unterstützt.

Allerdings hat Apple offiziell bekannt gegeben, dass die Unterstützung in Safari 14 auf macOS Big Sur sowie iOS und iPadOS hinzugefügt wurde, hier mehr lesen.

Wie optimiert ShimmerCat für Next-Gen-Formate?

ShimmerCat verwendet die Bildqualität als Ausgangspunkt, um Originalbilder für Next-Gen-Formate zu optimieren. Wenn ShimmerCat ein Bild optimiert, testet es verschiedene Einstellungen für jedes Bildformat und verwendet dann eine unabhängige Qualitätsmetrik, um die Kopie des Bildes auszuwählen, die geliefert werden soll.

Das bedeutet, dass ShimmerCat für jedes einzelne Bild bestimmen kann, ob es als WebP, AVIF oder optimiertes JPEG geliefert werden soll. Da alle Formate einer Qualitätsprüfung unterzogen wurden, kann ShimmerCat das Bildformat auswählen, das der Browser akzeptieren kann und das die kleinste Dateigröße hat.

Die Funktion, die die Qualitätsmetrik einbezieht und bestimmt, ob ein Bild "gut genug" ist, ist ein neuronales Netzwerk, das speziell auf Produktbilder von E-Händlern trainiert wurde und daher sehr gut geeignet ist, optimale Bedingungen zu finden, um die Qualität beizubehalten und gleichzeitig die Dateigröße zu komprimieren.

Das kleinste Bild unter mehreren Bildformaten liefern

Beachte, dass ShimmerCat das kleinste Bild unter mehreren Bildformaten liefert, die der Browser unterstützt und die für die Domain aktiviert wurden. Beispiel:
Wenn ein Bild mit ShimmerCat so optimiert wird, dass die Webp-Version 48 Kilobyte, die AVIF-Version 22,3 Kilobyte und die optimierte JPEG-Version 30 Kilobyte groß ist,

dann wird die optimierte JPEG-Version des Bildes an alle Browser geliefert, die AVIF noch nicht unterstützen.

Da die Bildoptimierung von ShimmerCat einen eigenen Webserver beinhaltet, wurde sie so angepasst, dass sie den Inhalt des "Accept:"-HTTP-Headers nutzt, um die Handhabung der Bildauslieferung zu optimieren. Alle Browser verwenden diesen Header und die Logik von ShimmerCat funktioniert wie folgt:

ShimmerCat analysiert den "Accept"-Header und fügt Bildformate hinzu, die von allen Browsern unterstützt werden, wie PNG, GIF, JPEG und BMP.
Aus den unterstützten Formaten für den jeweiligen HTTP-Client (Browser) wird das kleinste Bild ausgewählt und an den Besucher geschickt

So wird unabhängig vom Browser ein gültiges Bild geliefert, das der Browser anzeigen kann. Ohne Javascript oder Abfrageparameter.

Bild-CDN für eine schnellere Bereitstellung von Bildern

CDN steht für Content Delivery Network und ist ein Netzwerk von Servern, das eine schnellere Bereitstellung von Inhalten ermöglicht. Diese Server sitzen als zusätzliche Schicht über dem Ursprungsserver und helfen dabei, die Inhalte der Webseite an die Besucher/innen auszuliefern.

Da sich die Server in der Nähe der Besucher befinden ("on the edge"), werden sie oft auch als Edge-Server bezeichnet. Die Bildoptimierung von ShimmerCat umfasst ein CDN mit Edge-Servern, die optimierte Bilder zwischenspeichern, um sie schneller an die Besucher/innen auszuliefern.

Vermeide das Hochladen eines stark komprimierten Bildes

Bei der Optimierung verwendet ShimmerCat eine Qualitätsmetrik, die das optimierte und komprimierte Bild mit dem Originalbild vergleicht, um das kleinste Bild zu finden, das auch die höchste Qualität bietet.

Wenn das Originalbild bereits komprimiert ist, bedeutet das, dass wertvolle Informationen im Bild bereits "verkleinert" worden sind. Es bedeutet auch, dass es schwierig ist, das Bild weiter zu komprimieren. In solchen Fällen ist es besser, kein komprimiertes Bild hochzuladen und stattdessen ShimmerCat eine qualitätsangepasste Optimierung am unkomprimierten Original durchführen zu lassen.

Um den besten Effekt bei der Verwendung von ShimmerCat zu erzielen, wird daher empfohlen, kein stark komprimiertes Bild als Originalbild hochzuladen.

Sieh die Wirkung der Bildoptimierung mit der Abicart Chrome Extension

Um die Optimierungseffekte zu sehen, kann eine spezielle Chrome-Erweiterung verwendet werden, die auf der Webseite Statistiken über die Bildoptimierung anzeigt.

Genauer gesagt, kann der Nutzer damit sehen, welche Bilder in welchen Formaten optimiert wurden und wie stark sie komprimiert wurden. Die Erweiterung findest du hier.

Beispiel
Als Beispiel, haben wir ein Bild von der Abicart-Website abicart.se und haben eine einfache Optimierung vorgenommen, siehe unten. Ohne die Qualität zu beeinträchtigen, wurde die Bildgröße um über 40% reduziert. Das Ergebnis kannst du hier sehen.