Da sich der Blog-Host im Ausland befindet, ist die Geschwindigkeit trotz der Verwendung des klassischen CN2-GIA viel schneller als die eines VPS-Hosts in einem gewöhnlichen amerikanischen Computerraum. Das Schreiben von Artikeln erfordert jedoch das Einfügen einer großen Anzahl von Bildern, und WordPress hat dies getan Viele installierte Plug-ins (siehe: Zusammenfassung der WordPress-Plug-ins für Grabungsseiten) führen dazu, dass der Browser sehr viele Anfragen zum Zugriff auf die Seite stellt.
Wenn es sich um einen inländischen VPS wie Tencent Cloud, Alibaba Cloud usw. handelt, hat er bereits einen Geschwindigkeitsvorteil. Solange Sie also bereit sind, Geld auszugeben, um die Bandbreite des Hosts zu erhöhen, ist die Geschwindigkeit des inländischen Zugriffs immer noch gleich garantiert. Ausländische VPS-Host-Computerräume bieten eine sehr große Bandbreite, aber während der nächtlichen Spitzenzeiten des Internets kann es zu Überlastungen der Leitungen kommen, was sich negativ auf das Website-Erlebnis auswirken kann.
Wenn sich Ihr Host im Ausland wie Dizhanfou befindet und es viele Webseitenbilder, JS, CSS und andere Dateien gibt, sollten Sie daher versuchen, ihn zu optimieren, z. B. Anfragen reduzieren, Bilder komprimieren, JS und CSS zusammenführen, HTML-Seiten komprimieren, usw. Dieser Artikel dient hauptsächlich dazu, die Erfahrungen mit der Bildoptimierung zu teilen: Einstellung des Website-WebP-Bildformats und Erfahrung mit Beschleunigungseffekten.
Weitere Erfahrungen und Tipps zur Website-Optimierung finden Sie hier:
- Wichtigste Anwendungstechnologien und unterstützende Funktionen von Blogs – Zusammenfassung der Methoden zur Website- und Serveroptimierung
- Der DirectAdmin-Speicherplatz ermöglicht OpCache und Redis-Cache-Beschleunigung – WP aktiviert Redis-Cache
- Cloudflare blockiert automatisch bösartige IPs an der Firewall und schaltet automatisch auf ein 5-Sekunden-Schutzskript um, um CC-Angriffe zu verhindern
PS: Aktualisiert am 3. September 2019, das WebP-Format eignet sich für Bildwebsites und Fotoalben. Hier sind zwei Programme, die für Einzelpersonen zum Erstellen von Fotoalben geeignet sind: ImgURL Pro und Chevereto.
PS: Aktualisiert am 29. September 2019 Die von Google entwickelte Nginx PageSpeed-Komponente kann einen vollständigen Satz von Bildoptimierungen realisieren, z. B. die automatische Konvertierung von webP und die automatische Anpassung an Browseranforderungen. Referenz: PageSpeed-Server Optimierungsartefakt-Nginx stellt das ngx_pagespeed-Modul und ein beschleunigtes Effekterlebnis bereit.
1. Was sind die Vor- und Nachteile von WebP-Bildern?
1.1 Bildkomprimierung maximieren
Wenn bei Bildern im JPEG-, PNG- und GIF-Format nicht viel Spielraum für die Optimierung besteht, sind WebP-Bilder nach verlustfreier Komprimierung um 26 % kleiner als WebP-Bilder nach verlustbehafteter Komprimierung. Die Größe von JPEG-Bildern wird reduziert um 25 % bis 34 %.
Aus dem Bild unten können wir ersehen, dass webp verlustbehaftet ein PNG mit mehr als 40 KB auf weniger als 10 KB komprimieren kann und die Qualität des Bildes gewährleistet – es ist mit bloßem Auge nicht zu unterscheiden. Einzelheiten zu den Browserbeschleunigungseffekten von PNG und Webp finden Sie unter: https://isparta.github.io/compare-webp/index.html. (Klicken um zu vergrößern )
WebP unterstützt auch die GIF-Bildkonvertierung. Mit anderen Worten, die Größe animierter Bilder im WebP-Format wird kleiner sein: https://isparta.github.io/compare-webp/index_a.html#12, wie unten gezeigt:
1.2 Einige alte Browser sind nicht kompatibel
Der größte Nachteil von WebP-Bildern besteht darin, dass einige alte Browser sie nicht unterstützen, z. B. verschiedene Versionen von IE, IOS Safari usw. Aber keine Sorge, es ist ein großer Trend, dass Bilder im WebP-Format von den wichtigsten Browsern unterstützt werden Die Zukunft. Einzelheiten zur WebP-Browserkompatibilität finden Sie unter: https://caniuse.com/#search=webp (zum Vergrößern klicken)
PS: Aktualisiert am 16. September 2019, Wir können PHP-Code und Nginx-Rewrite-Regeln verwenden, um den Server entscheiden zu lassen, ob webP-Bilder basierend auf dem Browser des Clients angezeigt werden sollen: Die Website ermöglicht Bilder im WebP-Format – PHP und Nginx Konvertieren Sie WebP-Formate und adaptive Browser.
2. Webp lokal konvertieren
PS: Aktualisiert am 6. Februar 2020, Für Software, die Bilder und Videos in Stapeln konvertiert, können Sie auch das Open-Source- und kostenlose FFmpeg ausprobieren: kostenlose und Open-Source-Software zur Konvertierung und Komprimierung von Video- und Audioformaten FFmpeg- Schnelle Formatkonvertierung und Komprimierung von Videos.
Der bequemste Weg für eine Website, Bilder im Webp-Format zu verwenden, besteht nicht darin, sie lokal zu generieren, sondern Bilder in GIF-, PNG-, JPG- und anderen Formaten direkt online in Bilder im Webp-Format zu konvertieren. Zu diesen Websites gehören:
- HTTPS://Web P-converter.com/
- HTTPS://EZ gif.com/jpg-to-Web P
- HTTPS://wuwuwu.A konvertieren.com/talent/image/
- HTTPS://cartography.IsuX.US/
Die Online-Konvertierung von WebP-Bildern eignet sich für kleine Bildmengen. Wenn Sie eine große Anzahl von Bildern in das WebP-Format konvertieren müssen, können Sie eine WebP-Format-Konvertierungssoftware wie XnConvert, iSparta usw. herunterladen und eine Stapelkonvertierung durchführen Bilder direkt auf Ihrem Computer in das Webp-Format umwandeln.
- HTTP://I Sparta.GitHub.IO/
- HTTPS://wuwuwu.New Yearview.com/En/New Yearconvert/
3. Linux-Konvertierung zu WebP
3.1 Webp-Tool-Installation
Webp-Hauptversionen:
- HTTPS://storage.Google APIs.com/downloads.Webcom project.org/releases/Web P/index.HTML
Schnellinstallationsbefehl für die WebP-Installation:
#debian install webp sudo apt-get install webp
Befehle zur Kompilierung und Installation des WebP-Quellcodes:
# 安装编译器以及依赖包 yum install -y gcc make autoconf automake libtool libjpeg-devel libpng-devel # 请到官网下载最新版本 wget https://storage.googleapis.com/downloads.webmproject.org/releases/webp/libwebp-0.6.0.tar.gz # 解压 tar -zxvf libwebp-0.6.0.tar.gz # 进入目录 cd libwebp-0.6.0 # 源代码安装环境检查 ./configure # 编译 make # 安装 make install
Stellen Sie sicher, dass webp erfolgreich installiert wurde. Geben Sie cwebp in das Terminal ein und die folgende Ausgabe wird angezeigt, die anzeigt, dass die Installation erfolgreich war:
[root@linux-server]# cwebp Usage: cwebp [options] -q quality input.png -o output.webp where quality is between 0 (poor) to 100 (very good). Typical value is around 80. Try -longhelp for an exhaustive list of advanced options.
Nach erfolgreicher Installation gibt es hauptsächlich die folgenden Befehlstools:
cwebp→ WebP-Encoder-Tool
dwebp→ WebP-Decoder-Tool
vwebp→ WebP-Dateibetrachter
webpmux→ WebP-Muxing-Tool
gif2webp→ Tool zum Konvertieren von GIF-Bildern in WebP
3.2 -Befehlsverwendung
JPG, PNG -> WebP
Verwenden Sie cwebp, um JPG- und PNG-Bilder in das Webp-Format zu konvertieren.
cwebp filename -o filename cwebp -q 50 /wzfou.com/wp-content/uploads/2019/07/da-wenti_06.jpg -o /wzfou.com/wp-content/uploads/2019/07/da-wenti_06.jpg.webp
Verwenden Sie imagemagick, um PNG in JPG zu konvertieren.
# convert from png to jpg by imagemagic convert wzfou.com.png wzfou.com.jpg
Sie können auch das Komprimierungsqualitätsverhältnis, die Methode usw. festlegen:
convert recaptcha_11.png -quality 50 -define webp:lossless=false,method=6,auto-filter=true,partitions=3 recaptcha_11.webp
3.3 Webp stapelweise konvertieren
Verwenden Sie den Befehl „find“, um alle JPG- und PNG-Bilder im angegebenen Verzeichnis in Bilder im Webp-Format zu konvertieren. Der Befehl lautet wie folgt:
find ./ -name "*.jpg" -exec cwebp -q 50 {} -o {}.webp ;
find ./ -name "*.png" -exec cwebp -q 50 {} -o {}.webp ;
#或者
find . -name "*.png" | parallel -eta cwebp {} -o {.}.webp
find ./ -type f -name '*.png' | xargs -P 8 -I {} sh -c 'cwebp -q 75 $1 -o "${1%.png}.webp"' _ {} ; Webp-Bilder automatisch stapelweise konvertieren. Hier müssen Sie geplante Linux-Aufgaben verwenden. Wenn Sie nicht wissen, wie Sie geplante Aufgaben verwenden, können Sie zunächst Folgendes lernen: Grundlegende Syntax- und Bedienungsanleitung für geplante Linux-Befehle. Erstellen Sie die Datei: webp2jpg.sh, und fügen Sie den folgenden Code ein:
# webp2jpg.sh
#!/bin/bash
for file in `ls`
do
len=`xxd -p -l 4 $file`
if [ $len == "52494646" ]; then
echo "$file is webp"
if [ ! -e $file.jpg ]; then
echo "===== convert $file ====="
dwebp $file -o $file.png
convert "$file.png" "$file.jpg"
rm $file.png
fi
fi
doneStellen Sie sicher, dass die Shell-Datei über Ausführungsberechtigungen verfügt. Anschließend können Sie webp2jpg.sh ausführen, um das Bild zu konvertieren.
4. CDN aktiviert WebP
4.1 Aktivieren Sie Webp erneut in der Cloud
Wenn Sie Youpaiyun CDN noch nicht verwendet haben, können Sie sich auf Folgendes beziehen: One-Click-Spiegelung von Youpaiyun CDN, statisches dynamisches CDN und kostenloses SSL. Die Aktivierung von WebP in Youpaiyun ist sehr einfach. Wenn der Browser Bilder im WebP-Format unterstützt, kehrt Youpaiyun WebP automatisch zum WebP-Format zurück, was sehr gut ist. (Klicken um zu vergrößern)
4.2 Baidu Cloud CDN aktiviert Webp
Baidu Cloud verfügt nicht über eine adaptive WebP-Funktion. Sie müssen die Bildverarbeitung verwenden, um dies zu erreichen. Fügen Sie nach dem Bild Folgendes hinzu: @f_webp, um es zum Durchsuchen direkt in das WebP-Format zu konvertieren. Beispiel: 
.
Die Wirkung von Baidu Cloud CDN Webp ist wie folgt:
Das WordPress-WebP-Plugin WebP Express unterstützt eine Vielzahl von Bildkonvertierungsmethoden. Sie können beispielsweise Folgendes aufrufen: cwebp, gd, imagick auf dem lokalen VPS zum Konvertieren, oder Sie können die Online-Webp-Konvertierungsdienst-API verwenden, um die Bildkonvertierung zu implementieren.
6. Zusammenfassung
Der größte Vorteil des WebP-Formats für Website-Bilder besteht darin, dass es die Größe der Bilder stark komprimiert. Insbesondere wenn die Webseite eine große Anzahl von Bildern enthält, ist der Effekt der Beschleunigung des Zugriffs sehr offensichtlich. Darüber hinaus werden bei großen Websites durch die Aktivierung von Bildern im Webp-Format Traffic-Kosten eingespart.
Das Schlechte am WebP-Format von Website-Bildern ist, dass es von alten Browsern nicht vollständig unterstützt wird. Einige Schüler laden möglicherweise WebP-Bilder lokal herunter und stellen fest, dass häufig verwendete Bilder geöffnet werden . Dies sind alles Websites, die Designer berücksichtigen sollten.