WebP - Das Grafikformat der Zukunft
Installieren und Bereitstellen von WebP-Images auf Ubuntu
Von Sven Clauer am 25.11.2021
WebP ist ein kostenloses Open-Source-Bildformat, das auf dem VP8-Videoformat basiert. Google hat es 2010 entwickelt und seitdem verwenden immer mehr Websites und mobilen Anwendungen dieses Bildformat, um sich schnell zu etablieren. Google Chrome und Opera sind nativ die beiden Browser, die das WebP-Format unterstützen. Der Browser Microsoft Edge, sowie der Firefox seit der Version 65, unterstützen das WebP-Format nun auch. Apple wehrte sich lange das Konkurrenzformat zu unterstützen, letztlich mussten sie aber auch nachgeben, so dass die Nutzung vom verwendeten Betriebssystem abhängt. Dieses Format unterstützt sowohl verlustfreie als auch verlustbehaftete Bildkomprimierungen, wie z. B. Animationen.
Der Vorteil der Verwendung von WebP als Bildformat ist die geringere Dateigröße. Die geringere Dateigröße von WebP-Bildern beschleunigt das Laden der Website, was äußerst wichtig ist, und reduziert auch die Bandbreitennutzung. Wenn auf Ihrer Website Probleme mit der Leistung oder erhöhtem Datenverkehr auftreten, ist es wichtig, die Seitenleistung zu optimieren. Dafür können wir alle Formate der Website-Bilder in das WebP-Format konvertieren.
In dieser Wissensdatenbank lernen Sie die Schritte zum Installieren des Befehlszeilen-WebP-Tools (cwebp) und die Schritte zum Konvertieren aller Bilder in das WebP-Format kennen.
Voraussetzungen
- Ein SSH-Benutzer mit Sudo-Berechtigungen.
- Ein Server, der mit dem LAMP-Stack installiert ist.
Schritte zum Installieren von cwebp und Vorbereiten des Image-Verzeichnisses
Zuerst müssen wir die Software installieren, die uns hilft, die Bilder zu konvertieren. Und dann erstellen wir ein Verzeichnis mit Bildern zum Testen. cwebp ist ein Befehlszeilen-Dienstprogramm, das hilft, Bilder in das '.webp'-Format zu komprimieren. Führen Sie die folgenden Schritte aus, um das Befehlszeilendienstprogramm cwebp auf Ihrem Ubuntu-Server zu installieren:
Melden Sie sich als SSH-Benutzer mit Sudo-Berechtigungen beim Server an.
Aktualisieren Sie nun die Repositorys, indem Sie den folgenden Befehl ausführen.
$ sudo apt update
Führen Sie den folgenden Befehl aus, um WebP auf Ihrem Server zu installieren.
$ sudo apt install webp
Erstellen Sie danach ein neues Image-Verzeichnis namens 'webp' im Apache-Stammverzeichnis.
$ sudo mkdir /var/www/html/webp
Ändern Sie dann den Besitz des oben erstellten Verzeichnisses in den ssh-Benutzer 'sshusr'.
$ sudo chown sshusr: /var/www/html/webp
Um das Befehlszeilendienstprogramm cwebp zu testen, können wir mit wget kostenlose PNG- und JPEG-Bilder herunterladen. Das Dienstprogramm wget ist in das Ubuntu-Betriebssystem integriert, sodass Sie es nicht installieren müssen. Führen Sie die folgenden Befehle aus, um die Testbilder mit wget herunterzuladen.
$ sudo wget -c "https://www.clauer.de/img/Demo-Katze_1920.jpg" -O /var/www/html/webp/Demo-Katze_1920.jpg $ sudo wget -c "https://www.clauer.de/img/Demo-Wasserfall_1920.jpg" -O /var/www/html/webp/Demo-Wasserfall_1920.jpg
Wechseln Sie dann in das Verzeichnis ‚/var/www/html/webp‘.
$ sudo cd /var/www/html/webp
Komprimieren Sie Bilddateien in das WebP-Format mit cwebp
Wir können die PNG- und JPEG-Bilder mit dem Befehlszeilendienstprogramm von WebP in das „.webp“-Format konvertieren.
Die allgemeine Syntax des cwebp-Befehls zum Konvertieren des Bildformats lautet:
$ cwebp image.jpg -o image.webp
Die Option -o gibt den Pfad an, in dem Sie die konvertierte WebP-Datei speichern möchten.
Da wir uns bereits im Verzeichnis ‚/var/www/html/webp‘ befinden, führen Sie den folgenden Befehl aus, um die JPG-Datei in das WebP-Format im selben Verzeichnis zu konvertieren.
$ sudo cwebp -q 100 Demo-Wasserfall_1920.jpg -o Demo-Wasserfall_1920.webp
Das -q im oben angegebenen Befehl gibt die Bildqualität an, die nach der Konvertierung beibehalten werden muss. Nach der Konvertierung können Sie die drastische Größenverringerung der Datei mit dem Befehl ls überprüfen.
$ sudo ls -lh Demo-Wasserfall_1920.jpg Demo-Wasserfall_1920.webp -rw-r--r-- 1 sshusr sshusr 7.4M Jan 18 23:36 Demo-Wasserfall_1920.jpg -rw-r--r-- 1 sshusr sshusr 3.9M Jan 23 16:46 Demo-Wasserfall_1920.webp
Um die vollständigen Daten des Bildes während der Komprimierung beizubehalten, verwenden Sie die Option '-lossless' anstelle von -q. Wir verwenden diese Option hauptsächlich, um die PNG-Datei zu konvertieren, um ihre Qualität beizubehalten. Um die PNG-Datei zum Testen zu konvertieren, führen Sie den folgenden Befehl aus.
$ sudo cwebp -lossless Wasserfall.png -o Wasserfall.webp
So können Sie eine einzelne JPG- oder PNG-Datei in das Webp-Format konvertieren. Sehen wir uns nun an, wie man das in großen Mengen macht!
Konvertieren Sie alle JPEG- und PNG-Bilder in einem Verzeichnis
Es ist immer schwierig, alle JPEG- und PNG-Bilder manuell in ein Verzeichnis zu konvertieren. Wir werden also ein Shell-Skript verwenden, um alle JPEG-Dateien mit 90% Qualität in das WebP-Format zu konvertieren und die PNG-Dateien in das verlustfreie WebP-Format zu konvertieren.
Erstellen Sie zunächst ein Skript namens 'webp-convert.sh' im Home-Verzeichnis mit einem der Texteditoren.
$ sudo nano ~/webp-convert.sh
Fügen Sie dann die folgenden Zeilen in die Datei ein.
#!/bin/bash
# konvertiere JPEG images
find $1 -type f -and \( -iname "*.jpg" -o -iname "*.jpeg" \) \ -exec bash -c 'webp_path=$(sed 's/\.[^.]*$/.webp/' <<< "$0");
if [ ! -f "$webp_path" ]; then
cwebp -quiet -q 90 "$0" -o "$webp_path";
fi;' {} \;
# konvertiere PNG images
find $1 -type f -and -iname "*.png" \ -exec bash -c 'webp_path=$(sed 's/\.[^.]*$/.webp/' <<< "$0");
if [ ! -f "$webp_path" ]; then
cwebp -quiet -lossless "$0" -o "$webp_path";
fi;' {} \;
Dieses Skript, das wir gerade erstellt haben, macht Folgendes:
- Erstellen Sie eine webp_path-Variable
- Überprüfen Sie, ob die .webp-Version für das Bild bereits vorhanden ist.
- Konvertieren Sie die Datei, wenn sie nicht existiert.
Alternativ können Sie folgendes Script ausprobieren. Das Resultat ist das gleiche. Allerdings ist der BASH-Code wesentlich eleganter geschrieben.
#!/bin/bash
PARAMS=('-m 6 -q 70 -mt -af -progress')
if [ $# -ne 0 ]; then
PARAMS=$@;
fi
cd $(pwd)
shopt -s nullglob nocaseglob extglob
for FILE in *.@(jpg|jpeg|tif|tiff|png); do
cwebp $PARAMS "$FILE" -o "${FILE%.*}".webp;
done
Danach speichern und schließen Sie die Datei. Machen Sie dann das Skript ausführbar, indem Sie den folgenden Befehl verwenden.
$ sudo chmod a+x ~/webp-convert.sh
Angenommen, wir haben einige weitere JPEG- und PNG-Dateien im Verzeichnis ‚/var/www/html/webp‘ hinzugefügt. Führen Sie dann das Skript in diesem Verzeichnis aus, um zu überprüfen, ob das Skript funktioniert.
$ sudo ./webp-convert.sh /var/www/html/webp
Bereitstellung von WebP-Bildern für Besucher mit HTML-Elementen
Zuerst müssen wir alle Bilder im Verzeichnis in das .webp-Format konvertieren. Dann können wir die HTML5-Elemente '(
Erstellen Sie zunächst eine HTML-Datei im Verzeichnis.
$ sudo nano /var/www/html/webp/picture.html
Fügen Sie dann den folgenden Code in die HTML-Datei ein, um "Wasserfall.webp" auf der Website in unterstützten Browsern anzuzeigen.
<picture>
<source srcset="Wasserfall.webp" type="image/webp">
<img src="Wasserfall.png" alt="Wasserfall">
</picture>
Speichern und schließen Sie die Datei.
Danach können Sie überprüfen, ob das .webp-Format des Bildes an die Besucher geliefert wird, indem Sie die folgende URL durchsuchen.
http://<domain.de>/webp/picture.html
Abschluss
WebP ist ein kostenloses Open-Source-Bildformat, das auf dem VP8-Videoformat basiert. Die Verwendung von WebP-Bildformaten auf einer Website hilft, die Bandbreitennutzung zu reduzieren und die Leistung der Website zu verbessern. Wir hoffen, dass diese Wissensdatenbank für Sie hilfreich war.
Kontaktieren Sie uns
Hilfreich ist hier einen erfahrenen Anbieter von Suchmaschinenoptimierung mit der professionellen Betreuung Ihrer Seite zu beauftragen. Gerne erstellen wir Ihnen unverbindlich und kostenlos ein Angebot für die Optimierung Ihrer Webseite.
Hier zwei Beispiele
Beide Vorschaubilder sind im .JPG Format. Die Detailbilder sind in .webp mit unterschiedlichen Qualitätsstufen konvertiert.
