webp : l’avenir de la compression des images

Retrouvez les actualités de Vincent Guesné | Veille techno sécurisée, passionné et presque pas chiant

Optimiser les pages grâce a WEBP

webp : l’avenir de la compression des images

L’optimisation des pages WEB est devenue primordial pour le confort de l’utilisateur. Il semblerait même que ce soit un critère de référencement “ranking factors”. Il est donc important de se pencher sur les moyens d’optimiser ses pages web. Dans cet article, je vais te parler de format WebP (Lien wikipedia : ici ou officiel google : )

Ce format développé par Google à pour objectif de réduire la taille des images entre 25% et 35% sans perte de qualité.

Inconvénients et Avantages

Les trois inconvénients que je pourrais noter sont :

  • Multiplication des images sur le serveur et donc de la place utilisée
  • Le support de ce format : seul quelques navigateurs le supportent actuellement
  • La conversion des images (jpg/png…) à faire soit même.

L’avantage principale :

  • Le chargement de la page qui est vraiment amélioré
  • Par conséquent, le poids de la page lui est aussi réduit
  • SEO et confort utilisateur.

Ca n’en vaut pas la chandelle ? 🙂

Selon le site : Caniuse.com, voici les navigateurs qui acceptent ce format :

Navigateurs qui supportent webp

Conversion des images au format WebP

Il existe des outils en lignes pour convertir des images au format WebP comme (ici ,  ou encore par-là), ils font tous plus/moins la même chose. Il y aussi des plugins photoshop comme : ici

Perso, j’ai préféré la méthode “ligne de commande – direct sur le serveur“. J’ai pu convertir toutes mes images en une commande.

libWebp : la librairie pour traiter ce format

Google a mis en ligne la librairie libWebp, qui contient les binaires (cwebp : pour convertir jpg/png vers webp et dwebp pour decompresser webp vers jpg/png)

Pour tester, j’ai compilé moi-même les sources, à l’heure actuelle la version 0.5.1 est la dernière. Il est nécessaire d’avoir les libraires de traitement d’image d’installé sur son serveur :

sudo apt-get install libjpeg-dev libpng-dev libtiff-dev libgif-dev

Ensuite :

cd tmp/

wget https://storage.googleapis.com/downloads.webmproject.org/releases/webp/libwebp-0.5.1.tar.gz

tar xvzf libwebp-0.5.1.tar.gz

cd libwebp-0.5.1

./configure

make

sudo make install

Te voici avec cwebp et dwebp installé.

Si comme moi, tu rencontres une erreur : cwebp: error while loading shared libraries en utilisant cwebp

un petit :

sudo ldconfig /usr/local/lib/

devrait résoudre le soucis 😉
Te voici donc avec les exécutables installés sur ta machine.

Conversion d’images en masse/récursif en webP

L’idée est donc de pouvoir convertir toutes les images de mon site/prestashop/wordpress pour pouvoir les servir au client. Il est nécessaire d’avoir les deux formats accessible en cas d’incompatibilité du navigateur.

Installation de “parallel” (Comme son nom l’indique, il va permettre de lancer des tâches en parallèle) 😛

apt-get install parallel

Ensuite, on lance cette commande ou se trouve tout nos images, ou dossier racine. Je préfère, personnellement le faire sur une copie dans /tmp/ pour être sur du résultat 😉

find . -name "*.jpg" | parallel -eta cwebp {} -o {.}.webp

Cette commande, va donc recherche tous les fichier “jpg” (à remplacer selon le format de base des images). Ensuite, la sortie est passé à parallel pour qu’il lance cwebp qui s’occupe de convertir chaque image en gardant le nom (et l’image d’origine).

Résultat : Toutes les images sont bien converties au même endroit que celle d’origine.

Nginx : Servir les images en WebP si le navigateur les supportent

Maintenant, que l’on a converti nos images en webP. Il va falloir ajouter à nginx la gestion de ce format.

Le principe est simple : Ajout de ce format dans les mime.types et servir les images si le navigateur client les supportent.

Ajout du format Webp :

on modifie mime.type :

sudo vim /etc/nginx/mime.type

et on ajoute :

image/webp   web;

Réécriture du chemin pour servir le nouveau format :

Il faut ajouter cette directive, en modifiant le chemin vers les images/site dans le block server.

location ~ ^(/PATH/TO/YOUR/IMAGES/.+)\.(jpe?g|png)$ {

if ( $http_accept ~* webp ) {

        set $webp "A";

    }

    if ( $request_filename ~ (.+)\.(png|jpe?g)$ ) {

        set $file_without_ext $1;

    }

    if ( -f $file_without_ext.webp ) {

        set $webp "${webp}E";

    }

  expires         1M;

    add_header      Cache-Conrol "public";

   add_header vary accept-encoding;

 if ( $webp = AE ) {

 rewrite ^(.+)\.(png|jpe?g)$ $1.webp break;

    } 

}

Ensuite, si tu tapes le chemin de l’image jpeg dans le navigateur. On peut voir

“Content-Type: image/webp” dans la response headers de l’image.

Pour les autres server web (apache/IIS) voir ici : Blog KeyCDN

Résultats : Gain de temps et poids de page

Voici les résultats issue de GtMetrix, on peut observer une réduction du poids de la page diviser par 3.

Test avec ou sans webp optimisation

 

On passe de 3.25 Mo à 1.02 Mo rien qu’avec ce format et on gagne 1.6 secondes de chargement de page, ce qui est loin d’être négligeable, surtout pour une boutique prestashop 😉

Alors convaincu ? Moi oui 😀

 

 

No Comments

Add your comment