Bilder verbessern

Je kleiner das Bild ist, desto schneller kann der Webserver es ausliefern. Also ist Bildoptimierung angesagt und in diesem Fall konkret auf Basis WordPress ohne weiteres Plug-In in WordPress zu installieren. Die Optimierung erfolgt über die „Befehlszeile“ von WordPress, auch bekannt als WP-CLI.

# 1. Schritt - System auf den letzten Stand bringen
sudo apt update && sudo apt upgrade -y

# 2. Schritt - Installation der notwendigen Softwarepakete
# Paket webp ist optional, svg wird auch nicht installiert,
# weil WordPress SVG Grafiken standardmäßig nicht unterstützt.
apt install jpegoptim optipng pngquant gifsicle webp npm

# Installation des WP-CLI Plugins für die Bildoptimierung
# ACHTUNG: Installation im Benutzerkontext des Webservers
# und vor allem im Basisverzeichnis der Webseite, die optimiert
# werden soll.
# 3. Schritt wechseln ins Root/ Basis Verzeichnis des Webservers
cd /var/www/html/wordpress/
# 4. Schritt Installation des WP-CLI Plugins im Benutzerkontext des
# Webservers
sudo -u www-data wp package install typisttech/image-optimize-command:@stable

# Weil wp-cli nicht die aktuelle Composer/process Version verwendet
# braucht es eine "primitive" Anpassung
# 5. Änderung des Pakets
vi /var/www/.wp-cli/packages/vendor/spatie/image-optimizer/src/OptimizerChain.php

# 6. Zeile finden (97gg - bringt einem bei vi zum Ziel)
# Alternativ kann man bei vi schon den Aufruf mit Zeilensprung
# gestalten "vi +97 ...."
# Zeile 97 alt
$process = Process::fromShellCommandline($command);

# durch Zeile 97 neu ersetzen
# 7. Zeile ersetzen mit dem Ausdruck
$process = new Process($command);

Damit ist mal die Bildoptimierung installiert und auch eingerichtet.


# Jetzt kann man zur Tat schreiten und alle Grafiken optimieren
# ACHTUNG: Das funktioniert nur, wenn man im Basisverzeichnis vom
# Webserver ist!
sudo -u www-data wp media regenerate
sudo -u www-data wp image-optimize batch --limit=999999
sudo -u www-data wp image-optimize mu-plugins
sudo -u www-data wp image-optimize plugins
sudo -u www-data wp image-optimize themes
sudo -u www-data wp image-optimize wp-admin
sudo -u www-data wp image-optimize wp-includes

Nach einem Update von WordPress, eines Plugins und/ oder Themes sind natürlich die „alten“, nicht optimierten, Grafiken wieder da. Als nach einem Update empfiehlt es sich die Konsole wieder zu bedienen, oder gleich als cron-job definieren.

sudo -u www-data wp image-optimize mu-plugins
sudo -u www-data wp image-optimize plugins
sudo -u www-data wp image-optimize themes
sudo -u www-data wp image-optimize wp-admin
sudo -u www-data wp image-optimize wp-includes

Im Fall der Fälle kann man auch wieder zurücksteigen, es ist also nichts verloren.

# Zuerst die Optimierung
# Die Attachment ID ist zum Beispiel aus der Medienverwaltung
# ersichtlich
sudo -u www-data wp image-optimize attachment 123

# Hat die Optimierung doch kein erwünschtes Ergebnis erzeugt kann
# man einfach mit diesem Befehl das Original wieder herstellen.
sudo -u www-data wp image-optimize restore 123
# Auch die Vorschau sollte wieder mit dem Original erstellt werden
$ wp media regenerate 123

Wer es wirklich händisch machen will kann sich auf der Konsole vergnügen.

# 1. Wechseln ins Root Verzeichnis Webserver
cd /var/www/html/wordpress
# 2. Suchen, finden und optimieren von JPG Grafiken
# Damit nicht der ganze Laden steht wird die Priorität ganz nach
# unten gesetzt.
sudo nice -n 19 find . -iname '*.jpg' -print0 | xargs -0 jpegoptim --max=82 --all-progressive --strip-all --preserve --totals --force
# JGP Grafiken mit der Endung jpeg findet man dann so.
sudo nice -n 19 find . -iname '*.jpeg' -print0 | xargs -0 jpegoptim --max=82 --all-progressive --strip-all --preserve --totals --force
# 3. Optimieren von PNG Grafiken
sudo nice -n 19 find . -iname '*.png' -print0 | xargs -0 optipng -o7 -preserve

Alternativ empfehle ich natürlich die entsprechenden Dokumentationen.

Share on:

Schreibe einen Kommentar