Fichier WebP : qu'est-ce que c'est et comment s'en servir ?

Rédigé par : Benoit Reger
Guide d'introduction HTML et CSS

GUIDE D'INTRODUCTION HTML ET CSS

Apprendre à différencier et utiliser ces langages de programmation.

Télécharger gratuitement
fichier-webp

Mis à jour :

Publié :

Les images illustrent efficacement les contenus des sites web, les rendant ainsi attrayants afin d'attirer les internautes et de capter leur attention. Les types de fichiers images les plus couramment utilisés sont les formats JPG, PNG, SVG ou encore HEIC. Toutefois, l'ajout d'images dans un contenu est insuffisant, il faut également veiller à l'optimisation de différents éléments, notamment leurs tailles, leur qualité et leur temps de chargement, pour assurer la performance du site.

Téléchargement  >> Le guide pour accélérer la création de contenu grâce à l'IA

Avec la compression d'images, les sites web peuvent fournir des pages riches en visuels à leurs visiteurs, malgré un problème de perte de données sur ces images. Depuis plusieurs années, Google a cherché à remédier à cet inconvénient en développant un type de fichier plus moderne. Ainsi, le WebP, un format d'image aujourd'hui utilisé par de nombreux sites, est né.

 

 

Avantages et inconvénients du format WebP

 

Avantages

Le format WebP présente de nombreux avantages. Tout d'abord, ce type de fichier se distingue par sa légèreté. En effet, il offre une compression supérieure par rapport aux autres formats d'image, ce qui permet de créer des fichiers plus petits de 25 % et 34 %. La taille réduite des fichiers WebP se traduit par un temps de chargement plus court des pages web. Elle permet donc une navigation plus fluide, engendre une meilleure expérience utilisateur et améliore l'optimisation des sites web sur les moteurs de recherche. De plus, malgré sa compression, le format WebP fournit des images de haute qualité.

L'utilisation d'images WebP permet de réduire considérablement la consommation de bandes passantes. Cet avantage s'avère particulièrement important pour les sites web contenant de nombreux visuels, ceux à trafic dense et les sites hébergés sur des serveurs limités en matière de transfert de données. Non seulement ce type de fichier réduit la quantité de données à transférer à chaque visite de page, mais il contribue également à de belles économies au niveau de l'hébergement.

De plus, le WebP prend en charge la transparence et l'animation, option particulièrement intéressante pour la création de contenus web dynamiques et attractifs avec des images de petite taille. Ce format représente alors une alternative pertinente au format GIF.

 

Inconvénients

Malgré ses avantages, le WebP est relativement moins utilisé que les formats PNG et JPEG. Seulement 12,3 % des sites web l'ont adopté. Cette réalité s'explique par la jeunesse de ce format d'image qui a mis du temps avant d'être pris en charge par les principaux navigateurs web et logiciels de conception graphiques.

Le principal inconvénient du WebP réside donc dans sa compatibilité limitée sur tous les navigateurs. En effet, aujourd'hui, les navigateurs web les plus connus tels que Google Chrome, Firefox, Microsoft Edge, Opera et plus récemment Safari supportent ce type de fichier. Cependant il n'en est pas de même pour certains navigateurs comme Internet Explorer ou pour les anciennes versions.

De même, tous les logiciels d'édition d'images ne reconnaissent pas le format WebP. À l'heure actuelle, certaines visionneuses d'images et certains outils de retouche ne prennent pas en charge les images WebP. Par ailleurs, Adobe Photoshop n'a adopté le format WebP que récemment, et ce grâce à un plugin.

Le guide pour comprendre les langages HTML et CSS.

