Nous avons déjà fait quelques articles sur l'optimisation d'image jpegoptim, jpegtran, optipng, pngcrush et ImageMagick. Aujourd'hui, nous voulons décrire l'optimisation d'image avec webp.
La minification et la compression sont depuis longtemps devenues des éléments assez courants pour optimiser le code d'une page Web. Toutes les ressources Web populaires optimisent les images, utilisent le même CSS chaque fois que possible et choisissent les bons formats d'image. Mais ce n'est pas assez. Les statistiques HTTP Archive montrent que les images occupent environ 64% de la taille d'une page Web. La nouvelle norme WebP vient aider à remplacer JPEG et PNG.
En bref sur WebP
Le format est apparu en 2010 et a depuis été développé par Google. WebP est basé sur l'algorithme de compression des images clés du codec vidéo VP8, avec ou sans perte, et est conditionné dans un conteneur basé sur RIFF. Les images WebP sans perte sont en moyenne 26 % plus petites que les images PNG, et les images WebP avec perte sont 25 à 34 % plus petites que les images JPEG avec le même indice SSIM. Le nouveau format prend également en charge la transparence (connue sous le nom de canal alpha).
Principe de fonctionnement
Dans la compression avec perte, WebP utilise un codage prédictif, dans lequel les valeurs des blocs de pixels voisins sont utilisées pour prédire la valeur du bloc de pixels souhaité, puis la différence est codée.
La compression sans perte utilise des fragments bien connus de l'image pour reconstruire avec précision les pixels. Une palette locale peut également être utilisée s'il n'y a pas d'algorithme de correspondance qui vous intéresse.
Avantages et inconvénients
Derrière :
- une taille d'image plus petite ;
- algorithme de compression avancé ;
- haute qualité d'image ;
- soutien à la transparence
Contre :
- faible prévalence ;
- « Plasticité » en compression avec pertes ;
- les couleurs des pixels et autres graphiques informatiques peuvent être perdues.
WebP est déjà pris en charge dans Chrome, Opera et le navigateur Android standard, et avec l'aide de la bibliothèque WebPJS, il peut être affiché dans tous les navigateurs populaires (dans IE 6 et supérieur en utilisant Flash). De plus, une bibliothèque légère d'encodage et de décodage libwebp, des utilitaires en ligne de commande pour encoder et décoder WebP, ainsi que des outils pour visualiser, multiplexer et animer des images dans ce format ont été développés.
Installer cwebp
Cwebp a des binaires Linux pré-compilés. Ainsi, l'installation est simple à télécharger et à décompresser :
# wget https://storage.googleapis.com/downloads.webmproject.org/releases/webp/libwebp-1.0.3-linux-x86-64.tar.gz # tar zxf libwebp-1.0.3-linux-x86-64.tar.gz # cp -a libwebp-1.0.3-linux-x86-64/bin/cwebp /usr/bin/ # cp -a libwebp-1.0.3-linux-x86-64/bin/dwebp /usr/bin/
Utilisation de cwebp
L'utilitaire cwebp est utilisé pour convertir à partir de JPEG, PNG et TIFF, et dwebp est utilisé pour le décodage. La conversion est lancée par une simple commande (depuis le répertoire de l'utilitaire) :
# cwebp input.png -q 80 -o output.webp
Par le même principe, le décodage peut être lancé. Il existe de nombreuses options et paramètres supplémentaires, y compris pour vérifier l'encodage.
Déploiement WebP
Donc, vous étiez intéressé par le nouveau format, vous avez fait tous les tests, revu les statistiques et vous êtes assuré que Chrome est toujours le navigateur Web le plus populaire. Et ensuite ? Ensuite, vous devez faire une copie de toutes les images dans WebP (vous pouvez écrire un script simple pour convertir tous les fichiers), puis vérifier les utilisateurs du site et leur envoyer des images compactes, si leur navigateur prend en charge WebP.
Autrement dit, vous pouvez créer votre propre script qui vérifiera la prise en charge du format du navigateur du client, qui supprimera ensuite le serveur Web ou attribuera complètement cette tâche au serveur Web. La deuxième option nous semble plus logique.
Négociation à l'aide de l'en-tête Accepter
Les navigateurs transmettent l'en-tête Accepter comme :
dans Opéra :
Accept: text / html, application / xml; q = 0.9, application / xhtml + xml, image / png, image / webp, image / jpeg, image / gif, image / x-xbitmap, * / *; q = 0.1
dans Chrome :
Accept: image / webp, * / *; q = 0.8
Sachant cela, vous pouvez configurer le serveur Web pour qu'il transmette automatiquement WebP. À titre d'exemple, nous utilisons Nginx, dans le fichier de configuration duquel vous devez ajouter quelque chose comme ceci :
location / {
if ($http_accept ~* "webp") { set $webp_accept "true"; }
if (-f $request_filename.webp) { set $webp_local "true"; }
if ($webp_local = "true") {
add_header Vary Accept;
}
# if the client supports WebP, then upload the file
if ($webp_accept = "true") {
rewrite (.*) $1.webp break;
}
} La configuration d'Apache sera similaire. Si le support WebP n'est pas trouvé dans Accepter, les fichiers ordinaires sont transférés. Eh bien, si Nginx est utilisé comme proxy pour la mise en cache des statiques, la configuration sera différente :
server {
location / {
if ($http_accept ~* "webp") { set $webp T; }
proxy_cache_key $scheme$proxy_host$request_uri$webp;
proxy_pass http://backend;
proxy_cache my-cache;
}
} Conclusion
Le format d'image WebP réduira considérablement la taille de la page Web, mais compte tenu de sa prise en charge limitée, vous devez en outre configurer le serveur Web et contenir des copies de toutes les images dans plusieurs formats.