Parce qu'un site Web est souvent la base de la communication, il doit être présentable afin de garder les visiteurs engagés et présents sur le site. La méthode la plus efficace et la plus simple pour y parvenir consiste à utiliser des images visuellement attractives pour transmettre le message de manière efficace et rapide.
Mais il ne suffit pas d’ajouter des images dans des pages Web. La taille, la qualité, le format et la vitesse de téléchargement de ces images peuvent faire une énorme différence dans les performances du site Web, et donc dans le comportement des visiteurs.
De nos jours, presque tous les sites Web connus sur Internet affichent leurs images au format WebP, le format d'image de nouvelle génération. Dans ce guide, je vous explique tout ce qu'il faut savoir sur le format WebP, quels sont les avantages et les inconvénients de WebP, quelles sont les différentes méthodes pour convertir vos images actuelles au format WebP, etc. Suivez le guide !
Qu'est-ce que le format Webp
WebP est un format d'image moderne créé par Google en septembre 2010. La première version stable de sa bibliothèque a été publiée en avril 2018.
Ce format de nouvelle génération prend en charge la transparence, les animations, la compression sans perte (qualité parfaite) et avec perte (qualité légèrement réduite) pour les images affichées sur les pages Web, promettant d'accélérer les temps de chargement des sites Web tout en conservant la fidélité visuelle, par rapport à d'autres formats d'images comme JPG ou PNG.
Grâce à WebP, les webmasters et les développeurs Web peuvent créer des sites Web plus rapides avec des images moins lourdes et toutes aussi belles.
Pourquoi utiliser les images au format Webp
Si l’expérience utilisateur, le référencement et le comportement des visiteurs en ligne sont importants pour vous, alors vous savez probablement que la vitesse de votre site Web est l’un des facteurs les plus importants pour ses performances. Une page Web ou une image dont le chargement prend beaucoup de temps peut rendre les visiteurs moins engagés et avoir un effet néfaste sur votre site Web. De plus, même les graphiques ont un effet significatif sur la rapidité de chargement d’un site Web.
En tant que tel, un classement ne peut pas être amélioré uniquement en affichant des images plus optimisées. Pour garantir des performances optimales, assurez-vous d’utiliser les tailles et formats d’image appropriés. Pour chaque seconde supplémentaire nécessaire au chargement d’un site Web, en moyenne, 10 % des visiteurs quittent le site.
La plupart des visiteurs s'attendent à ce qu'une page se charge complètement, y compris les images, en moins de 10 secondes. Parce que ces formats d'image se chargent plus rapidement et utilisent moins de données sans sacrifier la qualité, la majorité des professionnels du référencement conseillent d'utiliser ces formats de nouvelle génération pour vos images, tels que AVIF, JPEG XR et WebP.
La section Opportunités du rapport PageSpeed Insights répertorie toutes les images dans des formats anciens et montre les réductions de coûts possibles en fournissant des formats modernes de ces images :
Avant d'aller plus loin, voici un bref résumé des principales caractéristiques du format WebP:
Extension: .webp
Prend en charge les techniques de compression avec et sans perte
Prend en charge la transparence sans perte avec un canal alpha
Prend en charge l'animation, peut être un remplacement possible des GIF animés
Les fichiers WebP sont généralement 25 à 35 % plus légers que leurs homologues JPEG
Les fichiers Webp sont généralement 25 % plus légers que leurs homologues PNGv
Le format WebP est supporté par la plupart des navigateurs Web (ordinateur de bureau et mobile)
le format WebP comparé aux autres formats
Afin de vérifier les affirmations concernant la réduction de poids liée à l'utilisation du format WebP, j'ai effectué quelques tests pour déterminer dans quelle mesure la taille d'une image pouvait être réduite lors de sa convertion de son format d'origine - JPG, PNG et GIF - vers WebP.
Pas besoin de faire des calculs pendant des heures, les résultats montrent clairement une réduction significative de la taille des fichiers pour tous les formats JPG, PNG, et GIF, après optimisation et conversion au format WebP.
De plus, il n’y a pratiquement aucune différence visible dans la clarté et la résolution de l’image. Compte tenu de la réduction significative de la taille des fichiers sans sacrifier la qualité visuelle, il est évident que le format WebP est un format à considérer.
Avantages du format WebP
Les avantages du format WebP le rendent vraiment attrayant.
Tout d'abord, ses algorithmes de compression efficaces peuvent réduire considérablement la taille des fichiers images, ce qui améliorera la vitesse d'affichage de la page Web et accélérera le temps de chargement de ces pages. Ceci est important à la fois pour l’expérience utilisateur et pour le classement des moteurs de recherche.
De plus, sa capacité à prendre en charge l'animation et la transparence dans un seul et même format simplifie encore le processus de conception Web en offrant un outil unique pour une variété d'exigences visuelles.
Les inconvénients du format WebP
Cependant, un certain nombre de défis entravent la mise en oeuvre généralisée de WebP.
Bien que la prise en charge des navigateurs se développe rapidement, elle n'est toujours pas universelle à 100 %. Par conséquent, certains utilisateurs ne peuvent pas afficher les images WebP sans solutions de secours.
Pour les webmasters et les concepteurs de sites Web habitués aux formats d'image traditionnels, la nécessité d'outils de conversion spécialisés et de modifications des flux de travail actuels peut également poser quelques difficultés.
WebP et les navigateurs Web
En ce qui concerne la compatibilité, il est à noter que les images au format WebP peuvent désormais être visualisées sur la plupart des navigateurs Web.
Voici la liste actuelle des navigateurs prenant en charge le format WebP.
Si vous êtes convaincu des avantages offerts par WebP et que vous avez hâte d'opter pour ce format, voici plusieurs solutions pour vous aider à convertir vos images. Les commandes, la commodité et la facilité d'utilisation des différentes méthodes sont différentes.
Utiliser le format WebP signifie convertir vos images actuelles vers ce format nouvelle génération et plusieurs outils et services peuvent vous aider dans ce processus. Voici quelques techniques qui peuvent être utilisées pour répondre à divers besoins et préférences lors de l'inclusion de la conversion WebP dans votre processus.
Logiciels pour convertir les images en WebP
WebPconv est une application Windows qui peut effectuer des conversions par lots de fichiers JPEG/PNG vers WebP. Il peut également convertir des fichiers WebP dans divers autres formats de fichiers. WebPconv peut convertir plusieurs fichiers JPEG ou PNG en fichiers WebP à la fois. Les processus de conversion se déroulent en parallèle les uns des autres, de sorte qu'ils peuvent être réalisés dans un délai plus court. Vous pouvez également confirmer visuellement le changement de taille du fichier avant et après la conversion.
WebPonize est une application macOS qui convertit les images en WebP. C'est probablement la meilleure solution et la plus rapide pour convertir des images au format WebP sur un Mac. Faites simplement glisser et déposez vos images dans WebPonize, et il gère la conversion pour vous. WebPonize fournit des détails tels que la taille d'origine, la taille convertie et le pourcentage de réduction.
Vous pouvez convertir vos images en WebP à l'aide d'un outil en ligne si vous préférez ne pas installer de logiciel sur votre ordinateur. Voici une sélection parmi les outils les plus appréciés. D'autres outils similaires peuvent être trouvées en effectuant une recherche sur Google.
Plugin Photoshop plugin pour convertir les images au format WebP
Pour ouvrir et enregistrer des images au format WebP directement à partir de Photoshop 23.1 et versions antérieures, vous pouvez télécharger et installer le plug-in WebPShop. Vous pouvez télécharger ce plug-in (avec support universel/ARM) directement depuis Google qui possède et gère le format WebP. De plus, WebPShop est disponible sur GitHub sous une licence Apache 2.0.
Si vous souhaitez utiliser des images au format WebP sur votre site Web Joomla, vous devez vous assurer que votre site Web prend en charge ce format de nouvelle génération.
La première étape consiste à vérifier si le type MIME pour le format WebP est autorisé dans la configuration de Joomla.
Ouvrez votre panneau d'administration Joomla.
Suivez Systèmé > Configuration Générale
Dans la liste des composants installés, cliquez sur Médias
Vérifiez si WebP est ajouté dnas le champ des Extensions autorisées.
WebP - extensions autorisées
Vérifiez si WebP est ajouté dans le champ des Fichiers image autorisés.
WebP - Fichiers images autorisés
Vérifiez si image/webp est ajouté dans le champ Types MIME autorisés
WebP - Types MIME autorisés
Cliquez sur le bouton "Enregistrer & Fermer" quand vous avez terminé.
Pour utiliser vos images WebP sur votre site Web Joomla, remplacez simplement l'extension de fichier de votre image .jpg ou .png par .webp. Par exemple, si vous avez une image appelée image.jpg, convertissez-la simplement au format WebP et renommez-la en image.webp. Ensuite, mettez à jour votre code HTML pour pointer vers le nouveau fichier image WebP.
Si vous préférez utiliser une extension, en voici quelques-unes répertoriées dans le Joomla Extensions Directory:
Si vous proposez ces images de nouvelle génération à vos visiteurs sur votre site Web, c'est une bonne pratique que de proposer des options de secours pour les navigateurs qui pourraient ne pas prendre en charge le format WebP. L’approche la plus sûre consiste à leur proposer les formats traditionnels comme JPG ou PNG.
Explications: grâce à ce code, les navigateurs Web qui ne prennent pas en charge le format WebP afficheront le fichier image.jpg à la place.
Conseils pour utiliser des images WebP
Choisissez le bon outil de conversion
Parmi toutes les solutions disponibles, sélectionnez l'outil de conversion qui correspond le plus à vos besoins. Bien que les logiciels ou les plugins professionnels puissent être préférables pour les conversions de masse ou l'intégration de flux de travail, les convertisseurs en ligne sont pratiques pour une utilisation occasionnelle.
Vérifiez la compatibilité avec les navigateurs Web
Assurez-vous que les navigateurs de votre public cible peuvent gérer le format WebP avant de procéder à la conversion complète. Pour les navigateurs qui ne sont pas pris en charge, proposez des formats alternatifs dans votre code HTML en utilisant un fallback.
Contrôlez la taille et la qualité
Essayez différents réglages de compression lors de la conversion de vos images en WebP pour trouver le rapport idéal entre la taille du fichier et la qualité de l'image. De simples changements peuvent avoir un impact sur des réductions significatives de la bande passante et du temps de chargement.
Utiliser le format WebP pour chaque type d'image
Tirez avantage de l'adaptabilité du format WebP en l'utilisant pour des images graphiques et photographiques. Ses algorithmes de compression fonctionnent efficacement avec une grande variété de types de contenu.
Utilisez WebP pour vos animations
Pour les animations, privilégiez le format WebP au lieu des GIF. Par rapport aux GIF, les animations WebP sont considérablement plus légères et offrent une prise en charge améliorée des couleurs et de la transparence alpha.
Lectures recommandées
Voici quelques ressources fiables pour toute personne souhaitant en savoir plus sur le format WebP et la technologie associée.
Comme nous l'avons vu au cours de cet article, le format d’images WebP représente une véritable avancée dans l’optimisation des images web. Alliant qualité visuelle et efficacité, ce format nouvelle génération peut grandement améliorer l'expérience utilisateur sur votre site Web en réduisant les temps de chargement et en boostant les performances.
Largement pris en charge par la plupart des navigateurs Web, vous pouvez désormais exploiter efficacement le format WebP en remplaçant vos images photographiques et graphiques à l'aide d'un outil de conversion gratuit. Toutes les ressources mentionnées dans cet article sont toutes fiables et dignes de confiance.
Parce qu'un site Web est souvent la base de la communication, il doit être présentable afin de garder les visiteurs engagés et présents sur le site. La méthode la plus efficace et la plus simple pour y parvenir consiste à utiliser des images visuellement attractives pour transmettre le message de manière efficace et rapide.
Mais il ne suffit pas d’ajouter des images dans des pages Web. La taille, la qualité, le format et la vitesse de téléchargement de ces images peuvent faire une énorme différence dans les performances du site Web, et donc dans le comportement des visiteurs.
De nos jours, presque tous les sites Web connus sur Internet affichent leurs images au format WebP, le format d'image de nouvelle génération. Dans ce guide, je vous explique tout ce qu'il faut savoir sur le format WebP, quels sont les avantages et les inconvénients de WebP, quelles sont les différentes méthodes pour convertir vos images actuelles au format WebP, etc. Suivez le guide !
Qu'est-ce que le format Webp
WebP est un format d'image moderne créé par Google en septembre 2010. La première version stable de sa bibliothèque a été publiée en avril 2018.
Ce format de nouvelle génération prend en charge la transparence, les animations, la compression sans perte (qualité parfaite) et avec perte (qualité légèrement réduite) pour les images affichées sur les pages Web, promettant d'accélérer les temps de chargement des sites Web tout en conservant la fidélité visuelle, par rapport à d'autres formats d'images comme JPG ou PNG.
Grâce à WebP, les webmasters et les développeurs Web peuvent créer des sites Web plus rapides avec des images moins lourdes et toutes aussi belles.
Pourquoi utiliser les images au format Webp
Si l’expérience utilisateur, le référencement et le comportement des visiteurs en ligne sont importants pour vous, alors vous savez probablement que la vitesse de votre site Web est l’un des facteurs les plus importants pour ses performances. Une page Web ou une image dont le chargement prend beaucoup de temps peut rendre les visiteurs moins engagés et avoir un effet néfaste sur votre site Web. De plus, même les graphiques ont un effet significatif sur la rapidité de chargement d’un site Web.
En tant que tel, un classement ne peut pas être amélioré uniquement en affichant des images plus optimisées. Pour garantir des performances optimales, assurez-vous d’utiliser les tailles et formats d’image appropriés. Pour chaque seconde supplémentaire nécessaire au chargement d’un site Web, en moyenne, 10 % des visiteurs quittent le site.
La plupart des visiteurs s'attendent à ce qu'une page se charge complètement, y compris les images, en moins de 10 secondes. Parce que ces formats d'image se chargent plus rapidement et utilisent moins de données sans sacrifier la qualité, la majorité des professionnels du référencement conseillent d'utiliser ces formats de nouvelle génération pour vos images, tels que AVIF, JPEG XR et WebP.
La section Opportunités du rapport PageSpeed Insights répertorie toutes les images dans des formats anciens et montre les réductions de coûts possibles en fournissant des formats modernes de ces images :
Avant d'aller plus loin, voici un bref résumé des principales caractéristiques du format WebP:
Extension: .webp
Prend en charge les techniques de compression avec et sans perte
Prend en charge la transparence sans perte avec un canal alpha
Prend en charge l'animation, peut être un remplacement possible des GIF animés
Les fichiers WebP sont généralement 25 à 35 % plus légers que leurs homologues JPEG
Les fichiers Webp sont généralement 25 % plus légers que leurs homologues PNGv
Le format WebP est supporté par la plupart des navigateurs Web (ordinateur de bureau et mobile)
le format WebP comparé aux autres formats
Afin de vérifier les affirmations concernant la réduction de poids liée à l'utilisation du format WebP, j'ai effectué quelques tests pour déterminer dans quelle mesure la taille d'une image pouvait être réduite lors de sa convertion de son format d'origine - JPG, PNG et GIF - vers WebP.
Pas besoin de faire des calculs pendant des heures, les résultats montrent clairement une réduction significative de la taille des fichiers pour tous les formats JPG, PNG, et GIF, après optimisation et conversion au format WebP.
De plus, il n’y a pratiquement aucune différence visible dans la clarté et la résolution de l’image. Compte tenu de la réduction significative de la taille des fichiers sans sacrifier la qualité visuelle, il est évident que le format WebP est un format à considérer.
Avantages du format WebP
Les avantages du format WebP le rendent vraiment attrayant.
Tout d'abord, ses algorithmes de compression efficaces peuvent réduire considérablement la taille des fichiers images, ce qui améliorera la vitesse d'affichage de la page Web et accélérera le temps de chargement de ces pages. Ceci est important à la fois pour l’expérience utilisateur et pour le classement des moteurs de recherche.
De plus, sa capacité à prendre en charge l'animation et la transparence dans un seul et même format simplifie encore le processus de conception Web en offrant un outil unique pour une variété d'exigences visuelles.
Les inconvénients du format WebP
Cependant, un certain nombre de défis entravent la mise en oeuvre généralisée de WebP.
Bien que la prise en charge des navigateurs se développe rapidement, elle n'est toujours pas universelle à 100 %. Par conséquent, certains utilisateurs ne peuvent pas afficher les images WebP sans solutions de secours.
Pour les webmasters et les concepteurs de sites Web habitués aux formats d'image traditionnels, la nécessité d'outils de conversion spécialisés et de modifications des flux de travail actuels peut également poser quelques difficultés.
WebP et les navigateurs Web
En ce qui concerne la compatibilité, il est à noter que les images au format WebP peuvent désormais être visualisées sur la plupart des navigateurs Web.
Voici la liste actuelle des navigateurs prenant en charge le format WebP.
Si vous êtes convaincu des avantages offerts par WebP et que vous avez hâte d'opter pour ce format, voici plusieurs solutions pour vous aider à convertir vos images. Les commandes, la commodité et la facilité d'utilisation des différentes méthodes sont différentes.
Utiliser le format WebP signifie convertir vos images actuelles vers ce format nouvelle génération et plusieurs outils et services peuvent vous aider dans ce processus. Voici quelques techniques qui peuvent être utilisées pour répondre à divers besoins et préférences lors de l'inclusion de la conversion WebP dans votre processus.
Logiciels pour convertir les images en WebP
WebPconv est une application Windows qui peut effectuer des conversions par lots de fichiers JPEG/PNG vers WebP. Il peut également convertir des fichiers WebP dans divers autres formats de fichiers. WebPconv peut convertir plusieurs fichiers JPEG ou PNG en fichiers WebP à la fois. Les processus de conversion se déroulent en parallèle les uns des autres, de sorte qu'ils peuvent être réalisés dans un délai plus court. Vous pouvez également confirmer visuellement le changement de taille du fichier avant et après la conversion.
WebPonize est une application macOS qui convertit les images en WebP. C'est probablement la meilleure solution et la plus rapide pour convertir des images au format WebP sur un Mac. Faites simplement glisser et déposez vos images dans WebPonize, et il gère la conversion pour vous. WebPonize fournit des détails tels que la taille d'origine, la taille convertie et le pourcentage de réduction.
Vous pouvez convertir vos images en WebP à l'aide d'un outil en ligne si vous préférez ne pas installer de logiciel sur votre ordinateur. Voici une sélection parmi les outils les plus appréciés. D'autres outils similaires peuvent être trouvées en effectuant une recherche sur Google.
Plugin Photoshop plugin pour convertir les images au format WebP
Pour ouvrir et enregistrer des images au format WebP directement à partir de Photoshop 23.1 et versions antérieures, vous pouvez télécharger et installer le plug-in WebPShop. Vous pouvez télécharger ce plug-in (avec support universel/ARM) directement depuis Google qui possède et gère le format WebP. De plus, WebPShop est disponible sur GitHub sous une licence Apache 2.0.
Si vous souhaitez utiliser des images au format WebP sur votre site Web Joomla, vous devez vous assurer que votre site Web prend en charge ce format de nouvelle génération.
La première étape consiste à vérifier si le type MIME pour le format WebP est autorisé dans la configuration de Joomla.
Ouvrez votre panneau d'administration Joomla.
Suivez Systèmé > Configuration Générale
Dans la liste des composants installés, cliquez sur Médias
Vérifiez si WebP est ajouté dnas le champ des Extensions autorisées.
WebP - extensions autorisées
Vérifiez si WebP est ajouté dans le champ des Fichiers image autorisés.
WebP - Fichiers images autorisés
Vérifiez si image/webp est ajouté dans le champ Types MIME autorisés
WebP - Types MIME autorisés
Cliquez sur le bouton "Enregistrer & Fermer" quand vous avez terminé.
Pour utiliser vos images WebP sur votre site Web Joomla, remplacez simplement l'extension de fichier de votre image .jpg ou .png par .webp. Par exemple, si vous avez une image appelée image.jpg, convertissez-la simplement au format WebP et renommez-la en image.webp. Ensuite, mettez à jour votre code HTML pour pointer vers le nouveau fichier image WebP.
Si vous préférez utiliser une extension, en voici quelques-unes répertoriées dans le Joomla Extensions Directory:
Si vous proposez ces images de nouvelle génération à vos visiteurs sur votre site Web, c'est une bonne pratique que de proposer des options de secours pour les navigateurs qui pourraient ne pas prendre en charge le format WebP. L’approche la plus sûre consiste à leur proposer les formats traditionnels comme JPG ou PNG.
Explications: grâce à ce code, les navigateurs Web qui ne prennent pas en charge le format WebP afficheront le fichier image.jpg à la place.
Conseils pour utiliser des images WebP
Choisissez le bon outil de conversion
Parmi toutes les solutions disponibles, sélectionnez l'outil de conversion qui correspond le plus à vos besoins. Bien que les logiciels ou les plugins professionnels puissent être préférables pour les conversions de masse ou l'intégration de flux de travail, les convertisseurs en ligne sont pratiques pour une utilisation occasionnelle.
Vérifiez la compatibilité avec les navigateurs Web
Assurez-vous que les navigateurs de votre public cible peuvent gérer le format WebP avant de procéder à la conversion complète. Pour les navigateurs qui ne sont pas pris en charge, proposez des formats alternatifs dans votre code HTML en utilisant un fallback.
Contrôlez la taille et la qualité
Essayez différents réglages de compression lors de la conversion de vos images en WebP pour trouver le rapport idéal entre la taille du fichier et la qualité de l'image. De simples changements peuvent avoir un impact sur des réductions significatives de la bande passante et du temps de chargement.
Utiliser le format WebP pour chaque type d'image
Tirez avantage de l'adaptabilité du format WebP en l'utilisant pour des images graphiques et photographiques. Ses algorithmes de compression fonctionnent efficacement avec une grande variété de types de contenu.
Utilisez WebP pour vos animations
Pour les animations, privilégiez le format WebP au lieu des GIF. Par rapport aux GIF, les animations WebP sont considérablement plus légères et offrent une prise en charge améliorée des couleurs et de la transparence alpha.
Lectures recommandées
Voici quelques ressources fiables pour toute personne souhaitant en savoir plus sur le format WebP et la technologie associée.
Comme nous l'avons vu au cours de cet article, le format d’images WebP représente une véritable avancée dans l’optimisation des images web. Alliant qualité visuelle et efficacité, ce format nouvelle génération peut grandement améliorer l'expérience utilisateur sur votre site Web en réduisant les temps de chargement et en boostant les performances.
Largement pris en charge par la plupart des navigateurs Web, vous pouvez désormais exploiter efficacement le format WebP en remplaçant vos images photographiques et graphiques à l'aide d'un outil de conversion gratuit. Toutes les ressources mentionnées dans cet article sont toutes fiables et dignes de confiance.
A propos de Daniel
Passionné par le Web depuis 2007, Daniel défend la veuve et l'orphelin du web en créant des sites respectueux du W3C. Fort de son expérience, il partage ses connaissances dans un état d'esprit open source. Très impliqué en faveur du CMS Joomla depuis 2014, il est également conférencier et fondateur du Joomla User Group Breizh.
