CONTACT

Comment convertir des images WebP pour accélérer votre site Web

WebP est un format d'image ouvert développé par Google en 2010 basé sur le format vidéo VP8. Depuis lors, le nombre de sites Web et d'applications mobiles utilisant le format WebP a augmenté considérablement.

Google Chrome et Opera prennent tous deux en charge le format WebP de manière native, et puisque ces navigateurs représentent environ 74% du trafic Web, les utilisateurs peuvent accéder plus rapidement aux sites Web si ces sites utilisent des images WebP. Depuis peu la version 65 de Firefox supporte enfin le format WebP.

Le format WebP prend en charge la compression d'image avec et sans perte, y compris l'animation. Son principal avantage par rapport aux autres formats d'image utilisés sur le Web est sa taille de fichier beaucoup plus petite, ce qui accélère le chargement des pages Web et réduit l'utilisation de la bande passante. L'utilisation d'images WebP peut entraîner une augmentation considérable de la vitesse des pages. Si votre application ou votre site Web rencontre des problèmes de performances ou une augmentation du trafic, la conversion de vos images peut aider à optimiser les performances des pages.

Dans ce tuto, vous allez utiliser l'outil de ligne de commande cwebp pour convertir des images au format WebP, en créant des scripts qui convertiront des images dans un répertoire spécifique.

Enfin, vous allez explorer également deux façons de diffuser des images WebP à vos visiteurs.

A noter un point assez important de nos jours (Greta Inside), qui dit économie de place et rapidité à servir dit un geste Ecologique. En effet, rien ne sert de servir des images démentes sauf cas précis comme les photographes par exemple. Et encore avec ce format d'images WebP cela reste totalement convaincant. A vous de voir !

 

Pré-Requis

Travailler avec des images WebP ne nécessite pas de distribution particulière, mais nous vous montrerons comment travailler avec les logiciels appropriés sur Ubuntu 16.04 et CentOS 7. Pour suivre ce tuto, vous allez avoir besoin de:

  • Un serveur configuré avec un utilisateur sudo non root.
  • Apache installé sur votre serveur.
  • mod_rewrite installé sur votre serveur.

 

Installation de cwebp et préparation du répertoire d'images

Dans cette section, nous allons installer un logiciel pour convertir des images et créer un répertoire avec des images test.

Sur Ubuntu 16.04, vous pouvez installer cwebp, un utilitaire qui compresse les images au format .webp, en tapant:

sudo apt-get update
sudo apt-get install webp

Sur CentOS 7, tapez:

sudo yum install libwebp-tools

Pour créer un nouveau répertoire d'images appelé webp dans la racine Web Apache (situé par défaut dans / var / www / html), tapez:

sudo mkdir / var / www / html / webp

Changez la propriété de ce répertoire par votre nom d'utilisateur non root : "jul" ici:

sudo chown jul: / var / www / html / webp

Pour tester les commandes, vous pouvez télécharger des images JPEG et PNG gratuites à l'aide de wget. Cet outil est installé par défaut sur Ubuntu 16.04; si vous utilisez CentOS 7, vous pouvez l'installer en tapant:

sudo yum install wget

Ensuite, téléchargez les images de test à l'aide des commandes suivantes:

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

Remarque: Ces images sont disponibles pour utilisation et redistribution sous la licence Creative Commons Attribution-ShareAlike.

La plupart de votre travail à l'étape suivante se trouvera dans le répertoire / var / www / html / webp, dans lequel vous pouvez vous déplacer en tapant:

cd /var/www/html/webp

Avec les images de test en place et le serveur Web Apache, mod_rewrite et cwebp installés, vous êtes prêt à passer à la conversion des images.

Test de compression et conversion des images en WebP avec CwebP

La diffusion d'images .webp aux visiteurs du site nécessite forcement des versions .webp des fichiers image. Dans cette étape, vous allez convertir les images JPEG et PNG au format .webp en utilisant cwebp. La syntaxe de la commande ressemble à ceci:

cwebp image.jpg -o image.webp

L'option -o spécifie le chemin d'accès au fichier WebP.

Puisque vous êtes toujours dans le répertoire / var / www / html / webp, vous pouvez exécuter la commande suivante pour convertir image1.jpg en image1.webp et image2.jpg en image2.webp:

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

La définition du facteur de qualité -q à 100 conserve 100% de la qualité de l'image; s'il n'est pas spécifié, la valeur par défaut est 75.

Ensuite, inspectez la taille des images JPEG et WebP à l'aide de la commande ls - . L'option -l affichera le format de liste longue, qui inclut la taille du fichier, et l'option -h s'assurera que ls imprime des tailles lisibles par l'homme:

