Optimisation des images avec le format WebP : Guide complet
Ce tutoriel explore la conversion d'images au format WebP sans l'utilisation de plugins dans les CMS, et la configuration de Nginx pour servir automatiquement la version WebP d'une image, à condition qu'elle existe et que le format soit pris en charge par le navigateur du visiteur.
Qu'est-ce que le format WebP ?
Le WebP est un format d'image open-source développé par Google en 2010, basé sur le format VP8. Selon Google, le niveau de compression du format WebP permet d'obtenir des images jusqu'à 26% plus légères que le PNG et jusqu'à 34% plus légères que le JPG. Il est important de noter que le WebP supporte la transparence (canal alpha) ainsi que les animations (similaires aux GIF).
Cependant, les affirmations de Google n'ont pas convaincu tous les acteurs. La fondation Mozilla, par exemple, a exprimé des doutes quant à l'ampleur réelle des gains de compression et a remis en question les protocoles de test utilisés par Google.
Mise à jour du 29/01/2019 : Mozilla Firefox prend désormais officiellement en charge les images au format WebP avec la version 65.0. Les seuls navigateurs modernes qui ne supportent pas encore le format WebP sont Edge et Safari.
Il est donc crucial de souligner que tous les navigateurs web ne supportent pas encore le WebP. La question se pose alors : est-ce que cela vaut la peine d'intégrer le format WebP sur un site web ? Pour y répondre, il est nécessaire d'évaluer la proportion d'internautes utilisant un navigateur compatible. D'après les parts de marché des navigateurs, le site Can I Use estime que 73% des internautes utilisent un navigateur supportant le WebP, ce qui semble plausible étant donné la popularité de Google Chrome.
Le niveau de compression WebP : une réalité ?
D'après les tests réalisés sur divers sites, la réponse est oui : le format WebP permet effectivement d'obtenir des images plus légères. Que ce soit pour convertir une image JPEG ou PNG, la version WebP s'avère plus légère, même si l'économie de poids n'est parfois que de quelques kilo-octets.
Convertir des images au format WebP
Cwebp est l'utilitaire en ligne de commande qui permet de convertir des images au format WebP. Après avoir appris à convertir une image individuelle, il est possible d'appliquer cette méthode pour convertir toutes les images d'un site web. Pour cela, il faut d'abord lister les images aux formats JPEG et PNG présentes dans le répertoire des images du site, avant de les convertir.
La structure de nommage des images converties est importante car elle permet d'utiliser la directive Nginx try_files. Pour obtenir récursivement la liste des images PNG et JPG présentes dans un répertoire, la commande find peut être utilisée.
Voici un exemple de commande pour trouver les fichiers :
bashfind . -type f \( -iname "*.jpg" -o -iname "*.jpeg" -o -iname "*.png" \)Ensuite, pour convertir ces images en WebP, on peut combiner la commande find avec cwebp et bash pour un traitement conditionnel :
bashfind . -type f \( -iname "*.jpg" -o -iname "*.jpeg" -o -iname "*.png" \) -exec bash -c ' for img; do webp_img="${img%.*}.webp" if [ ! -f "$webp_img" ]; then cwebp "$img" -o "$webp_img" echo "Converti : $img -> $webp_img" fi done' _ {} +Il est également possible d'utiliser des scripts plus élaborés pour gérer différents niveaux de qualité et de compression, comme illustré par les options suivantes :
- --jpg <images path> : Spécifie le chemin des images JPG.
- --png <images path> : Spécifie le chemin des images PNG.
- --webp <images path> : Spécifie le chemin des images WebP.
- --nowebp <images path> : Spécifie le chemin des images ne devant pas être converties en WebP.
- --all <images path> : Traite toutes les images dans le répertoire spécifié.
- -i, --interactive : Mode interactif pour confirmation.
- -q, --quiet : Mode silencieux.
- -h, --help, help : Affiche l'aide.
Dans certains cas, la définition de la variable $webp_suffix peut être ajustée en fonction du contenu de la variable $http_accept pour servir la bonne version de l'image.
L'utilisation de la balise <picture> pour une compatibilité optimale
La balise <picture> permet de proposer différentes versions d'une même image, offrant ainsi une solution élégante pour utiliser des formats modernes comme le WebP tout en assurant la compatibilité avec les navigateurs plus anciens. Elle peut contenir un ou plusieurs éléments <source> et une balise <img> comme fallback.
La prise en charge de la balise <picture> est aujourd'hui assez large.
Si vous devez supporter des navigateurs anciens comme Internet Explorer 11 ou Safari sur iOS 9.2.x, un polyfill pour la balise <picture> peut être utilisé.
Implémentation pratique avec différentes tailles d'écran
L'intégration du format WebP peut être réalisée en adaptant les images à différentes tailles d'écran pour optimiser le chargement. Voici une approche divisée en plusieurs sections :
Très grands écrans (4K et plus, 1921px et plus)
Pour les très grands écrans, une image de grande résolution (par exemple, 4000x1591 pixels) peut être utilisée. L'élément <source> doit spécifier le type image/webp et une requête média appropriée, comme media="(min-width: 1921px)".
La taille d'une image PNG de grande résolution peut être significative (par exemple, 2.9 MB). Une version WebP compressée sans perte peut réduire cette taille de manière drastique (par exemple, être 3 fois plus petite).
Écrans d'ordinateur de bureau/portable standards (1281px à 1920px)
Pour les écrans standards, une image de résolution 1920x763 pixels peut être utilisée. La balise <source> sera configurée avec des requêtes média comme media="(min-width: 1281px) and (max-width: 1920px)".
La différence de taille entre une version PNG et WebP peut être de l'ordre de 200 KB. L'utilisation d'une compression avec perte (lossy compression) pour le WebP peut encore réduire davantage la taille. Par exemple, une image encodée à 75% peut être jusqu'à 10 fois plus petite qu'une version WebP sans perte et 15 fois plus petite qu'une version PNG.
Note importante : Pour les écrans dont la largeur est de 1366px, il peut être judicieux de diviser le breakpoint media="(min-width: 1281px) and (max-width: 1920px)" en deux : media="(min-width: 1367px) and (max-width: 1920px)" et media="(min-width: 1281px) and (max-width: 1366px)", en fournissant des images distinctes de 1920px et 1366px de largeur. Cela permet à chaque écran de recevoir une image plus adaptée, réduisant ainsi la taille globale de la page.
Tablettes (paysage et portrait, 461px à 1280px)
Pour les tablettes, on peut utiliser la même image (par exemple, 1280x509 pixels) nommée différemment pour le paysage et le portrait. Les requêtes média peuvent être étendues avec (orientation: portrait) et (orientation: landscape).
Même si la réduction de taille n'est pas aussi spectaculaire qu'avec les grands écrans, l'utilisation d'une compression WebP avec perte (75% de qualité) s'avère efficace, réduisant le poids de manière notable par rapport à une version PNG.
Écrans mobiles (jusqu'à 460px)
Pour les écrans mobiles, une image de 640x254 pixels peut être utilisée avec la règle média media="(max-width: 460px)".
Les résultats montrent que, comme pour les autres tailles d'écran, la compression WebP avec une qualité de 75% offre les meilleurs gains de poids par rapport aux formats PNG et WebP sans perte.
Avantages et considérations du format WebP
L'utilisation d'images WebP permet aux utilisateurs de charger des pages beaucoup plus légères, surtout si une grande partie d'entre eux utilise des navigateurs compatibles comme Chrome (qui détient plus de 50% du marché). Il est également conseillé d'expérimenter avec la compression avec perte lorsque la perte de qualité est négligeable, car cela peut permettre d'économiser des mégaoctets sur un site comportant de nombreuses images.
Il est recommandé de voter pour accélérer le support du format WebP dans les navigateurs qui ne le supportent pas encore, comme Edge.
Plateformes et CMS et WebP
Certaines plateformes, comme Blogger, proposent des fonctionnalités natives pour activer la diffusion d'images au format WebP. Cette option se trouve généralement dans les paramètres, sous la section "Articles". Par défaut, elle est désactivée et son activation ne nécessite pas d'enregistrement manuel, la mise à jour se faisant progressivement.
Cependant, de nombreux CMS, tels que Magento, WordPress, ou Salesforce Commerce Cloud, peuvent nécessiter l'installation de plugins pour gérer le format WebP. L'utilisation de ces plugins peut potentiellement ajouter du temps de traitement et donc ralentir le chargement des pages.
WebP vs AVIF : les formats d'image nouvelle génération
Les formats d'image nouvelle génération offrent des performances nettement supérieures en termes de vitesse de chargement par rapport aux formats traditionnels comme JPEG, PNG, SVG ou GIF. Google recommande l'utilisation du format WebP dans ses outils d'analyse de performance comme PageSpeed Insights. Cependant, le format AVIF propose des résultats encore plus intéressants.
Le format de compression d'images WebP permet de compresser les images avec ou sans perte, offrant une meilleure qualité et une vitesse de chargement accrue par rapport aux formats plus anciens. Les gains de poids, à qualité égale, sont d'environ 26% par rapport au PNG et de 25% à 34% par rapport au JPEG.
Le format de compression d'images AVIF, basé sur le format vidéo AV1, offre des performances encore plus remarquables, avec des gains pouvant atteindre 50% par rapport à une version JPEG. AVIF est un format de compression ouvert et libre de droits qui corrige certaines faiblesses de JPEG, notamment dans le traitement des lignes fines et des aplats de couleur. Il prend également en charge les couleurs HDR.
Les navigateurs comme Chrome, Firefox, Safari, Opera, Samsung Internet et Android Browser supportent désormais l'AVIF. Bien que sa compression puisse être plus longue, les gains de taille d'image et la vitesse de chargement résultante compensent largement ce temps.
Comparatif des performances WebP et AVIF
En moyenne, un fichier image compressé avec AVIF est 50% plus léger qu'un JPEG, tandis que WebP offre environ 30% de performance supplémentaire. Des études montrent que la taille médiane des images AVIF peut être réduite de plus de 50% par rapport à un JPEG de référence, contre environ 31,5% pour WebP.
Il est important de noter que pour certains usages, comme sur les sites e-commerce où les visiteurs peuvent zoomer sur les images de produits, une qualité visuelle optimale est primordiale. Cependant, pour des images purement illustratives, une compression avec perte peut être privilégiée pour améliorer la vitesse de chargement sans impacter négativement l'expérience utilisateur.
L'automatisation de ce processus d'optimisation est essentielle, car une gestion manuelle serait fastidieuse. Des solutions comme Fasterize permettent d'optimiser les images à la volée, en transformant les balises <img> en balises <picture> avec des sources WebP et/ou AVIF.
Le moteur de Fasterize propose plusieurs formats d'image au navigateur, qui choisit le plus performant parmi ceux qu'il peut supporter. La compression est également adaptée au contexte de navigation, par exemple, plus importante sur mobile tout en utilisant des algorithmes basés sur les caractéristiques de l'œil humain.
Activation de la compression d'image avec Fasterize
Fasterize offre une interface simple pour activer la compression d'images aux formats nouvelle génération. Le tableau de bord permet de choisir les formats souhaités et de définir les options de compression :
- Convertir une image en format moderne : Permet de modifier le code HTML pour sélectionner les formats WebP ou AVIF, en prévoyant les cas où le navigateur ne les supporte pas.
- Options JPG / PNG en WebP : Permet de définir les paramètres de compression WebP, y compris le niveau de perte (sans perte, avec perte) et la qualité alpha pour la transparence. L'option "sous-échantillonnage intelligent" réduit automatiquement le poids de l'image.
- Options JPG / PNG à AVIF : Permet de définir les paramètres de compression AVIF, y compris le niveau de perte et le sous-échantillonnage de chrominance.
Ces fonctionnalités intelligentes, associées à d'autres optimisations proposées par Fasterize (réduction du poids des pages, gestion des JavaScript, optimisations mobiles), contribuent à un site rapide et performant.
Performance & optimisation de votre site web
WebP en pratique : taille, compatibilité et outils
Les images WebP sont généralement 25% à 35% plus petites que leurs homologues JPEG et PNG. Le format propose une compression avec et sans perte. Dans la compression sans perte, aucune donnée n'est perdue.
Lors de la conversion d'images au format WebP, une large gamme de paramètres de compression peut être définie. Le paramètre le plus pertinent pour la plupart des utilisateurs est la qualité, spécifiable sur une échelle de 0 (pire) à 100 (meilleur).
Le plugin WebP Imagemin peut être utilisé seul ou intégré à des outils de compilation comme Webpack, Gulp ou Grunt. Si votre site n'est compatible qu'avec les navigateurs supportant WebP, vous pouvez simplifier votre balisage d'image en utilisant des règles de réécriture côté serveur pour servir automatiquement une version WebP de toute image JPEG ou PNG demandée, si elle existe.
Lighthouse, un outil d'audit de performance, peut être utilisé pour vérifier que toutes les images de votre site sont diffusées au format WebP. L'audit "Diffuser des images dans des formats de nouvelle génération" vous donnera des indications précises.
Certaines plateformes comme e-monsite permettent désormais d'ajouter des images aux formats WebP ou SVG, contribuant à l'optimisation de la vitesse de chargement et du référencement naturel.
Google a lancé le format WebP dans le but d'accélérer les temps de chargement sur Internet. Il peut être enregistré avec une compression sans perte ou avec perte. La plupart des navigateurs web modernes prennent en charge le format WebP, à l'exception de certains anciens navigateurs comme Internet Explorer.
WebP est un modèle open source, permettant des améliorations continues. La taille maximale des images WebP est de 16 383 x 16 383 pixels. Les fichiers WebP sont des fichiers pixellisés, composés de pixels individuels, contrairement aux images vectorielles qui sont basées sur des équations mathématiques.
Pour ouvrir un fichier WebP, un navigateur compatible est nécessaire. La conversion de fichiers existants (PNG, JPEG) au format WebP est possible, parfois avec l'aide de plugins pour des logiciels comme Adobe Photoshop.
Les fichiers WebP sont généralement beaucoup plus petits que les fichiers JPEG traditionnels, tout en améliorant la qualité et la commodité des images sur le web grâce à un codage prédictif.
L'accélération du chargement des pages web grâce à des formats comme WebP améliore l'expérience utilisateur et le classement dans les moteurs de recherche.
tags: #picture #tag #pour #webp