Keine langen Ladezeiten – mit dem Image Optimizer

Sehr viele Bilder, die auf Websites oder in Onlineshops benutzt werden, sind nicht optimiert oder viel zu groß. Das kommt daher, dass die meisten Bilder von Redakteuren oder direkt vom Websitebetreiber eingefügt werden und diese sich schlicht und einfach nicht mit der Optimierung auskennen oder sich vielleicht auch nicht damit beschäftigen wollen. 

Doch das könnt ihr ändern: Grafiken wie .png, .gif und .jpeg können via SSH ganz bequem mit den Tools „jpegoptim”, “optipng”, “gifsicle” und "webP" optimiert werden. Diese drei Helfer lassen sich mit ein paar Klicks einfach über den Mittwald Softwaremanager installieren. Doch beachtet bitte, dass diese in unseren alten Tarifen erst ab einem Managed vServer Tarif L zur Verfügung stehen. Der Grund dafür ist, dass sie sehr viel Last auf den Systemen erzeugen. In der neuen Tarifwelt gelten keine Beschränkungen. 

Nun fragt sich der ein oder andere von euch bestimmt: „Wie kann ich die Tools jetzt auf meiner Website oder in meinem Shop nutzen?“ Das möchte ich euch im Folgenden für die Systeme TYPO3, WordPress, Shopware und Magento erklären. Für andere Systeme gibt es leider noch keine Erweiterungen, die den Einsatz der Optimizer ermöglichen. Allerdings gibt es dafür auch eine Lösung, die ich euch zum Schluss vorstellen werde. 

Als Erstes solltet ihr in eurem Account, den ihr optimieren möchtet, die drei Optimizer über den Softwaremanager installieren. Ist das getan, geht es mit der Einrichtung im jeweiligen System weiter.
 

Kommen wir zunächst zu TYPO3: Dort installiert ihr euch die Extension Image Optimizer über den Extensionmanager im TYPO3 Backend (https://extensions.typo3.org/extension/imageoptimizer/). Nachdem diese installiert ist, müsst ihr noch etwas konfigurieren, deshalb klickt ihr im Extensionmanager auf das Zahnrad hinter der Extension. 
 

Sollten die Image Optimizer über den Softwaremanager schon installiert sein, dann wurden diese von der Extension bereits automatisch gefunden und ihr müsst nur noch die beiden Optionen aktivieren. 
 

Ab jetzt werden alle Bilder, die hochgeladen werden, automatisch optimiert. Jedoch gibt es leider keine Stapelverarbeitung für die bereits vorhandenen Bilder, hier müsstet ihr auf die manuelle Methode zurückgreifen, die ich euch am Ende des Artikels vorstelle. 

Kommen wir zu WordPress: Hier können wir ebenfalls ein Plugin verwenden, welches die Optimierungen für uns vornimmt. 

In WordPress installiert ihr das Plugin EWWW Image Optimizer (https://de.wordpress.org/plugins/ewww-image-optimizer/) und schon werden alle Bilder, die ab sofort hochgeladen werden, optimiert. Das war es schon, es sind keine weiteren Konfigurationen notwendig. ;-) 
Und hier habt ihr zudem Glück, denn bei diesem WordPress Plugin gibt es eine Stapelverarbeitung, die alle bereits hochgeladenen Bilder optimiert. Hierfür geht ihr wie folgt vor: Im WordPress Backend müsst ihr auf Medien -> „Massenoptimierung“ klicken. Solltet ihr viele Bilder hochgeladen haben, die zu optimieren sind, dann sollte eine Pause zwischen dem Optimieren eingestellt werden. Danach klickt ihr auf den Button „Nach unoptimierten Bildern scannen“. Und anschließend wird angezeigt, wie viele zu optimierende Bilder gefunden worden sind.
 

Jetzt könnt ihr auf den Button „Optimierung starten“ klicken und schon geht’s los. Wollt ihr einen Zwischenstand haben oder müsst ihr die Optimierung stoppen? Dann ist auch das kein Problem.

Kommen wir nun zu den Shopsystemen und fangen mit Shopware an. Shopware hat die Image Optimizer direkt im System eingebunden, somit sind keine zusätzlichen Plugins notwendig. Sobald die Image Optimzer auf dem Account installiert sind, nutzt Shopware diese und optimiert alle Bilder, die ab dem Zeitpunkt hochgeladen werden. 

Um alle bereits vorhandenen Bilder zu optimieren, müsst ihr euch via SSH mit dem Server verbinden. Wie das genau geht, haben wir in einem FAQ-Beitrag erklärt. Sobald ihr mit dem Server verbunden seid, müsst ihr in das Verzeichnis, in dem sich die Shopware-Installation befindet, wechseln.

Nun seid ihr im Shopware-Verzeichnis und könnt den Befehl zum Optimieren der Bilder, den Shopware in seine CLI Tools eingebaut hat, verwenden. 

Wenn der Prozess mit Enter gestartet wurde, seht ihr sofort den Fortschritt der Optimierungen. 

Für den sw:media:optimize gibt es noch einige Optionen, die verwendet werden können, diese findet ihr sehr gut in der Shopware Dokumentation erklärt. 
 

Auch für Magento 1 und 2 gibt es ein Plugin, das auf den Namen „Image Optimizer“ hört, welches aber leider nicht mit den aktuellen Magento Versionen kompatibel ist. Solltet ihr eine der unterstützen Versionen verwenden, so empfehlen wir euch dieses Plugin. ;-) 

Kommen wir nun zu der manuellen Variante, die für alle anderen Systeme angewendet werden kann, bei denen es leider noch keine Erweiterungen gibt. Zuerst solltet ihr ein Backup eurer Bilder anfertigen.

Anschließend müsst ihr euch dann mit eurem Account via SSH verbinden. (Wie das funktioniert, habe ich bereits oben unter dem Punkt Shopware verlinkt.)

Um „jpegoptim“ zu benutzen, navigiert ihr in das Verzeichnis, in dem sich die Grafiken befinden und führt dort den folgenden Befehl aus:
 

Bei der Nutzung von „optipng“ nutzt ihr diesen Befehl:

Bei „gifsicle“ gibt es leider keine Stapelverarbeitung. Daher muss jedes .gif einzeln optimiert werden:

Ich hoffe, ich konnte euch ein paar Tipps zum Optimieren der Bilder auf euren Websites und Onlineshops geben. Sollte es in Zukunft für ein anderes System, welches ich noch nicht erwähnt habe, eine Erweiterung geben, teilt sie hier doch einfach mit uns und wir nehmen sie gerne mit auf. ;-) 

Und jetzt, viel Spaß beim Optimieren eurer Bilder!