Image-Optimizer

Modulbeschreibung

Mit dem "Image-Optimizer" können Sie alle JPEG oder PNG - Bilder in Ihrem OXID eShop mit nur einem Klick komprimieren. Durch die Komprimierung der Bilder wird die Dateigröße verringert und somit verbessern Sie die Ladezeiten in Ihrem Shop. Ausserdem können alle JPEG oder PNG - Bilder in platzsparendes WEBP Format konvertiert und im Frontend angezeigt werden.

Das Modul ist erhältlich auf https://www.digidesk.de/produkte/image-optimizer/

Systemvoraussetzungen

PHP-Version OXID 4 & 5

• PHP 5.6

PHP-Version OXID 6

• PHP 7.0 (OXID 6.0.x)

• PHP 7.1 (OXID 6.1.x)

• PHP 7.2 - 7.4 (OXID 6.2.x - 6.3.x)

• PHP 8.0 (OXID 6.3.x - 6.4.x)

• PHP 8.1 (OXID 6.5.x)

Webserver-Konfiguration

• Unix basierter Webserver

• IonCube Loader (mind. v5.0)

• Kommandozeilen-Programm: jpegoptim (http://www.kokkonen.net/tjko/projects.html)

• Kommandozeilen-Programm: OptiPNG (http://optipng.sourceforge.net/)

• cwebp Encoder Tool (https://developers.google.com/speed/webp/download)

• PHP Extension GD Library: die weniger effiziente Alternative zu den oberen 3 Tools mit jpeg/png/webp Unterstützung wird bei fehlenden Tools eingesetzt

• PHP Erweiterung: zip (http://php.net/manual/en/zip.setup.php)

• Erlaubnis "exec" per PHP auszuführen

Kompatibel mit den OXID Versionen

• OXID CE/PE 4.9.x bis 4.10.x

• OXID EE 5.2.x bis 5.3.x

• OXID CE/PE/EE 6.0.x bis 6.5.x

Installation

Installation von Jpegoptim

Voraussetzung ist ein SSH-Benutzer (sofern kein Direktzugriff zum Server besteht) und die Rechte zum Installieren von Paketen/Binaries.

1. Mit dem Server über eine Konsole verbinden (z.B. Putty)

    ssh [e-mail]

2. Source-Code herunterladen (Stand 22.02.2022: jpegoptim v1.4.6):

    wget https://www.kokkonen.net/tjko/src/jpegoptim-1.4.6.tar.gz

3. Paket entpacken, konfigurieren und installieren (Dateibezeichnung ist ggf. unterschiedlich):

    zcat jpegoptim-1.4.6.tar.gz | tar xf -
    cd jpegoptim-1.4.6
    ./configure
    make
    make strip
    make install

Installation von OptiPNG

Voraussetzung ist ein SSH-Benutzer (sofern kein Direktzugriff zum Server besteht) und die Rechte zum Installieren von Paketen/Binaries.

1. Mit dem Server über eine Konsole verbinden (z.B. Putty)

    ssh [e-mail]

2. Source-Code herunterladen (Stand 22.02.2022: optipng v0.7.7):

    wget http://prdownloads.sourceforge.net/optipng/optipng-0.7.7.tar.gz

3. Paket entpacken, konfigurieren und installieren (Dateibezeichnung ist ggf. unterschiedlich):

   zcat zvxf optipng-0.7.7.tar.gz
   cd optipng-0.7.7
   ./configure
   make
   make install

Installation von WEBP Encoder Tool

Voraussetzung ist ein SSH-Benutzer (sofern kein Direktzugriff zum Server besteht) und die Rechte zum Installieren von Paketen/Binaries.

1. Mit dem Server über eine Konsole verbinden (z.B. Putty)

    ssh [e-mail]

2. Source-Code herunterladen (Stand 22.02.2022: libwebp v1.2.2):

    wget https://storage.googleapis.com/downloads.webmproject.org/releases/webp/libwebp-1.2.2.tar.gz

3. Paket entpacken, konfigurieren und installieren (Dateibezeichnung ist ggf. unterschiedlich):

   tar xvzf libwebp-1.2.2.tar.gz
   cd libwebp-1.2.0
   ./configure
   make
   make install

Falls die Installation des Tools auf dem Server nicht möglich ist, kann man eine precompiled Version herunterladen: https://developers.google.com/speed/webp/download und den vollen Dateipfad unter Moduleinstellungen eintragen

Modulinstallation ab OXID 6

1. Falls noch nicht geschehen, laden Sie bitte zunächst das digidesk Basis-Modul herunter und installieren Sie es gemäß der enthaltenen Installationsanleitung. Sie erhalten dieses unter: https://www.digidesk.de/produkte/basis-modul

2. Für dieses Modul erstellen Sie nun einen weiteren Unterordner "imageoptimizer" im Ordner "packages/digidesk", in den die heruntergeladene Zip-Datei entpackt wird.

3. Führen Sie anschließend folgenden Befehl aus dem Hauptverzeichnis des Shopsystems aus:

   composer require digidesk/imageoptimizer

4. Nun kann das Modul im OXID eShop Admin aktiviert werden

5. Ggf. Tmp-Verzeichnis leeren und Views neu generieren

Modulinstallation bis OXID 5.3.x/4.10.x

1. Falls noch nicht geschehen, laden Sie bitte zunächst das digidesk Basis-Modul herunter und installieren Sie es gemäß der enthaltenen Installationsanleitung. Sie erhalten dieses unter: https://www.digidesk.de/produkte/basis-modul

2. Fügen Sie den Inhalt des Ordnerverzeichnisses des Moduls "modules/digidesk/" via FTP/SFTP unter dem gleichnamigen Pfad in Ihren Shop ein.

3. Aktivieren Sie das Modul im OXID eShop Admin

4. Ggf. Tmp-Verzeichnis leeren und Views neu generieren

5. Bitte fahren Sie nun mit der Einrichtung des Moduls fort

Update

Ab Oxid 6

1. Entpacken Sie die neue Modulversion in den Ordner "packages/digidesk/imageoptimizer".

2. Deaktivieren Sie das Modul im OXID eShop Admin.

3. Führen Sie anschließend folgenden Befehl aus dem Hauptverzeichnis des Shopsystems aus:

   composer update digidesk/imageoptimizer

   Die Frage, ob Dateien des Pakets überschrieben werden sollen, bestätigen Sie bitte mit "Y".

4. Aktivieren Sie das Modul im OXID eShop Admin.

5. Ggf. Tmp-Verzeichnis leeren und Views neu generieren.

Bis OXID 5.3.x/4.10.x

1. Bitte aktualisieren Sie das Basis-Modul gemäß der darin enthaltenen Installationsanleitung.

2. Deaktivieren Sie dieses Modul im OXID eShop Admin.

3. Fügen Sie den Inhalt des Ordners "modules/digidesk/" via FTP/SFTP unter dem gleichnamigen Pfad in Ihren Shop ein und überschreiben Sie dabei die vorhandenen Dateien des Moduls.

4. Aktivieren Sie dieses Modul im OXID eShop Admin.

5. Ggf. Tmp-Verzeichnis leeren und Views neu generieren.

Funktionsbeschreibung

Es werden JPEG/PNG-Bilder des Shops optimiert, welche sich im Pfad /out/pictures/ befinden.

Optimierungs-Stufe festlegen

Die Optimierungs-Stufe bestimmt wie sehr die Bilder komprimiert bzw. optimiert werden sollen. Niedrig ist dabei eine weniger sichtbare Komprimierung als Hoch. Die verlustfreie Komprimierung entfernt Informationen aus Bilddateien, die für die Anzeige nicht nötig sind. Einige Bilder können jedoch durch die verlustfreie Komprimierung dunkler werden. Außerdem ist eine zeitliche Eingrenzung möglich, welche sich nach dem Änderungsdatum richtet. Somit besteht die Möglichkeit, unterschiedlich viele Bilder zu finden.

Analyse durchführen

Die Analyse simuliert eine Optimierung mit der ausgewählten Optimierungs-Stufe und wertet das Ergebnis aus. Die Auswertung zeigt den zu sparenden Speicherplatz und weitere Informationen zu den Dateien und Traffic an.

Optimierung durchführen

Die Optimierung führt die Komprimierung der JPEG/PNG-Bilder durch. Anschließend werden Informationen zum gesparten Speicherplatz angezeigt. Je nach Voreinstellung, kann eine Sicherung der Bilder nach der Optimierung heruntergeladen werden.

Es empfiehlt sich die Option "Sicherung der Bilder vor Optimierung durchführen" zu aktivieren, da eine Optimierung ohne Einspielen einer Sicherung nicht rückgängig zu machen ist! Die Sicherungen finden Sie im Tab 'Sicherungen' und auf dem Server im Ordner "export".

Konvertierung der JPG/PNG-Bilder zum WEBP-Format

Hier hat man die Möglichkeit die JPEG und PNG - Bilder in WEBP-Format zu konvertieren.

Austauschen der jpeg-Bilder durch webp-Bilder im Frontend

Wenn die Bilder im Backend bereits zu webp konvertiert sind, kann man diese wie folgt im Frontend einsetzen: setzt man unter Moduleinstellungen die Optionen für Artikelbilder/Kategoriebilder/Herstellerbilder im webp-Format anzeigen, so werden die webp-Bilder (sofern vorhanden) im Frontend eingesetzt. Die Ersetzung der jpeg/png Bilder funktioniert in den Standardthemes wie RoxIVE, Flow und Wave.

Die Mediathek-Bilder aus dem Ordner ddmedia können in unterschiedlichen Modulen oder VCMS-Seiten eingesetzt werden. Um diese Bilder ebenfalls durch webp-Bilder ersetzen zu können benötigt man einen Eintrag in der .htacces Datei (diese befindet sich im source-Ordner des Shops). Dieser Eintrag ersetzt die jpg/png Bilder durch die im webp-Format, wenn passendes webp-Bild existiert und der Browser webp unterstützt.

Suchen Sie bitte in der .htacces Datei folgender Zeile

RewriteCond %{REQUEST_URI} (\/out\/pictures\/generated\/)

und fügen Sie oberhalb diese 5 Zeilen ein:

RewriteCond %{REQUEST_URI} (\/out\/pictures\/ddmedia\/)   
RewriteCond %{HTTP_ACCEPT} image/webp   
RewriteCond %{REQUEST_FILENAME} (.*)\.(jpg|png)$   
RewriteCond %1\.webp -f   
RewriteRule ^(.*)\.(jpg|png)$ $1.webp [L,T=image/webp]

Jetzt werden die webp-Bilder aus der Mediathek (sofern vorhanden) im Frontend geladen. Besonderheit liegt hier darin dass die webp-Bilder noch im herkömmlichen Container (jpg/png) geladen werden. In der Entwicklerconsole vom Browser erkennt man dass der Typ des Bildes webp ist obwohl das Bild z.B.: eine .jpg Abkürzung am Ende hat:

Troubleshooting - Die häufigsten Fehler

Das Vorschaubild wird nicht geladen

Dieses Problem tritt ein, wenn das Tmp-Verzeichnis eine Regel hat, die den Zugriff auf die Dateien innerhalb des Ordners verhindert. Ersetzen Sie die vorhandene <FilesMatch .*>Regel durch die folgende:

<FilesMatch "(?<!\.jpg)$">
  <IfModule mod_authz_core.c>
    Require all denied
  </IfModule>
  <IfModule !mod_authz_core.c>
    order allow,deny
    deny from all
  </IfModule>
</FilesMatch>

Hilfe & Support

Haben Sie Fragen oder benötigen Sie Hilfe bei der Installation? Gerne bieten wir Ihnen auch einen Installationsservice an. Kontaktieren Sie uns einfach über einer der unten stehenden Adressen.

• E-Mail: [e-mail]

• Telefon: [phone]

• Kontaktformular: http://www.digidesk.de/kontakt