Découvrez comment utiliser les langages HTML et CSS pour gérer votre site web efficacement.

  • Balises HTML à connaître
  • Mettre à jour un fichier CSS
  • Les écueils à éviter
  • Ressources pédagogiques

    Télécharger

    Tous les champs sont obligatoires.

    Merci d'avoir soumis le formulaire

    Cliquez sur le lien pour accéder au contenu en tout temps

     

    Quelle est la différence entre WebP et JPG ?

    Les formats WebP et JPG possèdent chacun des caractéristiques qui les différencient, que ce soit au niveau de la compression, de la qualité, de la compatibilité ou de leurs fonctions.

    Développé en 2010 par Google, le WebP est un format d'image relativement nouveau. Il est d'ailleurs beaucoup plus récent que le JPG, apparu dans les années 1990.

    Si le type de fichier WebP offre un taux de compression élevé, celui du format JPG est en revanche nettement plus faible. De plus, le WebP prend en charge la compression avec et sans perte alors que le JPG utilise des algorithmes de compression avec perte. Par conséquent, à l'inverse de fichiers WebP, les images JPG subissent une perte de qualité due à la compression. En outre, même pour une qualité d'image identique, la taille des fichiers JPG est supérieure à celle des fichiers WebP.

    illustration comparaison poids format WebP et JPEG

    Contrairement au format WebP, le format JPG est supporté par tous les navigateurs, éditeurs de photos et logiciels de retouche d'images. De plus, les fichiers WebP sont utilisés pour assurer une performance optimale et continue des site web. Le format JPG, quant à lui, est conçu pour stocker des images compressées sur divers appareils, plateformes ou serveurs.

     

    Comment enregistrer des images en WebP ?

    Il existe différentes façons d'enregistrer des images en WebP. L'extension Save image as Type de Chrome permet de sauvegarder les images dans ce format grâce au menu contextuel affiché sur celles-ci. Le navigateur Firefox peut aussi assurer l'enregistrement des images en WebP.

    Il est également possible d'enregistrer directement des images au format WebP depuis Photoshop 23.1 et ses versions antérieures. Pour ce faire, il suffit de télécharger et d'installer un plugin tel que WebPShop. Celui-ci est aussi téléchargeable depuis Google et disponible sur GitHub sous une licence Apache 2.0. De plus, l'outil Adobe Photoshop WebP Plugin permet d'intégrer un plugin gratuit dans Photoshop afin d'enregistrer les images en format WebP.

     

    Comment ouvrir un fichier WebP ?

    Les possibilités pour ouvrir un fichier WebP sont nombreuses, cependant, la méthode la plus simple consiste à utiliser un navigateur web comme Chrome ou Opera. Pour y afficher une image WebP, il suffit de la glisser-déposer dans la fenêtre du navigateur, il est alors possible de visionner le fichier sans utiliser un autre logiciel. Cependant, cette solution est loin d'être la plus pratique pour visionner plusieurs images. Dans cette situation, l'utilisation d'une visionneuse gratuite telle qu'IrfanView est une option à privilégier pour éviter de travailler avec plusieurs fenêtres du navigateur. En effet, une fois les plugins officiels installés, ce programme peut supporter le format WebP. Toutefois, il n'est disponible que sur Windows.

    Plusieurs logiciels permettent également d'ouvrir un fichier WebP comme Photoshop, Paint avec Windows 10, Gimp ou encore macOS d'Apple. L'ouverture d'une image peut alors se faire en sélectionnant l'application souhaitée par un clic droit sur le fichier.

     

     

    Comment convertir un fichier JPG en fichier WebP ?

    De nombreux outils en ligne et logiciels peuvent être utilisés pour transformer un fichier JPG en fichier WebP :

    Les sites de conversion d'images peuvent transformer un ou plusieurs fichiers images d'un format comme JPG vers un autre format, quel qu'il soit, y compris WebP.

    Pour les sites web qui fonctionnent sous WordPress, il est possible d'utiliser des plugins dédiés à l'optimisation d'images. Les programmes additionnels Smush, EWWW Image Optimizer ou Imagify automatisent le processus de conversion en WebP.

    Enfin, Google met à disposition une bibliothèque téléchargeable qui peut convertir les formats JPEG, PNG et TIFF en WebP. Cet outil est disponible pour Windows, macOS et Linux.

     

    Pour aller plus loin, découvrez comment utiliser les plus récents outils d'IA dans votre stratégie en téléchargeant le guide de l'intelligence artificielle pour la création de contenu ; ou découvrez le générateur de contenu IA gratuit.

    Le guide pour accélérer la création de contenu grâce à l'IA

    Articles recommandés

    Apprendre à différencier et utiliser ces langages de programmation.

      CMS Hub is flexible for marketers, powerful for developers, and gives customers a personalized, secure experience

      START FREE OR GET A DEMO