TOC

Erstellen und Bereitstellen von WebP-Bildern zur Beschleunigung Ihrer Website

Der Autor hat die Apache Software Foundation ausgewählt, um eine Spende als Teil der Write for DOnations zu erhalten. Programm.

Einführung

WebP ist ein offenes Bildformat, das 2010 von Google auf der Grundlage des VP8-Videoformats entwickelt wurde. Seitdem ist die Anzahl der Websites und mobilen Anwendungen, die das WebP-Format verwenden, rasant gestiegen. Sowohl Google Chrome als auch Opera unterstützen das WebP-Format nativ. Da diese Browser etwa 74% des Webverkehrs ausmachen, können Benutzer schneller auf Websites zugreifen, wenn diese Websites WebP-Bilder verwenden. Es gibt auch pläne zur Implementierung von WebP in Firefox.

Das WebP-Format unterstützt sowohl verlustbehaftete als auch verlustfreie Bildkomprimierung, einschließlich Animation. Der Hauptvorteil gegenüber anderen im Web verwendeten Bildformaten ist die wesentlich geringere Dateigröße, die das Laden von Webseiten beschleunigt und die Bandbreitennutzung verringert. Die Verwendung von WebP-Bildern kann zur Erhöhung der Seitengeschwindigkeit führen. Wenn in Ihrer Anwendung oder Website Leistungsprobleme oder ein erhöhter Datenverkehr auftreten, kann das Konvertieren Ihrer Bilder zur Optimierung der Seitenleistung beitragen.

In diesem Tutorial verwenden Sie das Befehlszeilentool "+ cwebp +", um Bilder in das WebP-Format zu konvertieren. Dabei werden Skripts erstellt, mit denen Bilder in einem bestimmten Verzeichnis angezeigt und konvertiert werden. Schließlich werden Sie zwei Möglichkeiten erkunden, um Ihren Besuchern WebP-Bilder bereitzustellen.

Voraussetzungen

Für die Arbeit mit WebP-Images ist keine bestimmte Distribution erforderlich. Wir zeigen Ihnen jedoch, wie Sie mit der entsprechenden Software unter Ubuntu 16.04 und CentOS 7 arbeiten. Um diesem Tutorial zu folgen, benötigen Sie:

Schritt 1 - cwebp installieren und das Images-Verzeichnis vorbereiten

In diesem Abschnitt installieren wir Software zum Konvertieren von Bildern und erstellen ein Verzeichnis mit Bildern als Testmaßnahme.

Unter Ubuntu 16.04 können Sie + cwebp + installieren, ein Dienstprogramm, das Bilder in das Format + .webp + komprimiert, indem Sie Folgendes eingeben:

sudo apt-get update
sudo apt-get install webp

Geben Sie unter CentOS 7 Folgendes ein:

sudo yum install libwebp-tools

So erstellen Sie ein neues Bilderverzeichnis mit dem Namen "+ webp " im Apache-Webstamm (standardmäßig unter " / var / www / html +"):

sudo mkdir /var/www/html/webp

Ändern Sie den Eigentümer dieses Verzeichnisses in Ihren Nicht-Root-Benutzer * sammy *:

sudo chown : /var/www/html/webp

Zum Testen von Befehlen können Sie mit + wget + kostenlose JPEG- und PNG-Bilder herunterladen. Dieses Tool ist standardmäßig unter Ubuntu 16.04 installiert. Wenn Sie CentOS 7 verwenden, können Sie es installieren, indem Sie Folgendes eingeben:

sudo yum install wget

Laden Sie als Nächstes die Testbilder mit den folgenden Befehlen herunter:

wget -c "https://upload.wikimedia.org/wikipedia/commons/2/24/Junonia_orithya-Thekkady-2016-12-03-001.jpg?download" -O /var/www/html/webp/image1.jpg
wget -c "https://upload.wikimedia.org/wikipedia/commons/5/54/Mycalesis_junonia-Thekkady.jpg" -O /var/www/html/webp/image2.jpg
wget -c "https://cdn.pixabay.com/photo/2017/07/18/15/39/dental-care-2516133_640.png" -O /var/www/html/webp/logo.png

Der größte Teil Ihrer Arbeit im nächsten Schritt befindet sich im Verzeichnis "+ / var / www / html / webp +", in das Sie wechseln können, indem Sie Folgendes eingeben:

cd /var/www/html/webp

Wenn die Test-Images installiert sind und der Apache-Webserver, + mod_rewrite + und + cwebp + installiert sind, können Sie mit dem Konvertieren von Images fortfahren.