ls -lh image1.jpg image1.webp image2.jpg image2.webp


Sortie
-rw-r--r-- 1 jul jul 7.4M Jan 18 09:08 image1.jpg
-rw-r--r-- 1 jul jul 3.9M Jan 18 16:46 image1.webp
-rw-r--r-- 1 jul jul 16M Jan 18 13:21 image2.jpg
-rw-r--r-- 1 jul jul 7.0M Jan 18 16:59 image2.webp

La commande ls montre que la taille de image1.jpg est de 7,4M, tandis que la taille de image1.webp est de 3,9M. Il en va de même pour image2.jpg (16M) et image2.webp (7M). Ces fichiers ont presque la moitié de leur taille d'origine!

Pour enregistrer les données complètes et originales des images pendant la compression, vous pouvez utiliser l'option -lossless à la place de -q. Il s'agit de la meilleure option pour maintenir la qualité des images PNG. Pour convertir l'image PNG téléchargée à partir de l'étape 1, tapez:

 cwebp -lossless logo.png -o logo.webp

La commande suivante montre que la taille d'image WebP sans perte (60 Ko) est environ la moitié de la taille de l'image PNG d'origine (116 Ko):

 ls -lh logo.png logo.webp
Sortie
-rw-r--r-- 1 jul jul 116K Jan 18 16:11 logo.png
-rw-r--r-- 1 jul jul 60K Jan 18 16:42 logo.webp

Les images WebP converties dans le répertoire / var / www / html / webp sont environ 50% plus petites que leurs homologues JPEG et PNG. En pratique, les taux de compression peuvent différer en fonction de certains facteurs: le taux de compression de l'image d'origine, le format de fichier, le type de conversion (avec ou sans perte), le pourcentage de qualité et votre système d'exploitation. Lorsque vous convertissez plus d'images, vous pouvez constater des variations des taux de conversion liés à ces facteurs.

Conversion d'images JPEG et PNG dans un répertoire

Il suffira d'écrire un script pour simplifier le processus de conversion des images au format WebP. On part sur l'idée de convertir un lot d'image JPG à 90% de qualité, tout en convertissant également les fichiers PNG en images WebP sans perte.

Utilisez donc votre éditeur favori, pour ma part ca sera VI (la vielle école) pour créer un script webp-convert.sh dans votre home.

 cd

 vi webp-convert.sh

La première ligne de votre script sera :

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

la ligne comprend les éléments suivants:

find: Cette commande recherchera les fichiers dans un répertoire spécifié.
$1: ce paramètre positionnel spécifie le chemin du répertoire images, extrait de la ligne de commande. En fin de compte, cela rend l'emplacement du répertoire moins dépendant de l'emplacement du script.
-type f: cette option indique à find de rechercher uniquement les fichiers normaux.
-iname: ce test compare les noms de fichiers à un modèle spécifié. Le test -iname insensible à la casse indique à find de rechercher tout nom de fichier se terminant par .jpg (* .jpg) ou .jpeg (* .jpeg).
-o: cet opérateur logique demande à la commande find de répertorier les fichiers qui correspondent au premier test -iname (-iname "* .jpg") ou au second (-iname "* .jpeg").
(): Des parenthèses autour de ces tests, ainsi que l'opérateur -and, garantissent que le premier test (c'est-à-dire -type f) est toujours exécuté.

La deuxième ligne du script convertira les images en WebP à l'aide du paramètre -exec. La syntaxe générale de ce paramètre est la commande -exec {} \ ;. La chaîne {} est remplacée par chaque fichier parcouru par la commande, tandis que le; indique à find où se termine la commande:

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

-exec bash -c 'commands' {} \;

Dans ce cas, le paramètre -exec nécessitera plusieurs commandes pour rechercher et convertir des images:

bash: Cette commande exécutera un petit script qui créera la version .webp du fichier s'il n'existe pas. Ce script sera transmis à bash sous forme de chaîne grâce à l'option -c.
'commandes': cet espace réservé est le script qui fera les versions .webp de vos fichiers.
Le script à l'intérieur des «commandes» fera les choses suivantes:

Créez une variable webp_path.
Testez si la version .webp du fichier existe ou non.
Créez le fichier s'il n'existe pas.
Le petit script ressemble à ceci:

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

 if [ ! -f "$webp_path" ]; then 

cwebp -quiet -q 90 "$0" -o "$webp_path";

 fi;

Les éléments de ce petit script incluent:

webp_path: Cette variable sera générée en utilisant sed et le nom de fichier correspondant de la commande bash, indiqué par le paramètre positionnel $ 0. Une chaîne ici (<<<) passera ce nom à sed.
si [ ! -f "$ webp_path"]: Ce test établira si un fichier nommé "$ webp_path" existe déjà, en utilisant l'opérateur logique not (!).
cwebp: Cette commande créera le fichier s’il n’existe pas, en utilisant l’option -q pour ne pas imprimer la sortie.

Avec ce petit script à la place de l'espace réservé «commandes», le script complet pour convertir les images JPEG ressemblera maintenant à ceci:

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

Pour convertir des images PNG en WebP, nous adopterons la même approche, avec deux différences: Premièrement, le motif -iname dans la commande find sera "* .png". Deuxièmement, la commande de conversion utilisera l'option -lossless au lieu de l'option -q de qualité.

Le script terminé ressemble à ceci:

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

Enregistrez le fichier et quittez l'éditeur.

Ensuite, mettons le script webp-convert.sh en pratique en utilisant les fichiers du répertoire / var / www / html / webp. Assurez-vous que le fichier de script est exécutable en exécutant la commande suivante:

chmod a+x ~/webp-convert.sh

Exécutez le script sur le répertoire images:

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

Rien ne s'est passé! C'est parce que nous avons déjà converti ces images à l'étape 2. À l'avenir, le script webp-convert convertira les images lorsque nous ajouterons de nouveaux fichiers ou supprimerons les versions .webp. Pour voir comment cela fonctionne, supprimez les fichiers .webp que nous avons créés à l'étape 2:

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

Après avoir supprimé toutes les images .webp, réexécutez le script pour vous assurer qu'il fonctionne:

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

La commande ls confirmera que le script a correctement converti les images:

ls -lh /var/www/html/webp
Sortie
-rw-r--r-- 1 jul jul 7.4M Jan 28 09:08 image1.jpg
-rw-r--r-- 1 jul jul 3.9M Jan 18 17:13 image1.webp
-rw-r--r-- 1 jul jul 16M Jan 18 13:21 image2.jpg
-rw-r--r-- 1 jul jul 7.0M Jan 18 17:13 image2.webp
-rw-r--r-- 1 jul jul 116K Jan 18 16:11 logo.png
-rw-r--r-- 1 jul jul 60K Jan 18 17:13 logo.webp

 

Voilà ce script vous permettra dans un premier temps telle une moulinette excalibur niveau 1 de transformer  / convertir vos images au format WebP de façon automatisé.

Il est possible d'approfondir cette fonction, et convertir en mode automatique en vérifiant régulièrement le répertoire. Je ne traiterais pas le sujet aujourd'hui mais peut être dans un temps prochain.

VOUS SOUHAITEZ ÊTRE ACCOMPAGNÉ DANS VOTRE démarche marketing digital ?
N'hésitez pas à nous contacter dès à présent !
Julien GAUTHIER
Créateur de solution sur-mesure sur La Baule. J'accompagne les entreprises de toutes tailles dans leur stratégie d'acquisition et de visibilité sur le web.

A PARTAGER

Diversifier vos contenus pour votre site internet, et si vous pensiez au podcast ?

Lire la suite de l'article ?

Etat des lieux du marketing digital

Lire la suite de l'article ?

WordPress 5.7 : Les changements techniques à venir en mars

Lire la suite de l'article ?

Top 5 des meilleures solutions d'emailing du marché

Lire la suite de l'article ?

Pourquoi refaire son site internet ?

Lire la suite de l'article ?

Gagnez en visibilité grâce à la rédaction de contenus pour le web

Lire la suite de l'article ?

Comment optimiser son site Internet ?

Lire la suite de l'article ?

Référencement naturel ou référencement payant : lequel choisir ?

Lire la suite de l'article ?

Aides financières pour le numérique pour votre entreprise ?

Lire la suite de l'article ?

Tous les smileys, emoji, émoticône pour vos articles "à copier coller"

Lire la suite de l'article ?

Expert SEO : Compétences et techniques de référencement

Lire la suite de l'article ?

Ranker sur Google : Astuces d’Experts

Lire la suite de l'article ?

Les meilleures applications pour gérer ses réseaux sociaux en 2021

Lire la suite de l'article ?

L’Impact du Nom de Domaine d’un Site Web sur le Référencement

Lire la suite de l'article ?

5 étapes pour bien référencer son site sur Internet

Lire la suite de l'article ?

Botnet KashmirBlack cible les CMS WordPress, Joomla, Drupal, etc.

Lire la suite de l'article ?

Quel tarif pour un site web ecommerce ?

Lire la suite de l'article ?

Comment être mieux référencé sur sa boutique ecommerce ?

Lire la suite de l'article ?

Bien rédiger un article de blog

Lire la suite de l'article ?

