Kostenloses Gambio-Modul ListImages: Bilder optimieren

Das kostenlose Gambio-Modul “ListImages” versteht sich als Notlösung, wenn keine adäquaten Programme wie jpegoptim oder OptiPNG zur Verfügung stehen. Es listet Bilddateien in ausgewählten Verzeichnissen und erleichtert so die Komprimierung mit externen, webbasierten Tools, wie z.B. PageSpeed Insights.

Gambio Bilder optimieren auf einem neuen Level können Sie mit der WebP-Funktionalität unseres Moduls zur Optimierung der Gambio-Ladezeit.

Hintergrund: Bilder optimieren

Besser, wenn verfügbar: Bildkomprimierung via Shell, automatisierbar via CronJob

Bilder optimieren bedeutet, dass auf der Website geladene Grafiken eine möglichst geringe Dateigröße aufweisen sollten. Insbesondere bei der Optimierung einer Website für Mobilgeräte kann ein hohes Transfervolumen die Benutzererfahrung negativ beeinträchtigen. In Ausnahmefällen kann dies sogar zu einer schlechteren Position im Google-Ranking bei der mobilen Suche führen.

Prinzipiell gilt es zwischen einer verlustfreien und einer verlustbehafteten Komprimierung von Bildern zu unterscheiden. Programme wie jpegoptim oder OptiPNG ermöglichen eine verlustfreie Komprimierung durch Reduktion der Farbpalette und Entfernen von Exif-Daten aus Bilddateien. Verlustbehaftet hingegen bedeutet nicht zwangsläufig, dass für das menschliche Auge eine negative Beeinträchtigung der Bildqualität erkennbar ist.

Da bei Produktbildern naturgemäß die Qualität eine entscheidende Rolle spielt, ist also bei der verlustbehafteten Komprimierung äußerste Vorsicht geboten. In jedem Fall gibt es geeignetere Programme für die Bildoptimierung als die Skriptsprache PHP, in der sowohl Gambio als auch das Gambio-Modul zur Optimierung der Ladezeit geschrieben sind.

Download des Gambio-Moduls

Für den kostenlosen Download des ListImages-Moduls für Gambio nutzen Sie bitte den folgenden Link. Wie alle kostenlosen Gambio-Plugins können Sie es ohne Registrierung oder sonstiger Angabe von Daten unverbindlich herunterladen.

DateiZuletzt geändertGröße
6,7 KB
ListImages-Modul von Werbe-Markt.de für Gambio Version 3.5.1 oder höher

Installation in Ihrem Shop

Entpacken Sie bitte zunächst das heruntergeladene zip-Paket. Es enthält ein Verzeichnis namens Werbe-Markt. Nutzen Sie Ihr FTP-Programm, um das Verzeichnis und alle enthaltenen Dateien in das GXModules-Verzeichnis Ihrer Gambio-Installation zu laden.

Neu in der Toolbox: Bilder optimieren

Als zweiten Schritt loggen Sie sich über Ihren Webbrowser in die Gambio-Adminoberfläche ein und leeren den Cache für Modulinformationen im Menüpunkt Toolbox > Cache.

Die eigentliche Installation des Moduls nehmen Sie nun in Gambios Modul-Center vor. Wählen Sie den Eintrag ListImages und betätigen Sie den Installieren-Button. Je nachdem, ob Sie das Modul Ladezeitoptimierung installiert haben oder nicht, fügt sich der neue Menü-Eintrag Bilder optimieren in der Menübox Ladezeitoptimierung oder Toolbox ein.

Diesen Worten können Sie auch entnehmen, dass sich das Tool zwar als Ergänzung für unser Ladezeitoptimierungsmodul versteht. Sie können es jedoch völlig unabhängig von diesem verwenden. Bei der Anwendung werden Sie auch schnell merken, dass es sich um eine absolute Notlösung handelt und jede automatisierte Lösung via Shell-Skript und CronJob unbedingt vorzuziehen ist – sofern verfügbar.

Das Tool verwenden

Admin-Oberfläche des Moduls

Bei Aufruf des Menüpunkts Bilder optimieren zeigt Ihnen das Modul eine Auflistung von Verzeichnissen, in denen typischerweise Grafiken und insbesondere Produktbilder gespeichert sind. Auf den Verzeichnisnamen folgt die Anzahl darin gefundener Bilddateien, sowie Änderungsdatum der neuesten und der ältesten Dateien. Ein Klick auf den Anzeigen-Button öffnet eine Seite, die außer einer Pagination und Infos zum Verzeichnis nichts weiter als die Bilder anzeigt, deren Änderungsdatum nach dem zuvor ausgewählten Wert in Tagen liegt.

Nun gibt es verschiedene webbasierte Tools, die Grafiken aus einer HTML-Seite extrahieren und sie in optimierter Version zum Download anbieten. Betrachten wir als konkretes Beispiel das Verzeichnis images/product_images/thumbnail_images und die Optimierungsmöglichkeiten von PageSpeed Insights. Die durch Button-Klick geöffnete Seite hat eine Adresse wie diese:

https://ihreshop.de/shop.php?do=ListImagesByDir&dir=images%2Fproduct_images%2Fthumbnail_images&minage=7&token=afa5fc0f686090b5f34ed08d6fa95812
optimized_contents.zip auf PageSpeed Insights

Für diese URL können Sie nun bei PageSpeed Insights eine Analyse durchführen. Sollte unter Optimierungsvorschläge in der Desktop-Version kein Punkt namens Bilder optimieren erscheinen, haben Sie bereits gute Arbeit geleistet. Ansonsten finden Sie unterhalb des Analyseergebnisses den Hinweis: “Laden Sie hier optimierte Bild-, JavaScript- und CSS-Ressourcen für diese Seite herunter.” Ein Klick auf den darin enthaltenen Link öffnet den Download-Dialog für eine optimized_contents.zip-Datei.

Neben anderen Verzeichnissen enthält diese nach Entpacken einen Ordner namens image. Die im image-Ordner enthaltenen Bilddateien können Sie nun mit einem Bildbetrachter-Programm hinsichtlich ihrer Qualität überprüfen und bei positivem Befund  in der images/product_images/thumbnail_images-Verzeichnis Ihrer Gambio-Installation laden.

Ist das aufwendig? Ja, keine Frage. Aber prüfen Sie im Anschluss an Ihre Mühen die Auswirkungen auf das Analyseergebnis. Sie werden feststellen, dass PageSpeed Insights zumindest weniger zu optimierende Bilder findet und ihre Website einen höheren Optimierungsgrad erreicht.

Weitere Anwendungsmöglichkeiten

Wie nun schon mehrfach erwähnt, ist die Bildoptimierung mittels dieses Tools wenig praxistauglich. Sie können es jedoch auch beispielsweise zur Prüfung der Qualität von Produktbildern verwenden. Da es quelloffen zur Verfügung steht, spricht auch nichts gegen eine Anpassung für andere Anwendungsfälle.