Parce que l'hébergeur du blog est situé à l'étranger, bien qu'il utilise le CN2 GIA classique, la vitesse est bien plus rapide que l'hébergeur VPS placé dans une salle informatique américaine ordinaire. Cependant, rédiger des articles nécessite d'insérer un grand nombre d'images, et WordPress en a installé beaucoup. Les plug-ins (voir : Résumé des plug-ins WordPress pour creuser des sites) amènent le navigateur à effectuer un très grand nombre de requêtes pour accéder à la page.
S'il s'agit d'un VPS national, tel que Tencent Cloud, Alibaba Cloud, etc., il présente déjà un avantage en termes de vitesse, donc tant que vous êtes prêt à dépenser de l'argent pour augmenter la bande passante de l'hôte, la vitesse d'accès domestique est toujours garanti. Les salles informatiques hôtes de VPS étrangers offrent une très large bande passante, mais les lignes sont sujettes à des encombrements pendant les heures de pointe d'Internet la nuit, ce qui peut affecter l'expérience du site Web.
Par conséquent, si votre hébergeur est situé à l'étranger comme Dizhanfou et qu'il y a beaucoup d'images de pages Web, JS, CSS et autres fichiers, vous devriez essayer de l'optimiser, comme en réduisant les requêtes, en compressant les images, en fusionnant JS et CSS, en compressant les pages html, etc. Cet article vise principalement à partager l'expérience de l'optimisation d'image : réglage du format d'image webp du site Web et expérience de l'effet d'accélération.
Pour plus d’expérience et de conseils sur l’optimisation de sites Web, veuillez consulter :
- Principales technologies d'application et fonctionnalités de support des blogs - résumé des méthodes d'optimisation des sites Web et des serveurs
- L'espace DirectAdmin permet l'accélération d'OpCache et du cache Redis - WP active le cache Redis
- Cloudflare bloque automatiquement les adresses IP malveillantes sur le pare-feu et passe automatiquement à un script de bouclier de 5 secondes pour empêcher les attaques CC
PS : Mis à jour le 3 septembre 2019, le format WebP convient aux sites Web d'images et aux albums photo. Voici deux programmes adaptés aux particuliers pour créer des albums photo : ImgURL Pro et Chevereto.
PS : mis à jour le 29 septembre 2019 Le composant Nginx PageSpeed développé par Google peut réaliser un ensemble complet d'optimisation d'image tel que la conversion automatique de webP et l'adaptation automatique aux requêtes du navigateur Référence : serveur PageSpeed . artefact d'optimisation-Nginx déploie le module ngx_pagespeed et une expérience d'effet accélérée.
1. Quels sont les avantages et les inconvénients des images WebP ?
1.1 Maximiser la compression de l'image
S'il n'y a pas beaucoup de place pour l'optimisation des images aux formats JPEG, PNG et GIF, les images WebP après compression sans perte sont 26 % plus petites que les images WebP après compression avec perte, comparées à des indicateurs de qualité équivalents. de 25% à 34%.
Sur l'image ci-dessous, nous pouvons voir que webp lossy peut compresser un PNG de plus de 40 Ko à moins de 10 Ko et garantit la qualité de l'image - elle est indiscernable à l'œil nu. Pour plus de détails sur les effets d'accélération du navigateur de PNG et Webp, veuillez consulter : https://isparta.github.io/compare-webp/index.html. (Cliquez pour agrandir )
WebP prend également en charge la conversion d'images GIF. En d'autres termes, la taille des images animées au format webp sera plus petite. Comparaison : https://isparta.github.io/compare-webp/index_a.html#12, comme indiqué ci-dessous :
1.2 Certains anciens navigateurs ne sont pas compatibles
Le plus gros défaut des images Webp est que certains anciens navigateurs ne les prennent pas en charge, comme diverses versions d'IE, IOS Safari, etc. Mais ne vous inquiétez pas, c'est une tendance majeure que les images au format Webp soient prises en charge par les principaux navigateurs. l'avenir Pour plus de détails sur la compatibilité du navigateur Webp, : https://caniuse.com/#search=webp (cliquez pour agrandir)
PS : mis à jour le 16 septembre 2019 Nous pouvons utiliser le code PHP et les règles de réécriture de Nginx pour laisser le serveur décider d'afficher ou non les images webP en fonction du navigateur du client : le site Web autorise les images au format WebP - PHP et Nginx convertir les formats WebP et les navigateurs adaptatifs.
2. Convertir webp localement
PS : mis à jour le 6 février 2020 Pour les logiciels qui convertissent des images et des vidéos par lots, vous pouvez également essayer le logiciel open source et gratuit FFmpeg : logiciel gratuit et open source de conversion et de compression de formats vidéo et audio FFmpeg- conversion de format rapide et compresser la vidéo.
Le moyen le plus pratique pour un site Web d'utiliser des images au format Webp n'est pas de les générer localement, mais de convertir directement les images au format GIF, PNG, JPG et autres formats en images au format WebP en ligne. Ces sites Web incluent :
- HTTPS://Web P-converter.com/
- HTTPS://EZ gif.com/jpg-to-Web P
- HTTPS://wuwuwu.A convert.com/ talent /image/
- HTTPS:// cartographie.IsuX.US/
La conversion en ligne d'images WebP convient aux petites quantités d'images. Si vous devez convertir un grand nombre d'images au format WebP, vous pouvez télécharger un logiciel de conversion de format WebP, tel que : XnConvert, iSparta, etc., et effectuer une conversion par lots. images au format webp directement sur votre ordinateur.
- HTTP://I Sparta.GitHub.IO/
- HTTPS://wuwuwu.New Yearview.com/En/New Yearconvert/
3. Conversion de Linux en webp
3.1 Installation de l'outil Webp
Versions majeures de Webp :
- HTTPS://storage.Google APIs.com/downloads.Webcom project.org/releases/Web P/index.HTML
Commande d'installation rapide d'installation WebP :
#debian install webp sudo apt-get install webp
Commandes de compilation et d'installation du code source WebP :
# 安装编译器以及依赖包 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
Vérifiez que webp est installé avec succès. Saisissez cwebp dans le terminal et le résultat suivant s'affiche, indiquant que l'installation a réussi :
[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.
Après une installation réussie, on dispose principalement des outils de commande suivants :
cwebp→ outil d'encodage WebP
dwebp→ outil de décodage WebP
vwebp→ Visionneuse de fichiers WebP
webpmux→ outil de multiplexage WebP
gif2webp→ Outil de conversion d'images GIF en WebP
3.2 Utilisation des commandes
JPG, PNG -> WebP
Utilisez cwebp pour convertir les images JPG et PNG au format webp.
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
Utilisez imagemagick pour convertir png en jpg.
# convert from png to jpg by imagemagic convert wzfou.com.png wzfou.com.jpg
Vous pouvez également définir le taux de qualité de compression, la méthode, etc. :
convert recaptcha_11.png -quality 50 -define webp:lossless=false,method=6,auto-filter=true,partitions=3 recaptcha_11.webp
3.3 Convertir Webp par lots
Utilisez la commande find pour convertir toutes les images jpg et png du répertoire spécifié en images au format webp. La commande est la suivante :
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"' _ {} ; Convertissez automatiquement les images Webp par lots. Ici, vous devez utiliser les tâches planifiées Linux. Si vous ne savez pas comment utiliser les tâches planifiées, vous pouvez d'abord apprendre : La syntaxe de base et le didacticiel de fonctionnement des tâches planifiées de la commande Linux Crontab. Créez le fichier : webp2jpg.sh, et collez le code suivant :
# 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
doneAssurez-vous que le fichier shell dispose de l'autorisation d'exécution, puis vous pourrez exécuter webp2jpg.sh pour convertir l'image.
4. CDN active WebP
4.1 Activer à nouveau Webp sur Cloud
Si vous n'avez pas utilisé Youpaiyun CDN, vous pouvez vous référer à : la mise en miroir en un clic de Youpaiyun CDN, le CDN dynamique statique et le SSL gratuit. L'activation de webp dans Youpaiyun est très simple. Activez simplement webp adaptatif Lorsque le navigateur prend en charge les images au format webp, Youpaiyun WebP reviendra automatiquement au format webp, ce qui est très bien. (Cliquez pour agrandir)
4.2 Baidu Cloud CDN active Webp
Baidu Cloud n'a pas de fonction webp adaptative, vous devez utiliser le traitement d'image pour y parvenir. Ajoutez : @f_webp après l'image pour la transférer directement au format webp pour la navigation. Par exemple : 
.
L'effet de Baidu Cloud CDN Webp est le suivant :
Le plug-in WordPress webp WebP Express prend en charge diverses méthodes de conversion d'images. Par exemple, vous pouvez appeler : cwebp, gd, imagick sur le VPS local. pour convertir, ou vous pouvez utiliser l'API du service de conversion Webp en ligne pour implémenter la conversion d'image.
6. Résumé
Le plus grand avantage du format webp pour les images de sites Web est qu'il compresse considérablement la taille des images. Surtout si la page Web contient un grand nombre d'images, l'effet d'accélération de l'accès sera très évident. De plus, pour les grands sites Web, l’activation des images au format Webp permettra de réduire les coûts de trafic.
Le problème avec le format webp des images de sites Web est que les anciens navigateurs ne le prennent pas en charge. De plus, le logiciel de navigation au format webp ne le prend pas entièrement en charge. Certains étudiants peuvent télécharger des images webp localement et constater que les images couramment utilisées peuvent être ouvertes. Ce sont tous des sites Web à prendre en compte par les concepteurs.