Créer un lien facilement pour permettre aux clients de rédiger des avis

Lire la suite de l'article ?

Changer nom de domaine WordPress les requêtes SQL

Lire la suite de l'article ?

Créer un logo gratuit : Les 3 meilleurs générateurs de logo

Lire la suite de l'article ?

Créer un persona gratuitement

Lire la suite de l'article ?

Comment fonctionne Google AdWords ?

Lire la suite de l'article ?

Cache WordPress - Les secrets d'un site rapide

Lire la suite de l'article ?

Comment créer une page web ?

Lire la suite de l'article ?

Chèque numérique pour un commerce connecté

Lire la suite de l'article ?

20 Styles of animated borders in CSS for a modern site

Lire la suite de l'article ?

How to convert WebP images to speed up your website

Lire la suite de l'article ?

Comment convertir des images WebP pour accélérer votre site Web

Lire la suite de l'article ?

CSS animated button and checkbox for a modern design

Lire la suite de l'article ?

Bouton animé CSS et checkbox pour un design moderne

Lire la suite de l'article ?

Prestashop : Faille de sécurité critique dans les modules

Lire la suite de l'article ?

8 CSS HTML5 JS carousels for modern website

Lire la suite de l'article ?

8 carrousels en CSS HTML5 JS pour site web moderne

Lire la suite de l'article ?

Zoom sur la version WordPress 5.3 "Kirk"

Lire la suite de l'article ?

Pourquoi la vitesse de votre site web est importante ?

Lire la suite de l'article ?

Les questions les plus fréquentes sur WordPress

Lire la suite de l'article ?

Top 5 outils SVG gratuit pour le graphisme et le design

Lire la suite de l'article ?

Les questions les plus fréquentes sur Prestashop

Lire la suite de l'article ?

Tout savoir sur PrestaShop

Lire la suite de l'article ?

Comment rendre son site Web éco-responsable ?

Lire la suite de l'article ?

Zoom sur la version 5.2 de WordPress

Lire la suite de l'article ?

Combien coûte la création d’un site internet ? Prix d'un site internet

Lire la suite de l'article ?

Entreprise : pourquoi créer un site web ?

Lire la suite de l'article ?

20 Styles de bordures animées en CSS pour un site moderne

Lire la suite de l'article ?

Qu'est-ce que le développement informatique ?

Lire la suite de l'article ?

.dev, un nouveau TLD pour les développeurs

Lire la suite de l'article ?

C'est quoi l'autorité de domaine ?

Lire la suite de l'article ?

Comment évaluer l'efficacité d'un site web ?

Lire la suite de l'article ?

Inbound Marketing, Boostez votre chiffre d'affaires

Lire la suite de l'article ?

Pages Jaunes Solocal VS agence de référencement

Lire la suite de l'article ?

Quelle est la recette d'un bon site Internet ?

Lire la suite de l'article ?

Quelles sont les méthodes de travail d'un développeur web ?

Lire la suite de l'article ?

Quel CMS choisir en fonction de mon site ?

Lire la suite de l'article ?

Les tendances du développement web

Lire la suite de l'article ?

La planification : une maitrise à ne pas négliger

Lire la suite de l'article ?

Les 15 termes du développement web à connaître

Lire la suite de l'article ?

Quelles sont les étapes d'une refonte d'un site web ?

Lire la suite de l'article ?

Le coût d'un retour en arrière.

Lire la suite de l'article ?

Comment définir une stratégie digitale efficace ?

Lire la suite de l'article ?

Qu'est-ce que la stratégie digitale ?

Lire la suite de l'article ?

Pourquoi avoir un site responsive web design et mobile compliant ?

Lire la suite de l'article ?

Pourquoi avoir un site sécurisé HTTPS SSL ?

Lire la suite de l'article ?

Quelles sont les étapes de création d'un site internet ?

Lire la suite de l'article ?

Les avantages de faire appel à une agence Web Marketing

Lire la suite de l'article ?

Indexation ! Optimiser son site e-commerce mobile first?

Lire la suite de l'article ?

Les nouvelles tendances du SEO en 2018

Lire la suite de l'article ?

Mais pourquoi mes emails arrivent en SPAM ?

Lire la suite de l'article ?

Pourquoi intégrer la vidéo à sa stratégie marketing ?

Lire la suite de l'article ?

8 raisons d'incorporer INSTAGRAM à sa stratégie

Lire la suite de l'article ?

Pub Digital Media : Forte croissance du search et des réseaux sociaux

Lire la suite de l'article ?
Newsletter
Chaque mois, 
1 email, 3 articles. 
Gratuit pour toujours.
Prêt pour parler de votre projet ? Contactez-nous
menuchevron-down