Bildprüfung von Lighthouse für Shopware 6

Bilder in der richtigen Größe

In Bezug auf dieses Thema überprüft Google in erster Linie jedes Bild auf der Webseite und vergleicht die Größe des gerenderten Bildes mit der Größe des tatsächlichen Bildes. Wenn das gerenderte Bild mindestens 4 KB kleiner als die tatsächliche Größe ist, kann dieses Bild von Google nicht geprüft werden.

Die Hauptstrategie für die Bereitstellung von Bildern in der richtigen Größe ist die Verwendung von sogenannten „responsiven Bildern“. Mit dieser Strategie können Sie mehrere Versionen jedes Bildes generieren, wobei jedes Bild abhängig von den Abmessungen des am besten geeigneten Ansichtsfensters verwendet wird.
Darüber hinaus können wir an dieser Stelle Bilder im SVG-Format verwenden, das auf dem Vektorformat basiert.

Responsive Bilder in Shopware 6

Falls wir das gemeinsame Thema „Responsive“ verwenden, können wir mit diesem Tool einen vollständig responsiven Online-Shop in verschiedenen Browsern erstellen. Die Bereitstellung statischer Bilder in Shopware 6 wurde durch die Generierung von Thumbnails in Kombination mit dem HTML-Bildelement ermöglicht.

Wie erreichen wir das?

Shopware bietet uns die Möglichkeit, großformatige Bilder hochzuladen, ohne uns um die Verkleinerung dieser Bilder kümmern zu müssen. Alles dank der Möglichkeit, Miniaturansichten für die Originalbilder zu generieren. Diese Option bietet uns eine gute Leistung und Benutzerfreundlichkeit auf verschiedenen Geräten.

Stellen Sie zunächst sicher, dass Sie das gewünschte Bild in der größten verfügbaren Größe hochladen, da das Generieren von Miniaturansichten die Größe des Originalbildes verringert.
Das Generieren von Thumbnails in Shopware 6 erfolgt über den Befehl sw:thumbnail:generate.

Bereitstellen von Bildern in Next-Gen-Formaten

Es stehen zwei Bildformate zur Verfügung, mit denen Bilder im modernsten Bildformat bereitgestellt werden können. AVIF und WebP sind Bildformate, die überlegene Komprimierungs- und Qualitätsmerkmale aufweisen, die mit JPEG und PNG vergleichbar sind. Wenn wir diese beiden Bildformate verwenden, um die Bilder zu kodieren, deutet dies darauf hin, dass die Bilder viel schneller geladen werden, und sicherlich wird dieser Prozess dazu führen, dass weniger mobiles Internet (Mobilfunkdaten) verbraucht wird, um sie anzuzeigen.

Um Bilder im WebP-Format auf der Shopware 6-Plattform bereitzustellen, ist es notwendig, ein Plugin zu verwenden, das kostenlos ist und im Shopware Shop zu finden ist. Dieses Plugin heißt „ThumbnailProcessor inkl. Lazy Loading und Webp-Support“. Nähere Informationen zu Funktion, Vorteilen und Verwendung dieses Plugins finden Sie in der Beschreibung des Plugins im Shopware Online-Shop.

Wenn Sie mehr über E-Commerce-Entwicklungsplattformen oder Apps erfahren möchten, lesen Sie unsere Lexika für Shopify und Shopware. Unser engagiertes Outsourcing-Team kann Ihr Partner im E-Commerce sein.