Das WebP-Format gilt heute als eines der wichtigsten Bildformate für die Erstellung von Webseiten und Webanwendungen für Frontend-Entwickler. Früher wurden JPG-Images noch für die Einbindung von Bildmaterial auf Webseiten verwendet. Heute gibt es ein modernes und besseres Format für die Kompression von Bildern. Da Page-Speed ein wichtiger Rankingfaktor für den eigenen Suchmaschinenauftritt ist, empfehle ich ausschließlich die Konvertierung und Einbindung von Bildern in das effiziente WebP Bildformat.
So optieren Webseitenbetreiber, Dank der besseren Kompression und der damit einhergehenden deutlich kleineren Dateigröße ohne bemerkbaren Qualitätsverlust ihre Webpräsenz. In dieser Anleitung zeige ich euch, wie ihr unter Linux gespeicherte Bildformate in das Webp Format konvertieren könnt. Dafür verwenden wir die Shell und installieren die notwendigen WebP-Werkzeuge. Das Tutorial für die Bildumwandelung in das WebP-Format funktioniert bei allen derzeit gängigen Linux-Distributionen gleichermaßen (Ubuntu, Debian, CentOS, Fedora…).
Auf dieser Weise können alle Bildformate (JPG, PNG…) innerhalb von nur wenigen Sekunden in das neue Bildformat (WebP) konvertiert werden. Diese Anleitung eignet sich hervorragend für die Installation auf einen bereits bestehenden Linux-basierten Webserver (Nginx, Apache und Co). Da wir am Ende der Einrichtung die Bilder von ganzen Verzeichnissen (Webseiten-Ordner) ohne großen Aufwand umwandeln können.
Hinweis:
Beachte bei diesem Szenario jedoch, dass alle bereits über den HTML-Befehl (<img src=“Pfad“>) eingebunden Bilder durch die neue Dateiendung .WebP im HTML-Code korrigiert werden müssen. Das lässt sich schnell mit einer Schleife in PHP oder über die Shell erledigen, sollten auf dem Server zu viele Bilder für eine manuelle Anpassung vorhanden sein.
Inhaltsverzeichnis: Alle Bildformate auf einem Linux-Server in das WebP-Bildformat konvertieren (Anleitung)
Installation der WebP-Bibliotheken und Utilitys unter Linux
Bei Linux Debian und Ubuntu ist das zu installierende WebP-Paket bereits Teil des offiziellen Repositorys. Die Installation erfolgt wie bei Linux-Servern üblich über den integrierten APT-Paketmanager:
apt install webp
Bei anderen Linux-Distributionen (CentOS, RedHat, Ferdora usw.) muss das WebP-Paket zunächst mithilfe des wget-Befehls heruntergeladen und installiert werden:
wget -c http://storage.googleapis.com/downloads.webmproject.org/releases/webp/libwebp-1.2.2.tar.gz
Entpacke das Archiv und navigiere in das Verzeichnis deiner WebP-Bibliothek mit den folgenden Befehlen:
tar -xvf libwebp-1.2.2-linux-x86-32.tar.gz
cd libwebp-1.2.2-linux-x86-32/
Starte anschließend das Skript mit dem Namen „Install.sh“, um die Installation von WebP unter Linux abzuschließen.
WebP Dienstprogramme: Vorkompilierte Bibliothek
Nach der Installation stehen uns unterschiedliche WebP-Dienstprogramme und Bibliotheken zur Verfügung:
- cwebp – WebP-Encoder-Tool
- dwebp – WebP-Decoder-Tool
- vwebp – WebP-Image-Bildbetrachter
- webpmux – WebP-Muxing-Tool
- gif2webp – Werkzeug, um GIF-Bilder in das WebP-Format zu konvertieren
- img2webp – Werkzeug zum Konvertieren einer Bildfolge in eine animierte WebP-Bilddatei
- webpinfo – Informationen über ein bestimmtes WebP-Bild anzeigen
Mit dem Dienstprogramm vwebp kann zum Beispiel ein Bild im WebP-Format über die Shell betrachten werden:
./vwebp Mein-Auto.webp
Mehr Informationen über die Bibliotheken können der offiziellen Webseite vom Anbieter (Google) entnommen werden: https://developers.google.com/speed/webp/download
Bilder über die Linux-Shell in das WebP-Format konvertieren
Einzelne Bilder mit den Endungen .JPG oder .PNG lassen sich mit dem cwebp-Encoder-Werkzeug in ein WebP-Bild umwandeln. Dafür gibt es zwei wichtige Parameter:
-q = Gibt die Ausgabequalität an (1-100 %)
-o = Definiert den Namen der Ausgabedatei
Befehl, um ein JPG-Image in das WebP-Bildformat umzuwandeln:
cwebp -q 70 Mein-Hund.jpg -o Mein-Hund.webp
Befehl, um eine PNG-Imagedatei in das WebP-Bildformat umzuwandeln:
cwebp -q 70 Sommerurlaub.png -o Sommerurlaub.webp
Alle Bilder aus einem bestimmten Verzeichnis über die Shell zu WebP-Bildern konvertieren (automatische Umwandlung unter Linux)
Damit wir alle Bilder, die sich in einem bestimmten Verzeichnis befinden, in das WebP-Format konvertieren können, erstellen wir ein Shell-Skript. Nach der Ausführung des Skripts müssen wir nur noch ein Pfad unseres Wunschverzeichnisses angeben, um unter Linux alle in einem Verzeichnis befindlichen Bildformate in das WebP-Bildformat umzuwandeln.
Zur Voraussetzung gehört die Installation des WebP-Paketes, wie bereits oben im Installationsprozess beschrieben. Erstelle an einem beliebigen Ort auf deinem Linux-Host eine neue Skript-Datei für die automatische Konvertierung:
WebP-Konverter-Skript erstellen:
Sudo nano webp-konvertierer.sh
#!/bin/bash
# Ein Skript für die Konvertierung von allen Bildern in das WebP-Bildformat
# Alle Dateien werden in demselben Verzeichnis abgespeichert
# Vorraussetzung für die Ausführung: Das WebP-Paket muss auf dem Host installiert sein!
# Unterstützte Bildformate: .GIF .JPEG .PNG .JPG .TIFF
# -m Kompressionslevel (0-6)
# -q Ausgangsqualität (%)
# -mt Multithreading für eine schnellere Bearbeitung
read -rp "Gebe einen Pfad des aktuellen Bildverzeichnisses ein, um alle Bilder in das WebP-Bildformat umzuwandeln: " directory
files=$(ls -A1 "$directory"|grep -E ".gif|.jpeg|.jpg|.png|.tiff")
echo "$files"|while read -r file; do cwebp -mt -m 6 -q 70 "$directory"/"$file" -o "$directory"https://usercontent.one/wp/www.veuhoff.net/"$file.webp"; done
Speichere das Skript ab (STRG + S) und verlasse den Editor wieder (STRG + X).
Linux-Skript ausführbar machen:
sudo chmod +x webp-konverter.sh
WebP-Konverter-Skript starten:
./webp-konverter.sh
Nach der Ausführung des soeben angelegten Shell-Skripts muss nur noch ein Pfad von dem Verzeichnis eingegeben werden, in denen sich die Bilder befinden, die in das neue WebP-Bildformat konvertiert werden sollen. Das lohnt sich immer dann, wenn du mehrere Bilder in einem Verzeichnis hast und der Aufwand zu groß wäre, jedes Bild einzeln per Hand umzuwandeln.
Warum es sich lohnt, Bilder in das WebP-Format umzuwandeln
Die Komprimierung von Dateien ist nichts Ungewöhnliches und dient in erster Linie dazu, den von Dateien anfallenden Speicherplatz zu verringern. Das kennen wir von MP3-Dateien, gepackten Archiven (.RAR/.ZIP/.TAR) und von Videoformaten (.MKV). Für Bilder hat sich irgendwann die JPG-Komprimierung als Standard durchgesetzt.
JPG wurde bereits 1991 erfunden, also vor über 30-Jahren. Die Komprimierung gilt bis heute als eines der am häufigsten verwendeten Formaten für Bilder. Speicherplatz kostet aus heutiger Sicht zwar nicht mehr viel Geld und so eine übliche Bildsammlung fällt doch nicht stark ins Gewicht, warum sollten wir dann überhaupt Bilder in das WebP-Bildformat konvertieren?
WebP = Das Bildformat der Zukunft
Die Umwandlung von JPG- und PNG-Images in das WebP-Bildformat macht immer dann Sinn, wenn wir die Bilder auf unsere Webseite hochladen möchten, um den Inhalt mit hübschen Grafiken aufzuwerten. Erstellen wir eine Seite und verwenden dafür mehrere Bilder, können bei der Verwendung von WebP-Images einige Megabytes an Datenverkehr eingespart werden.
Das spart erheblich Ladezeit für Smartphones, die ohne Wireless-LAN jede einzelne Grafik herunterladen und in den Zwischenspeicher cachen müssen. Der Webseitenaufbau wird also beschleunigt, was die Benutzer-Erfahrung (User-Experience) erhöht.
Das scrollen über den Webseiteninhalt wird schneller und fühlt sich dementsprechend auch flüssiger an. Gleichzeitig wird dem Besucher einiges an Datenverbrauch (Traffic) erspart, da für den gesamten Webseitenaufbau im Browser weniger Ressourcen heruntergeladen werden möchten. WebP ist das zukünftige Bildformat für die Bereitstellung von Bildmaterial im Internet und wird langfristig betrachtet das alte JPG-Bildformat zumindest für Webinhalte ablösen.
Der Unterschied auf die Dateigröße und die Qualität bezogen zwischen JPG- und WebP-Komprimierungen im Vergleich (JPG vs. WebP)
Zum Abschluss meines Artikels über die Erstellung eines Linux-Shell-Skripts für die automatische Konvertierung von JPG und anderen Bildformaten in das WebP-Format möchte ich dir zwei Bilder gegenüberstellen, von dessen Qualität und Leistung bei der Komprimierung du dich doch einfach mal selbst überzeugen kannst, damit dir die Unterscheidung leichter fällt.
Kannst du einen optischen Unterschied feststellen? Nach der Verwendung des WebP-Konverter-Skripts auf meinem Linux Server habe ich die Dateigröße des Bildmaterials um 65,88 % verringert. Abschließend sollte nun jedem Entwickler und Betreiber einer Webseite klar sein, dass die Verwendung von WebP nicht nur den Speicherplatz verringert, Ladezeiten verbessert und das Benutzererlebnis erhöht wird, sondern dass wir auch keine bemerkbare Verschlechterung der Qualität befürchten müssen.
Daher meine Empfehlung: Verwende ausschließlich WebP-Bildformate für Uploads auf einen Webserver. Mit dieser Anleitung für die Umwandelung von Bildern benötigst du keinen Drittanbieter Service und kannst dir auch das Geld für WordPress-Plugins sparen, da sich das Skript auch ideal für das Bildverzeichnis (Content-Uploads) deines Webservers mit WordPress-basierten Webseiten verwenden lässt.
