Bilder in unterschiedlichen CMS/Shopsystemen optimieren
Die technische Umsetzung der Bildoptimierung unterscheidet sich je nach eingesetztem System erheblich. Während manche Plattformen grundlegende Funktionen wie WebP-Auslieferung oder automatisches Lazy Loading von Haus aus mitbringen, erfordern andere manuelle Eingriffe oder zusätzliche Plugins. Die folgenden Anleitungen zeigen, wo die relevanten Einstellungen in den vier verbreitetsten Systemen zu finden sind und welche Schritte konkret auszuführen sind.
WordPress
Beim Hochladen komprimiert WordPress Bilder standardmäßig auf 82 Prozent JPEG-Qualität. Das reicht für einfache Inhaltsbilder, für Produktfotos oder hochwertige Portfoliobilder ist es zu aggressiv. Über das Plugin ShortPixel oder Imagify lässt sich die Komprimierung feinjustieren und gleichzeitig eine automatische WebP-Konvertierung aktivieren. ShortPixel verarbeitet sowohl neue Uploads als auch bereits vorhandene Bilder in der Mediathek per Bulk-Optimierung.
Alt-Texte tragen Sie direkt in der WordPress-Mediathek ein, bevor Sie ein Bild in einen Beitrag einfügen. Das Feld „Alternativtext” ist das richtige, nicht das Feld „Beschreibung” oder „Titel”. Yoast SEO prüft in der Seitenanalyse, ob das Fokus-Keyword im Alt-Text des ersten Bildes vorkommt, und gibt eine Warnung aus, wenn das Feld leer ist.
Ab Version 5.5 setzt WordPress Lazy Loading nativ, das Attribut loading=”lazy” wird ohne Plugin gesetzt. Das LCP-Bild lässt sich über das Plugin Perfmatters oder durch einen gezielten Code-Eingriff in der functions.php vom Lazy Loading ausnehmen. Zusätzlich empfiehlt sich das Attribut fetchpriority=”high” auf dem LCP-Bild, damit der Browser es bevorzugt lädt.
Magento
In Magento 2 pflegen Sie Alt-Texte für Produktbilder direkt auf Produktebene. Öffnen Sie ein Produkt im Admin-Bereich, navigieren Sie zum Reiter „Bilder und Videos” und klicken Sie auf das jeweilige Bild. Im rechten Panel erscheint das Feld „Alternativer Text”, das Sie pro Bild individuell befüllen können. Für Shops mit großem Sortiment bietet sich ein Datenimport über CSV an. Die Spalten small_image_label, thumbnail_label und base_image_label in der Import-Datei entsprechen den Alt-Texten der drei Standard-Bildrollen in Magento.
WebP-Unterstützung bringt Magento ab Version 2.4.4 nativ mit. Ältere Versionen benötigen eine Erweiterung wie das Modul von Amasty oder eine serverseitige Konvertierung über den Webserver. Ab Version 2.4.4 aktivieren Sie die WebP-Auslieferung unter Stores > Konfiguration > Allgemein > Web > Optimierung von Bild-URLs. Stellen Sie sicher, dass der Browser-Kompatibilitätscheck aktiviert ist, damit ältere Browser weiterhin JPEG oder PNG erhalten.
Lazy Loading ist in Magento seit Version 2.4.2 für Produktbilder auf Kategorieseiten und der Produktdetailseite standardmäßig aktiv. Prüfen Sie, ob das Hauptbild auf der Produktdetailseite vom Lazy Loading ausgenommen ist, da es in der Regel den LCP-Wert bestimmt. Über das Layout-XML der jeweiligen Theme-Datei lässt sich das loading-Attribut für einzelne Bildblöcke gezielt steuern. Die Bild-Sitemap erstellt Magento automatisch als sitemap.xml, deren Inhalt und Crawling-Frequenz Sie unter Stores > Konfiguration > Katalog > XML-Sitemap konfigurieren.
Shopware
In Shopware 6 verwalten Sie Alt-Texte über den Media-Manager. Unter Inhalte > Medien wählen Sie ein Bild und tragen den Alt-Text im rechten Metadaten-Panel ein. Für Produktbilder gibt es ein separates Alt-Text-Feld auf Produktebene, das Vorrang vor dem generischen Medien-Alt-Text hat. Nutzen Sie das produktspezifische Feld, um variantenspezifische Beschreibungen einzutragen.
WebP-Auslieferung unterstützt Shopware über das Thumbnail-System. Unter Systemkonfiguration > Medienverwaltung lässt sich die WebP-Generierung aktivieren. Thumbnails werden für hinterlegte Bildgrößen automatisch erstellt und in einer separaten Thumbnail-Größentabelle verwaltet. Prüfen Sie, ob alle benötigten Bildgrößen dort eingetragen sind, da fehlende Einträge dazu führen, dass der Browser das Originalbild in voller Auflösung lädt.
Shopify
Produktbilder komprimiert Shopify beim Upload und liefert WebP automatisch aus, sofern der Browser es unterstützt. Alt-Texte für Produktbilder pflegen Sie in der Produktverwaltung unter jedem einzelnen Bild. Ein Klick auf das Bild öffnet ein Bearbeitungsfeld, in dem der Alt-Text eingetragen wird. Für Variantenbilder, etwa verschiedene Farben desselben Produkts, gilt dasselbe. Jede Variante kann einen eigenen Alt-Text erhalten.
Eine Bild-Sitemap generiert Shopify automatisch und reicht sie über die Google Search Console ein. Prüfen Sie in der Search Console unter dem Bereich Sitemaps, ob alle Produktbilder erfasst sind. Die Sitemap-URL lautet /sitemap.xml. Fehlen Bilder dort, liegt das häufig an fehlenden Alt-Texten oder nicht indexierbaren Produktseiten.
Für Shops mit großem Sortiment lohnt sich eine Bulk-Bearbeitung der Alt-Texte über die Shopify-API oder eine App wie „Image SEO & Alt Text“, die Alt-Texte anhand von Produkttiteln und -attributen nach einem definierten Muster befüllt.