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
7,0 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.