Schritt 2 - Bilddateien mit cwebp komprimieren

Die Bereitstellung von "+ .webp " - Bildern für Website-Besucher erfordert " .webp " - Versionen von Bilddateien. In diesem Schritt konvertieren Sie JPEG- und PNG-Bilder mit ` cwebp ` in das Format ` .webp +`. Die * allgemeine * Syntax des Befehls sieht folgendermaßen aus:

cwebp image.jpg -o image.webp

Die Option "+ -o +" gibt den Pfad zur WebP-Datei an.

Da Sie sich immer noch im Verzeichnis "+ / var / www / html / webp " befinden, können Sie den folgenden Befehl ausführen, um " image1.jpg " in " image1.webp " und " image2.jpg " in "" zu konvertieren image2.webp + `:

cwebp -q 100 image1.jpg -o image1.webp
cwebp -q 100 image2.jpg -o image2.webp

Wenn Sie den Qualitätsfaktor "+ -q +" auf 100 setzen, bleibt 100% der Bildqualität erhalten. Wenn nicht angegeben, ist der Standardwert 75.

Überprüfen Sie als nächstes die Größe der JPEG- und WebP-Bilder mit dem Befehl + ls +. Die Option "+ -l " zeigt das lange Listenformat an, das die Größe der Datei enthält, und die Option " -h " stellt sicher, dass " ls +" für Menschen lesbare Größen ausgibt:

ls -lh image1.jpg image1.webp image2.jpg image2.webp
Output-rw-r--r-- 1 sammy sammy 7.4M Oct 28 23:36 image1.jpg
-rw-r--r-- 1 sammy sammy 3.9M Feb 18 16:46
-rw-r--r-- 1 sammy sammy  16M Dec 18  2016 image2.jpg
-rw-r--r-- 1 sammy sammy 7.0M Feb 18 16:59

Die Ausgabe des Befehls "+ ls " zeigt, dass die Größe von " image1.jpg " 7,4 MB beträgt, während die Größe von " image1.webp " 3,9 MB beträgt. Gleiches gilt für ` image2.jpg ` (16M) und ` image2.webp +` (7M). Diese Dateien haben fast die Hälfte ihrer Originalgröße!

Um die vollständigen Originaldaten der Bilder während der Komprimierung zu speichern, können Sie anstelle von "+ -q " die Option " -lossless +" verwenden. Dies ist die beste Option, um die Qualität von PNG-Bildern beizubehalten. Um das heruntergeladene PNG-Bild aus Schritt 1 zu konvertieren, geben Sie Folgendes ein:

cwebp -lossless logo.png -o logo.webp

Der folgende Befehl zeigt, dass die verlustfreie WebP-Bildgröße (60 KB) ungefähr halb so groß ist wie das ursprüngliche PNG-Bild (116 KB):

ls -lh logo.png logo.webp
Output-rw-r--r-- 1 sammy sammy 116K Jul 18  2017 logo.png
-rw-r--r-- 1 sammy sammy  60K Feb 18 16:42

Die konvertierten WebP-Bilder im Verzeichnis "+ / var / www / html / webp +" sind etwa 50% kleiner als die entsprechenden JPEG- und PNG-Bilder. In der Praxis können sich die Komprimierungsraten in Abhängigkeit von bestimmten Faktoren unterscheiden: der Komprimierungsrate des Originalbilds, dem Dateiformat, der Art der Konvertierung (verlustbehaftet oder verlustfrei), dem Qualitätsprozentsatz und Ihrem Betriebssystem. Wenn Sie mehr Bilder konvertieren, können Abweichungen der Konvertierungsraten aufgrund dieser Faktoren auftreten.

Schritt 3 - Konvertieren von JPEG- und PNG-Bildern in ein Verzeichnis

Das Schreiben eines Skripts vereinfacht den Konvertierungsprozess, da die manuelle Konvertierung entfällt. Wir werden nun ein Konvertierungsskript schreiben, das JPEG-Dateien findet und mit 90% Qualität in das WebP-Format konvertiert. Gleichzeitig werden PNG-Dateien in verlustfreie WebP-Bilder konvertiert.

Erstellen Sie mit "+ nano " oder Ihrem bevorzugten Editor das Skript " webp-convert.sh +" im Ausgangsverzeichnis Ihres Benutzers:

nano ~/webp-convert.sh

Die erste Zeile des Skripts sieht folgendermaßen aus:

~ / webp-convert.sh

find $1 -type f -and \( -iname "*.jpg" -o -iname "*.jpeg" \)

Diese Linie besteht aus folgenden Komponenten:

  • https://www.digitalocean.com/community/tutorials/how-to-use-find-and-locate-to-search-for-files-on-a-linux-vps [+ find +]: Dieser Befehl sucht nach Dateien in einem bestimmten Verzeichnis.

  • + $ 1 +: Dieser Positionsparameter gibt den Pfad des Bildverzeichnisses an, der über die Befehlszeile abgerufen wird. Letztendlich macht es den Speicherort des Verzeichnisses weniger abhängig vom Speicherort des Skripts.

  • + -Typ f +: Diese Option weist + find + an, nur nach regulären Dateien zu suchen.

  • + -iname +: Dieser Test vergleicht Dateinamen mit einem bestimmten Muster. Der Test, bei dem die Groß- und Kleinschreibung nicht berücksichtigt wird, weist "+ find " an, nach Dateinamen zu suchen, die mit " .jpg " (" * .jpg ") oder " .jpeg " (" * .jpeg +") enden. .

  • + -o +: Dieser logische Operator weist den Befehl + find + an, Dateien aufzulisten, die mit dem ersten + -iname + Test (+ -iname" * .jpg "+) * oder * dem zweiten (`+) übereinstimmen -iname "* .jpeg" + `).

  • + () +: Klammern um diese Tests zusammen mit dem Operator "" und "" stellen sicher, dass der erste Test (d. H. + -Typ f +) wird immer ausgeführt.

In der zweiten Zeile des Skripts werden die Bilder mit dem Parameter "+ -exec " in WebP konvertiert. Die allgemeine Syntax dieses Parameters lautet ` -exec command {} \; `. Die Zeichenfolge " {} " wird durch jede Datei ersetzt, durch die der Befehl iteriert, während das "; " " find +" mitteilt, wo der Befehl endet:

~ / webp-convert.sh

find $1 -type f -and \( -iname "*.jpg" -o -iname "*.jpeg" \) \
-exec bash -c 'commands' {} \;

In diesem Fall erfordert der Parameter "+ -exec +" mehr als einen Befehl zum Suchen und Konvertieren von Bildern:

  • + bash +: Mit diesem Befehl wird ein kleines Skript ausgeführt, mit dem die + .webp + - Version der Datei erstellt wird, falls sie nicht vorhanden ist. Dieses Skript wird dank der Option "+ -c " als String an " bash +" übergeben.

  • "" Befehle "": Dieser Platzhalter ist das Skript, das "+ .webp +" - Versionen Ihrer Dateien erstellt.

Das Skript in "" Befehlen "" macht die folgenden Dinge:

  • Erstellen Sie eine + webp_path + Variable.

  • Testen Sie, ob die + .webp + - Version der Datei vorhanden ist.

  • Machen Sie die Datei, wenn es nicht existiert.

Das kleinere Skript sieht folgendermaßen aus:

~ / webp-convert.sh

...
webp_path=$(sed 's/\.[^.]*$/.webp/' <<< "$0");
if [ ! -f "$webp_path" ]; then
 cwebp -quiet -q 90 "$0" -o "$webp_path";
fi;

Die Elemente in diesem kleineren Skript umfassen:

  • + webp_path +: Diese Variable wird unter Verwendung von https://www.digitalocean.com/community/tutorials/the-basics-of-using-the-sed-stream-editor-to-manipulate-text-in-linux generiert [+ sed +] und der übereinstimmende Dateiname aus dem Befehl + bash +, angegeben durch den Positionsparameter + $ 0 +. Ein here string (+ <<< +) übergibt diesen Namen an + sed +.

  • `+ if [! -f "$ webp_path"] + `: Mit diesem Test wird festgestellt, ob eine Datei mit dem Namen" + "$ webp_path" + `bereits vorhanden ist, wobei der logische Operator" + not + "(" +! + ") verwendet wird.

  • + cwebp +: Mit diesem Befehl wird die Datei erstellt, falls sie nicht vorhanden ist. Dabei wird die Option "+ -q +" verwendet, um keine Ausgabe zu drucken.

