Le WebP est un format d’image développé par Google en 2010 pour réduire la taille des fichiers tout en conservant une qualité visuelle élevée. Bien que le WebP offre des avantages écologiques et de performance, son adoption universelle est freinée par des problèmes de compatibilité et par des variations selon les navigateurs et les systèmes d’exploitation. Safari progresse dans le support, mais le déploiement n’est pas encore identique sur toutes les versions et toutes les plateformes.
Qu’est-ce que WebP et pourquoi l’utiliser
Le degré de compression avec perte est réglable, ce qui permet à l’utilisateur de choisir le compromis entre la taille du fichier et la qualité de l’image. WebP permet généralement d’obtenir une compression en moyenne 30 % supérieure à celle du format JPEG, sans perte de qualité d’image (voir l’étude sur le format WebP avec pertes). Vous devez diffuser des images WebP uniquement aux clients qui peuvent les afficher correctement, et revenir aux anciens formats pour les clients qui ne le peuvent pas. Heureusement, il existe plusieurs techniques pour détecter la compatibilité WebP, à la fois côté client et côté serveur.
Il est courant que les clients Web envoient un en-tête de requête "Accept" indiquant les formats de contenu qu'ils sont prêts à accepter en réponse. Si un navigateur indique à l'avance qu’il "acceptera" le format image/webp, le serveur Web sait qu’il peut envoyer des images WebP en toute sécurité, ce qui simplifie considérablement la négociation de contenu. Modernizr est une bibliothèque JavaScript qui permet de détecter facilement la compatibilité des fonctionnalités HTML5 et CSS3 dans les navigateurs Web. HTML5 est compatible avec un élément <picture>, qui vous permet de lister plusieurs cibles d’image alternatives par ordre de priorité, de sorte qu’un client demande la première image candidate qu’il peut afficher correctement.
Une autre méthode de détection consiste à tenter de décoder une très petite image WebP qui utilise une fonctionnalité particulière et à vérifier si l’opération a réussi. Notez que le chargement des images est non bloquant et asynchrone. WebP est Open Source, et tout le monde peut travailler avec ce format et suggérer des améliorations. Vous pouvez utiliser l’utilitaire de ligne de commande WebP pour convertir vos fichiers image personnels au format WebP; si vous avez de nombreuses images à convertir, vous pouvez utiliser le shell de votre plate-forme pour simplifier l’opération.
Compatibilité et déploiement sur Safari
Safari : Le support est en cours de développement, mais n’est pas encore intégré dans toutes les versions. À savoir que depuis les versions 14 à 15.6 c’est totalement supporté, mais nécessite macOS 11 Big Sur. Le problème de compatibilité se situe en dessous de Android 4.4 KitKat (voir liste plus bas). En attendant, les créateurs de contenu doivent équilibrer les avantages écologiques du WebP avec la nécessité de garantir une expérience utilisateur cohérente sur tous les appareils et navigateurs.
Le WebP peut être affiché en le convertissant dans un format courant utilisant la compression sans perte, tel que PNG, et ces PNG peuvent être affichés dans n’importe quel navigateur. Le code du convertisseur est disponible dans la section des téléchargements de la page du projet Open Source WebP. Le code du décodeur léger et la spécification VP8 sont disponibles sur le site WebM. Le flux binaire VP8 et le format WebP avec perte utilisent le même cadre Y′CbCr 4:2:0 8 bits (YUV420). Le format WebP sans perte fonctionne exclusivement avec le format RGBA. Les paramètres par défaut des bibliothèques WebP offrent des résultats optimisés selon le mode (avec perte ou sans perte).
Gestion des formats et choix technique
Si l’image source est au format ARGB sans perte, le sous-échantillonnage spatial en YUV420 peut introduire de nouvelles couleurs plus difficiles à compresser que celles d’origine. Si la source est au format avec perte, l’utilisation de la compression WebP sans perte peut augmenter la taille du fichier. Pour éviter les conjectures sur la qualité, on peut cibler une taille de fichier donnée via l’option -size dans l’outil cwebp ou l’API équivalente. WebP peut être créé en tant que fichier DLL qui exporte l’API libwebp (par exemple, libwebp.dll).
WebP est compatible avec la compression avec et sans pertes et peut animer des images. En fait, une même animation peut combiner des frames avec et sans pertes. Le format GIF n’est compatible qu’avec la compression sans perte, et les GIF animés convertis au format WebP sont bien plus petits selon le mode choisi (64 % plus petits avec perte, 19 % sans perte).
Performance et comportement côté navigateur
WebP prend moins de temps à décoder en cas de recherche. Dans Blink, le défilement ou le changement d’onglet peut masquer et afficher des images, ce qui entraîne la mise en pause des animations, puis leur avance rapide. Une utilisation excessive du processeur entraînant une perte de frames peut obliger le décodeur à rechercher des frames ultérieurs, ce qui peut augmenter le temps total de décodage des WebP animés par rapport aux GIF. Sans recherche, le décodage en ligne droite est plus gourmand en ressources que celui de GIF, mais l’ajout du support WebP augmente l’empreinte du code et la surface d’attaque.
La pile vidéo Chromium est optimisée pour une lecture fluide et peut imposer des contraintes de ressources lorsque plusieurs vidéos sont lues simultanément. À long terme, il peut être judicieux de prendre en charge les formats vidéo dans la balise <img> pour faciliter le transcodage automatique du contenu et économiser la bande passante. Cependant, WebM n’intègre pas toutes les techniques de compression de WebP.
Détection et gestion côté serveur
Pour faciliter la compatibilité, les navigateurs peuvent envoyer des en-têtes Accept indiquant les formats compatibles avec leurs balises d’image. Même cela peut être insuffisant, car les types MIME ne suffisent pas toujours à indiquer la compatibilité du codec (par exemple VP8 vs VP9). Si les fournisseurs qui utilisent WebP acceptent d’utiliser WebP animé, le comportement sur tous les UA devrait être cohérent. La compatibilité varie selon les navigateurs et les appareils, et Safari continue d’évoluer sur ce terrain.
Éléments de sécurité et mises à jour
Une faille de sécurité liée aux images WebP a été découverte récemment et activement exploitée. Apple a corrigé la faille dans macOS Ventura et Google a publié des correctifs dans Chrome. Les apps Electron ont été corrigées, mais les applications doivent aussi être mises à jour pour bénéficier des correctifs. Exemple: 1Password a reçu un correctif rapide après la découverte et la publication des détails.
Conclusion opérationnelle pour les développeurs
En pratique, pour Safari et d’autres navigateurs, il est recommandé d’utiliser des éléments <picture> avec des sources WebP lorsque le client le supporte, et des alternatives en PNG ou JPEG sinon. Utiliser Modernizr ou des vérifications côté client peut aider à adapter dynamiquement les formats diffusés. Pour les proxys et les environnements à haut trafic, envisager des en-têtes Accept et une logique serveur robuste pour servir le format le plus adapté sans bloquer le chargement des pages.
Un diagramme de flux simple peut aider à comprendre la négociation des formats selon Accept et la détection client.
Une courte vidéo expliquant comment détecter la compatibilité WebP et pourquoi
Le WebP est un format d’image prometteur sur le plan écologique et de performance, mais son adoption universelle nécessite une collaboration continue entre les développeurs, les navigateurs et les systèmes d’exploitation. En 2024, la compatibilité s’améliore, avec des approches duales pour ne laisser aucun terminaux de côté et préparer l’avenir avec des éventuelles évolutions vers le WebP animé et l’intégration plus poussée dans les balises d’image et les flux vidéo.