Wenn dieses kleinere Skript anstelle des Platzhalters "" Befehle "" verwendet wird, sieht das vollständige Skript zum Konvertieren von JPEG-Bildern jetzt folgendermaßen aus:

~ / webp-convert.sh

# converting 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;' {} \;

Um PNG-Bilder in WebP zu konvertieren, gehen wir wie folgt vor, mit zwei Unterschieden: Erstens lautet das Muster "+ -iname " im Befehl " find " "" *. Png "". Zweitens verwendet der Konvertierungsbefehl die Option " -lossless " anstelle der Option " -q +" für die Qualität.

Das fertige Skript sieht folgendermaßen aus:

~ / webp-convert.sh

#!/bin/bash

# converting 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;' {} \;

# converting 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;' {} \;

Speichern Sie die Datei und beenden Sie den Editor.

Als nächstes setzen wir das Skript "+ webp-convert.sh " mit den Dateien im Verzeichnis " / var / www / html / webp +" in die Praxis um. Stellen Sie sicher, dass die Skriptdatei ausführbar ist, indem Sie den folgenden Befehl ausführen:

chmod a+x ~/webp-convert.sh

Führen Sie das Skript im Verzeichnis images aus:

./webp-convert.sh /var/www/html/webp

Nichts ist passiert! Dies liegt daran, dass wir diese Bilder bereits in Schritt 2 konvertiert haben. In Zukunft konvertiert das Skript "+ webp-convert " Bilder, wenn wir neue Dateien hinzufügen oder die Versionen " .webp " entfernen. Um zu sehen, wie dies funktioniert, löschen Sie die in Schritt 2 erstellten ` .webp +` - Dateien:

rm /var/www/html/webp/*.webp

Nachdem Sie alle + .webp + - Bilder gelöscht haben, führen Sie das Skript erneut aus, um sicherzustellen, dass es funktioniert:

./webp-convert.sh /var/www/html/webp

Der Befehl + ls + bestätigt, dass das Skript die Bilder erfolgreich konvertiert hat:

ls -lh /var/www/html/webp
Output-rw-r--r-- 1 sammy sammy 7.4M Oct 28 23:36 image1.jpg
-rw-r--r-- 1 sammy sammy 3.9M Feb 18 16:46
-rw-r--r-- 1 sammy sammy  16M Dec 18  2016 image2.jpg
-rw-r--r-- 1 sammy sammy 7.0M Feb 18 16:59
-rw-r--r-- 1 sammy sammy 116K Jul 18  2017 logo.png
-rw-r--r-- 1 sammy sammy  60K Feb 18 16:42

Das Skript in diesem Schritt ist die Grundlage für die Verwendung von WebP-Bildern in Ihrer Site, da Sie eine funktionierende Version aller Bilder im WebP-Format benötigen, um den Besuchern zu dienen. Im nächsten Schritt erfahren Sie, wie Sie die Konvertierung neuer Bilder automatisieren.

Schritt 4 - Betrachten von Bilddateien in einem Verzeichnis

In diesem Schritt erstellen wir ein neues Skript, um das Bilderverzeichnis auf Änderungen zu überprüfen und neu erstellte Bilder automatisch zu konvertieren.

Durch das Erstellen eines Skripts, das unser Bilderverzeichnis überwacht, können bestimmte Probleme mit dem Skript "+ webp-convert.sh " behoben werden. Dieses Skript erkennt beispielsweise nicht, ob wir ein Bild umbenannt haben. Wenn wir ein Bild mit dem Namen " foo.jpg " hätten, " webp-convert.sh " ausführen, diese Datei in " bar.jpg " umbenennen und dann " webp-convert.sh " erneut ausführen würden, hätten wir ein Duplikat erstellt ` .webp ` Dateien (` foo.webp ` und ` bar.webp +`). Um dieses Problem zu beheben und das manuelle Ausführen des Skripts zu vermeiden, fügen wir watchers einem anderen Skript hinzu. Watcher überwachen bestimmte Dateien oder Verzeichnisse auf Änderungen und führen als Reaktion auf diese Änderungen Befehle aus.

Der Befehl "+ inotifywait " richtet Beobachter in unserem Skript ein. Dieser Befehl ist Teil des Pakets " inotify-tools +", einer Reihe von Befehlszeilentools, die eine einfache Schnittstelle zum inotify-Kernel-Subsystem bieten. So installieren Sie es unter Ubuntu 16.04:

sudo apt-get install inotify-tools

Unter CentOS 7 ist das Paket "+ inotify-tools " im EPEL-Repository verfügbar. Installieren Sie das EPEL-Repository und das Paket " inotify-tools +" mit den folgenden Befehlen:

sudo yum install epel-release
sudo yum install inotify-tools

Als nächstes erstellen Sie das Skript "+ webp-watchers.sh " im Home-Verzeichnis Ihres Benutzers mit " nano +":

nano ~/webp-watchers.sh

Die erste Zeile im Skript sieht folgendermaßen aus:

~ / webp-watchers.sh

inotifywait -q -m -r --format '%e %w%f' -e close_write -e moved_from -e moved_to -e delete $1

Diese Zeile enthält die folgenden Elemente:

  • + inotifywait +: Dieser Befehl sucht nach Änderungen in einem bestimmten Verzeichnis.

  • + -q +: Diese Option weist + inotifywait + an, leise zu sein und nicht viel Ausgabe zu produzieren.

  • + -m +: Diese Option weist + inotifywait + an, auf unbestimmte Zeit zu laufen und nicht zu beenden, nachdem ein einzelnes Ereignis empfangen wurde.

  • + -r +: Diese Option richtet Beobachter rekursiv ein und überwacht ein bestimmtes Verzeichnis und alle seine Unterverzeichnisse.

  • + - Format +: Diese Option weist + inotifywait + an, Änderungen unter Verwendung des Ereignisnamens gefolgt vom Dateipfad zu überwachen. Die Ereignisse, die wir überwachen möchten, sind + close_write + (ausgelöst, wenn eine Datei erstellt und vollständig auf die Festplatte geschrieben wird), + moved_from + und + moved_to + (ausgelöst, wenn eine Datei verschoben wird) und + delete + ( ausgelöst, wenn eine Datei gelöscht wird).

  • + $ 1 +: Dieser Positionsparameter enthält den Pfad der geänderten Dateien.

Als nächstes fügen wir den Befehl "+ grep " hinzu, um festzustellen, ob es sich bei unseren Dateien um JPEG- oder PNG-Bilder handelt. Die Option " -i " weist " grep " an, Groß- / Kleinschreibung zu ignorieren, " -E " gibt an, dass " grep " erweiterte reguläre Ausdrücke verwenden soll, und " - zeilengepuffert " gibt " grep " an So übergeben Sie die übereinstimmenden Zeilen an eine " while +" - Schleife:

~ / webp-watchers.sh

inotifywait -q -m -r --format '%e %w%f' -e close_write -e moved_from -e moved_to -e delete $1 | grep -i -E '\.(jpe?g|png)$' --line-buffered

Als nächstes erstellen wir eine "+ while" -Schleife mit dem Befehl "+ read". + read i verarbeitet das erkannte Ereignis` + inotifywait` und weist es einer Variablen mit dem Namen + $ operation + und dem verarbeiteten Dateipfad einer Variablen mit dem Namen + $ path + zu:

~ / webp-watchers.sh

...
| while read operation path; do
 # commands
done;

Kombinieren wir diese Schleife mit dem Rest unseres Skripts:

~ / webp-watchers.sh

inotifywait -q -m -r --format '%e %w%f' -e close_write -e moved_from -e moved_to -e delete $1 \
| grep -i -E '\.(jpe?g|png)$' --line-buffered \
| while read operation path; do
 # commands
done;

Nachdem die "+ while +" - Schleife das Ereignis überprüft hat, führen die Befehle in der Schleife je nach Ergebnis die folgenden Aktionen aus:

  • Erstellen Sie eine neue WebP-Datei, wenn eine neue Image-Datei erstellt oder in das Zielverzeichnis verschoben wurde.

  • Löschen Sie die WebP-Datei, wenn die zugehörige Bilddatei aus dem Zielverzeichnis gelöscht oder verschoben wurde.

Es gibt drei Hauptabschnitte innerhalb der Schleife. Eine Variable mit dem Namen "+ webp_path " enthält den Pfad zur " .webp +" - Version des Motivbildes:

~ / webp-watchers.sh

...
webp_path="$(sed 's/\.[^.]*$/.webp/' <<< "$path")";

Als nächstes testet das Skript, welches Ereignis aufgetreten ist:

~ / webp-watchers.sh

...
if [ $operation = "MOVED_FROM" ] || [ $operation = "DELETE" ]; then
 # commands to be executed if the file is moved or deleted
elif [ $operation = "CLOSE_WRITE,CLOSE" ] || [ $operation = "MOVED_TO" ]; then
 # commands to be executed if a new file is created
fi;

Wenn die Datei verschoben oder gelöscht wurde, prüft das Skript, ob die Version + .webp + vorhanden ist. In diesem Fall wird das Skript es mit + rm + entfernen:

~ / webp-watchers.sh

...
if [ -f "$webp_path" ]; then
 $(rm -f "$webp_path");
fi;

Bei neu erstellten Dateien geschieht die Komprimierung wie folgt:

  • Wenn es sich bei der übereinstimmenden Datei um ein PNG-Bild handelt, verwendet das Skript die verlustfreie Komprimierung.

  • Ist dies nicht der Fall, verwendet das Skript eine verlustbehaftete Komprimierung mit der Option "+ -quality +".

Fügen wir dem Skript die folgenden Befehle hinzu:

~ / webp-watchers.sh

...
if [ $(grep -i '\.png$' <<< "$path") ]; then
 $(cwebp -quiet -lossless "$path" -o "$webp_path");
else
 $(cwebp -quiet -q 90 "$path" -o "$webp_path");
fi;

In vollem Umfang sieht die Datei "+ webp-watchers.sh +" folgendermaßen aus:

~ / webp-watchers.sh

#!/bin/bash
echo "Setting up watches.";

# watch for any created, moved, or deleted image files
inotifywait -q -m -r --format '%e %w%f' -e close_write -e moved_from -e moved_to -e delete $1 \
| grep -i -E '\.(jpe?g|png)$' --line-buffered \
| while read operation path; do
 webp_path="$(sed 's/\.[^.]*$/.webp/' <<< "$path")";
 if [ $operation = "MOVED_FROM" ] || [ $operation = "DELETE" ]; then # if the file is moved or deleted
   if [ -f "$webp_path" ]; then
     $(rm -f "$webp_path");
   fi;
 elif [ $operation = "CLOSE_WRITE,CLOSE" ] || [ $operation = "MOVED_TO" ]; then  # if new file is created
    if [ $(grep -i '\.png$' <<< "$path") ]; then
      $(cwebp -quiet -lossless "$path" -o "$webp_path");
    else
      $(cwebp -quiet -q 90 "$path" -o "$webp_path");
    fi;
 fi;
done;

Speichern und schließen Sie die Datei. Vergiss nicht, es ausführbar zu machen:

chmod a+x ~/webp-watchers.sh

Führen Sie dieses Skript im Hintergrund im Verzeichnis "+ / var / www / html / webp " mit " & " aus. Lass uns auch die Standardausgabe und den Standardfehler in eine ` ~ / output.log +` umleiten, um die Ausgabe an einem leicht verfügbaren Ort zu speichern:

./webp-watchers.sh /var/www/html/webp > output.log 2>&1 &

Zu diesem Zeitpunkt haben Sie die JPEG- und PNG-Dateien in "+ / var / www / html / webp " in das WebP-Format konvertiert und Watcher für diese Arbeit mit dem Skript " webp-watchers.sh +" eingerichtet. Es ist jetzt an der Zeit, Optionen zu untersuchen, um WebP-Bilder an Ihre Website-Besucher zu liefern.

Schritt 5 - Bereitstellen von WebP-Bildern für Besucher mithilfe von HTML-Elementen

In diesem Schritt wird erläutert, wie WebP-Bilder mit HTML-Elementen bereitgestellt werden. Zu diesem Zeitpunkt sollten sich im Verzeichnis "+ / var / www / html / webp " jeweils " .webp " - Versionen der JPEG- und PNG-Testbilder befinden. Wir können sie nun zur Unterstützung von Browsern bereitstellen, die entweder HTML5-Elemente (` <picture> `) oder das ` mod_rewrite +` Apache-Modul verwenden. In diesem Schritt werden HTML-Elemente verwendet.

Mit dem + <picture> + Element können Sie Bilder direkt in Ihre Webseiten einbinden und mehr als eine Bildquelle definieren. Wenn Ihr Browser das WebP-Format unterstützt, lädt er die + .webp + - Version der Datei anstelle der ursprünglichen herunter, was dazu führt, dass Webseiten schneller bereitgestellt werden. Erwähnenswert ist, dass das Element + <picture> + in modernen Browsern, die das WebP-Format unterstützen, gut unterstützt wird.

Das + <picture> + Element ist ein Container mit + <source> + und + <img> + Elementen, die auf bestimmte Dateien verweisen. Wenn wir + <source> + verwenden, um auf ein + .webp + - Bild zu verweisen, wird der Browser sehen, ob er damit umgehen kann. Andernfalls wird auf die Bilddatei zurückgegriffen, die im Attribut "+ src " im Element " <img> +" angegeben ist.

Verwenden wir die Datei "+ logo.png " aus unserem Verzeichnis " / var / www / html / webp ", das wir mit " <source> " in " logo.webp " konvertiert haben. Wir können den folgenden HTML-Code verwenden, um " logo.webp " für jeden Browser anzuzeigen, der das WebP-Format unterstützt, und " logo.png " für jeden Browser, der WebP oder das " <picture> +" - Element nicht unterstützt.

Erstellen Sie eine HTML-Datei unter + / var / www / html / webp / picture.html:

nano /var/www/html/webp/picture.html

Fügen Sie der Webseite den folgenden Code hinzu, um "+ logo.webp " für Browser anzuzeigen, die das Element " <picture> +" verwenden:

/var/www/html/webp/picture.html

<picture>
 <source srcset="logo.webp" type="image/webp">
 <img src="logo.png" alt="Site Logo">
</picture>

Speichern und schließen Sie die Datei.

Um zu testen, ob alles funktioniert, navigieren Sie zu "+ http: /// webp / picture.html". Sie sollten das Test-PNG-Bild sehen.

Nachdem Sie nun wissen, wie Sie "+ .webp " - Bilder direkt aus HTML-Code bereitstellen können, wollen wir uns ansehen, wie Sie diesen Prozess mit dem " mod_rewrite +" - Modul von Apache automatisieren.

Schritt 6 - Bereitstellen von WebP-Bildern mit mod_rewrite

Wenn wir die Geschwindigkeit unserer Website optimieren möchten, aber eine große Anzahl von Seiten oder zu wenig Zeit zum Bearbeiten von HTML-Code haben, können wir mit dem Apache-Modul + mod_rewrite + den Prozess der Bereitstellung von + .webp + - Bildern für die Unterstützung automatisieren Browser.

Erstellen Sie zunächst eine "+ .htaccess " - Datei im Verzeichnis " / var / www / html / webp +" mit dem folgenden Befehl:

nano /var/www/html/webp/.htaccess

Die Direktive "+ ifModule " prüft, ob " mod_rewrite " verfügbar ist. Wenn dies der Fall ist, kann es mit ` RewriteEngine On ` aktiviert werden. Fügen Sie diese Direktiven zum ` .htaccess +` hinzu:

/var/www/html/webp/.htaccess

<ifModule mod_rewrite.c>
 RewriteEngine On
 # further directives
</IfModule>

Der Webserver führt mehrere Tests durch, um festzustellen, wann dem Benutzer "+ .webp " - Bilder bereitgestellt werden sollen. Wenn ein Browser eine Anfrage stellt, enthält er einen Header, der dem Server angibt, was der Browser verarbeiten kann. Im Falle von WebP sendet der Browser einen " Accept " - Header, der " image / webp " enthält. Wir werden prüfen, ob der Browser diesen Header mit ` RewriteCond ` gesendet hat, der die Kriterien angibt, die erfüllt werden müssen, um die ` RewriteRule +` auszuführen:

/var/www/html/webp/.htaccess

...
RewriteCond %{HTTP_ACCEPT} image/webp

Alles außer JPEG- und PNG-Bildern sollte herausgefiltert werden. Fügen Sie mit + RewriteCond + erneut einen regulären Ausdruck hinzu (ähnlich dem, was wir in den vorherigen Abschnitten verwendet haben), um den angeforderten URI zu erfüllen:

/var/www/html/webp/.htaccess

...
RewriteCond %{REQUEST_URI}  (?i)(.*)(\.jpe?g|\.png)$

Mit dem Modifikator "+ (? I) +" wird die Groß- / Kleinschreibung nicht berücksichtigt.

Um zu überprüfen, ob die + .webp + Version der Datei existiert, verwenden Sie + RewriteCond + erneut wie folgt:

/var/www/html/webp/.htaccess

...
RewriteCond %{DOCUMENT_ROOT}%1.webp -f

Wenn alle vorherigen Bedingungen erfüllt sind, leitet + RewriteRule + die angeforderte JPEG- oder PNG-Datei in die zugehörige WebP-Datei um. Beachten Sie, dass dies unter Verwendung des Flags "+ -R " umgeleitet wird, anstatt den URI umzuschreiben. Der Unterschied zwischen Umschreiben und Umleiten besteht darin, dass der Server die umgeschriebene URI bereitstellt, ohne dies dem Browser mitzuteilen. Der URI zeigt beispielsweise an, dass die Dateierweiterung " .png " lautet, es handelt sich jedoch tatsächlich um eine " .webp " - Datei. Fügen Sie der Datei ` RewriteRule +` hinzu:

/var/www/html/webp/.htaccess

...
RewriteRule (?i)(.*)(\.jpe?g|\.png)$ %1\.webp [L,T=image/webp,R]

Zu diesem Zeitpunkt ist der Abschnitt "+ mod_rewrite " in der Datei " .htaccess " vollständig. Aber was passiert, wenn sich zwischen Ihrem Server und dem Client ein Zwischenspeicherungsserver befindet? Es könnte dem Endbenutzer die falsche Version liefern. Aus diesem Grund sollte geprüft werden, ob " mod_headers " aktiviert ist, um den " Vary: Accept " - Header zu senden. Der Header " Vary " zeigt Cacheservern (wie Proxy-Servern) an, dass der Inhaltstyp des Dokuments von den Funktionen des Browsers abhängt, der das Dokument anfordert. Darüber hinaus wird die Antwort basierend auf dem Header " Accept " in der Anforderung generiert. Eine Anfrage mit einem anderen " Accept +" - Header kann eine andere Antwort erhalten. Dieser Header ist wichtig, da er verhindert, dass zwischengespeicherte WebP-Bilder an nicht unterstützende Browser gesendet werden:

/var/www/html/webp/.htaccess

...
<IfModule mod_headers.c>
 Header append Vary Accept env=REDIRECT_accept
</IfModule>

Setzen Sie am Ende der Datei "+ .htaccess " den MIME-Typ der Bilder " .webp " mit der Direktive " AddType " auf " image / webp +". Dies liefert die Bilder mit dem richtigen MIME-Typ:

/var/www/html/webp/.htaccess

...
AddType image/webp .webp

Dies ist die endgültige Version Ihrer + .htaccess-Datei:

/var/www/html/webp/.htaccess

<ifModule mod_rewrite.c>
 RewriteEngine On
 RewriteCond %{HTTP_ACCEPT} image/webp
 RewriteCond %{REQUEST_URI}  (?i)(.*)(\.jpe?g|\.png)$
 RewriteCond %{DOCUMENT_ROOT}%1.webp -f
 RewriteRule (?i)(.*)(\.jpe?g|\.png)$ %1\.webp [L,T=image/webp,R]
</IfModule>

<IfModule mod_headers.c>
 Header append Vary Accept env=REDIRECT_accept
</IfModule>

AddType image/webp .webp

Lassen Sie uns das, was wir in diesem Schritt getan haben, in die Praxis umsetzen. Wenn Sie die Anweisungen in den vorherigen Schritten befolgt haben, sollten Sie "+ logo.png" - und "+ logo.webp" -Bilder in "+ / var / www / html / webp" haben. Verwenden wir ein einfaches "+ <img> " - Tag, um " logo.png +" in unsere Webseite aufzunehmen. Erstellen Sie eine neue HTML-Datei, um das Setup zu testen:

nano /var/www/html/webp/img.html

Geben Sie den folgenden HTML-Code in die Datei ein:

/var/www/html/webp/img.html

<img src="logo.png" alt="Site Logo">

Speichern und schließen Sie die Datei.

Wenn Sie die Webseite mit Chrome besuchen, indem Sie "+ http: /// webp / img.html " aufrufen, werden Sie feststellen, dass das bereitgestellte Bild die " .webp " - Version ist (versuchen Sie, das Bild in einem neuen Tab zu öffnen). Wenn Sie Firefox verwenden, erhalten Sie automatisch ein " .png +" - Bild.

Fazit

In diesem Tutorial haben wir grundlegende Techniken für die Arbeit mit WebP-Bildern behandelt. Wir haben erklärt, wie man + cwebp + zum Konvertieren von Dateien verwendet, sowie zwei Optionen, um diese Bilder für Benutzer bereitzustellen: das + <picture> + - Element von HTML5 und das + mod_rewrite + von Apache.

Um die Skripte aus diesem Tutorial anzupassen, können Sie sich einige dieser Ressourcen ansehen:

  • Weitere Informationen zu den Funktionen des WebP-Formats und zur Verwendung der Konvertierungstools finden Sie in der WebP documentation.

  • Weitere Informationen zur Verwendung des Elements + <picture> + finden Sie unter documentation on MDN.

  • Informationen zur Verwendung von "+ mod_rewrite +" finden Sie unter documentation.

Durch die Verwendung des WebP-Formats für Ihre Bilder wird die Dateigröße erheblich reduziert. Dies kann die Bandbreitennutzung verringern und das Laden von Seiten beschleunigen, insbesondere wenn Ihre Website viele Bilder verwendet.

Related