Nous avons tous ressenti cette frustration lorsqu'une belle image ralentit considérablement une page Web. Choisir le mauvais format peut rendre vos images floues ou nuire sérieusement aux performances de votre site, ce qui est un véritable casse-tête pour tout propriétaire de site.
Après des années d'optimisation de milliers d'images sur nos propres sites, nous avons appris exactement quand utiliser WebP, PNG ou JPEG pour obtenir les meilleurs résultats. Chacun a ses propres forces, et le « meilleur » choix n'est pas toujours évident.
Dans ce guide, nous vous présenterons une comparaison simple des trois. Vous apprendrez quel format choisir pour chaque situation, en vous assurant que vos images sont toujours nettes et se chargent rapidement.
WebP vs. PNG vs. JPEG – Introduction
Examinons d'abord les 3 formats d'image et voyons comment chacun d'eux fonctionne.
Qu'est-ce que WebP ?
WebP est un format d'image relativement nouveau par rapport à PNG et JPEG. Créé par Google, WebP offre une compression sans perte et avec perte supérieure pour les images sur Internet. Cela vous permet de créer des images plus petites qui aident à améliorer les performances du site Web.
La compression sans perte signifie que toutes les données de l'image restent après sa décompression. D'autre part, la compression avec perte réduit la taille du fichier en éliminant définitivement des informations du fichier image.
L'une des caractéristiques remarquables de WebP est qu'il prend en charge les images animées, ce qui n'est pas possible avec PNG ou JPEG. Cela fait également de WebP une excellente alternative aux GIF.
WordPress a introduit la prise en charge du format d'image WebP avec la version 5.8. Auparavant, vous deviez installer un plugin WordPress pour utiliser les images WebP dans WordPress.
Tous les navigateurs web modernes, y compris Google Chrome, Firefox, Safari, Edge, et plus encore, prennent en charge le format d'image WebP. De nombreux outils d'édition d'images prennent également en charge WebP et vous permettent d'exporter des images dans ce format.
WebP a également des capacités similaires à PNG. Vous pouvez obtenir le même niveau de transparence dans les images WebP qu'avec PNG.
Avantages :
- Offre des tailles de fichiers plus petites par rapport à PNG et JPEG
- Pris en charge par les navigateurs web populaires
- Obtenez le même niveau de transparence dans les images qu'avec PNG
- Prend en charge la compression avec perte et sans perte
- Vous permet de créer des images animées
Inconvénients :
- Bien que WordPress prenne en charge les téléchargements WebP, un plugin d'optimisation est le meilleur moyen de convertir automatiquement vos images existantes et de servir des solutions de repli pour les anciens navigateurs.
- Certains très anciens navigateurs web ne prennent pas en charge WebP, mais les plugins d'optimisation d'images ou de mise en cache peuvent automatiquement servir un JPEG ou un PNG en guise de solution de repli.
Qu'est-ce que PNG ?
Portable Network Graphics (PNG) est l'un des formats d'image les plus populaires sur Internet. Il prend en charge des millions de couleurs, de sorte que les images sont plus nettes et plus réalistes.
Le principal avantage de l'utilisation de PNG est son algorithme de compression sans perte. Lorsqu'une image est compressée, elle ne perd aucune donnée ni qualité. Cela fait de PNG un excellent format pour votre site web WordPress si vous avez besoin d'une taille de fichier image plus petite et que vous souhaitez préserver les détails fins de l'image.
Un autre avantage de l'utilisation du PNG est qu'il prend en charge les arrière-plans transparents. C'est pourquoi vous trouverez de nombreux fichiers de logo de sites Web et d'autres éléments au format PNG.
Par exemple, voici un logo pour WPBeginner qui est au format PNG.
Avantages :
- Il ne perd pas la qualité de l'image lorsqu'elle est compressée
- Peut avoir des tailles de fichier plus petites que le JPEG pour le bon type d'image (comme les logos et les graphiques avec des couleurs unies)
- Offre une transparence d'image de haute qualité
- Pris en charge par tous les principaux navigateurs et outils d'édition d'images
- Format idéal pour les logos et les graphiques avec des lignes nettes et des couleurs unies
- Prend en charge la compression sans perte
Inconvénients :
- Il ne prend pas en charge la compression avec perte
- Crée des fichiers très volumineux pour les images complexes et riches en couleurs comme les photographies
Qu'est-ce que le JPEG ?
JPEG, abréviation de Joint Photographic Experts Group, est un format d'image créé en 1986. C'est le format d'image standard pour de nombreux appareils, y compris les appareils photo numériques et les smartphones. De nombreux constructeurs de sites Web WordPress et plugins de galerie d'images prennent également en charge les images JEPG.
L'un des avantages de l'utilisation du JPEG est qu'il offre des images vives et contient des millions de couleurs. Tous les navigateurs Web prennent en charge ce format, et la taille des images est relativement petite.
Par exemple, voici une image d'un papillon au format JPEG. Elle présente de nombreuses couleurs et de nombreux détails, qui ne sont pas aussi perceptibles dans d'autres formats d'image.
Le JPEG est souvent le meilleur format si vous avez des images complexes avec de nombreuses couleurs. Dans l'image JPEG ci-dessus, les couleurs sont vives et proéminentes.
Cependant, le JPEG utilise une compression avec perte, ce qui signifie qu'une partie de la qualité de l'image est perdue lorsque le fichier est réduit. Cette perte de qualité n'est généralement pas perceptible sur les photographies, mais peut être plus évidente sur les images avec des lignes nettes ou du texte.
En outre, les images JPEG sont facilement convertibles. Vous pouvez les transformer en tout autre format, y compris PNG et WebP.
Avantages :
- Il prend en charge des millions de couleurs
- Excellent format pour les images complexes et riches en couleurs
- Hautement convertible en d'autres formats d'image
- Pris en charge par les navigateurs Web et les outils d'édition d'images populaires
Inconvénients :
- Il perd des détails d'image après compression
- Il ne prend pas en charge les images superposées
- Il n'y a pas de prise en charge de la transparence des images
WebP vs PNG vs JPEG – Taille des fichiers image
En ce qui concerne la comparaison entre WebP, PNG et JPEG pour la taille des fichiers image, cela dépend beaucoup du niveau de compression que vous choisissez lors de l'optimisation de l'image.
Cela dit, les images WebP sans perte sont généralement 26 % plus petites que les PNG. De même, lors de la comparaison entre les images WebP et JPEG avec perte, les images WebP sont 25 à 34 % plus petites que les JPEG.
Par exemple, une comparaison de Google Developers montre une différence significative dans la taille des fichiers image entre les formats JPEG et WebP.
Cela montre que les images WebP sont beaucoup plus petites en taille de fichier par rapport aux PNG et JPEG. Avec une taille de fichier image plus petite, vous pouvez améliorer la vitesse de votre WordPress et garantir que les pages web se chargent plus rapidement.
En conséquence, vous verrez également une amélioration du SEO WordPress. Google considère la vitesse de chargement des pages comme un facteur de classement. Si votre site se charge rapidement, vous aurez un avantage sur les sites à chargement plus lent.
WebP vs PNG vs JPEG – Qualité de l'image
Choisir le meilleur format d'image pour WordPress en fonction de la qualité de l'image dépendra du type de votre site web.
Par exemple, si vous êtes un photographe qui publie des images riches en couleurs sur votre site WordPress, alors le JPEG est le meilleur format d'image à utiliser. Les images JPEG ont un taux de compression élevé et aident à conserver les données de couleur.
D'autre part, si vous publiez des captures d'écran ou des images individuelles qui ont des couleurs minimales, alors vous feriez mieux d'utiliser le format PNG. Le PNG offre des images de haute qualité et fonctionne parfaitement pour les images complexes et simples.
Le format WebP fonctionnera si vous souhaitez compresser des images sur votre site afin de maintenir de hautes performances. Si vous comparez WebP et JPEG, WebP obtient en moyenne 30 % de compression en plus que JPEG.
Pour les portfolios de photographie ou de conception graphique, WebP est souvent le meilleur choix. Il peut réduire considérablement la taille des fichiers par rapport au JPEG avec très peu, voire aucune différence notable en termes de qualité. Cela signifie que vos images de portfolio haute résolution se chargeront beaucoup plus rapidement pour les visiteurs.
Quel est le meilleur format d'image pour WordPress ?
Après avoir comparé WebP, PNG et JPEG, le meilleur format d'image dépend vraiment de vos besoins.
WebP est un excellent format moderne qui sera bientôt utilisé par presque tous les sites Web. Lorsque nous comparons WebP et JPEG, WebP offre la plus petite taille de fichier image, ce qui économise de l'espace de stockage et améliore les temps de chargement du site Web. Étant donné que la plupart des navigateurs et outils modernes le prennent désormais en charge, c'est un excellent choix pour presque tous les sites.
D'autre part, JPEG est le meilleur format d'image pour les photographes professionnels et les propriétaires de sites qui ont besoin d'images aux couleurs précises.
PNG est le meilleur format pour partager des captures d'écran et d'autres images où il n'y a pas beaucoup de couleurs. C'est un format très polyvalent et offre des images de haute qualité avec une taille de fichier relativement faible.
Une règle générale rapide
Toujours pas sûr de votre choix ? Voici un résumé simple :
- Utilisez JPEG pour : La plupart des photographies et des images complexes avec beaucoup de couleurs et de dégradés.
- Utilisez PNG pour : Logos, icônes, images contenant beaucoup de texte et tout graphique nécessitant un arrière-plan transparent.
- Utilisez WebP pour : Presque tout ! C'est un excellent remplacement pour les JPEG (pour les photos) et les PNG (pour les graphiques), offrant la meilleure combinaison de qualité et de petite taille de fichier.
Conseils supplémentaires pour l'utilisation d'images dans WordPress
Les images jouent un rôle clé dans votre contenu, et de nombreux propriétaires de sites Web ne prennent pas le temps d'ajouter des images de qualité à leurs articles de blog et à leurs pages.
Outre le choix du bon format d'image pour WordPress, voici quelques conseils pour vous aider à créer des images étonnantes et à les optimiser pour les performances :
- Utilisez des plugins de compression d'images – Les images volumineuses peuvent ralentir votre site web. Vous devriez utiliser des plugins de compression d'images pour optimiser les images WebP, JPEG et PNG afin d'offrir des performances rapides.
Astuce d'expert : Chez WPBeginner, nous automatisons une grande partie de notre optimisation d'images. Nous utilisons des services comme Cloudflare, qui sert automatiquement des images WebP plus petites aux navigateurs compatibles. Nous utilisons également un plugin de mise en cache puissant comme WP Rocket pour garantir que nos images et nos pages se chargent le plus rapidement possible.
- Ajoutez du texte alternatif aux images – Le texte alternatif, ou texte de remplacement, est une balise d'image HTML qui décrit une image. Il permet aux robots des moteurs de recherche et aux utilisateurs de lecteurs d'écran de comprendre vos images. Lors de l'optimisation de votre site pour le SEO, l'ajout de texte alternatif à vos photos peut les aider à apparaître dans les résultats de recherche d'images.
- Sélectionnez la bonne taille d'image pour votre site – Souvent, les débutants ne savent pas quelle taille d'image ils devraient utiliser pour leurs sites web. Choisir la bonne taille assure la cohérence et une expérience utilisateur fluide.
- Utiliser un filigrane ou désactiver le clic droit – Si vous ne voulez pas que d'autres utilisent vos images sans permission, vous pouvez ajouter un filigrane et désactiver le clic droit sur les images. Pour en savoir plus, veuillez consulter notre guide sur la façon de prévenir le vol d'images dans WordPress.
Foire aux questions sur les formats d'image
Voici quelques-unes des questions les plus courantes que nous recevons concernant le choix du bon format d'image pour les sites Web WordPress.
Quel est le meilleur format d'image pour les logos ?
Le PNG est le meilleur format pour les logos. Il prend en charge les arrière-plans transparents, ce qui vous permet de placer votre logo sur différentes sections colorées de votre site sans boîte solide autour. Il utilise également une compression sans perte, gardant votre logo net et clair.
Puis-je convertir mes images JPEG et PNG existantes en WebP ?
Oui, vous pouvez facilement convertir vos images existantes au format WebP. De nombreux plugins WordPress, y compris des outils d'optimisation d'images, peuvent convertir automatiquement votre bibliothèque de médias et servir des images WebP aux navigateurs qui les prennent en charge.
Quel format d'image est le meilleur pour le SEO ?
Il n'y a pas un seul 'meilleur' format pour le SEO, mais l'objectif est d'utiliser des images avec la plus petite taille de fichier possible sans perte majeure de qualité.
Le WebP offre souvent le meilleur équilibre, ce qui contribue à améliorer la vitesse de chargement des pages, un facteur de classement Google connu. En fin de compte, une page à chargement rapide est ce qu'il y a de mieux pour le SEO.
Ressources supplémentaires sur les images WordPress
Maintenant que vous savez comment choisir le bon format d'image, voici quelques autres guides qui vous aideront à gérer et optimiser les images sur votre site WordPress.
- Guide pour débutants sur le SEO des images – Apprenez à optimiser correctement vos images pour attirer plus de trafic depuis les moteurs de recherche.
- Meilleurs plugins de compression d'images pour WordPress – Découvrez les meilleurs outils pour optimiser automatiquement les images afin d'améliorer les performances.
- Comment empêcher le vol d'images dans WordPress – Protégez vos images originales contre toute utilisation sans votre permission.
- Guide pour débutants sur les tailles d'images WordPress – Comprenez comment WordPress gère les différentes tailles d'images et comment les utiliser correctement.
- Comment choisir le meilleur logiciel de conception web – Trouvez le bon logiciel pour créer et éditer vos images avant de les télécharger.
Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.
Suman Sourabh
Je trouve que les images WebP sont les plus appropriées car elles sont de petite taille et font un travail décent pour les images dans un article de blog. Le site reste rapide également.
Oyatogun Oluwaseun Samuel
C'est un travail fantastique ! J'utilise souvent WebP dans certains de mes projets mais je ne comprends pas vraiment comment il se compare à d'autres formats d'image comme PNG et JPEG. Cet article fait un excellent travail pour me faire comprendre. La comparaison détaillée des forces et faiblesses de chaque format est particulièrement utile. Je commence à apprécier les capacités de compression supérieures de WebP et son support pour la compression avec perte et sans perte, ce qui peut améliorer considérablement les performances du site Web. Les conseils pratiques sur quand utiliser chaque format en fonction des besoins spécifiques ajoutent une grande valeur. Merci pour cet article clair et informatif.
Dennis Muthomi
Eh bien… je télécharge généralement mes images au format PNG, puis mon plugin de mise en cache les convertit automatiquement en WebP.
J'adore cette configuration car les images WebP sont si légères, ce qui améliore considérablement la vitesse et les performances de mon site web.
Et si un navigateur ne prend pas en charge WebP, le plugin affiche simplement la version PNG à la place comme solution de repli. J'ai constaté que cette configuration offre une excellente vitesse sans sacrifier la compatibilité.
Jiří Vaněk
Salut Dennis. Je cherche exactement la même solution qui m'a été conseillée ici sur wpbeginner. Puis-je vous demander quel plugin vous utilisez pour convertir en .webp ? Cela m'aiderait beaucoup à trouver la même solution que vous décrivez.
Mrteesurez
Merci d'avoir partagé ce qui fonctionne pour vous.
Je suis curieux de connaître le plugin de mise en cache que vous utilisez pour convertir automatiquement le format PNG en WebP. J'ai identifié l'importance du format WebP et je veux l'utiliser sur mon site. Le plugin me fournira également un format PNG de repli sur les navigateurs non pris en charge.
Jiří Vaněk
Salut Mrteesurez,
J'utilise actuellement le plugin Imagify à cette fin. Il fait exactement ce que Dennis décrit. Vous devriez absolument l'essayer. Grâce à lui, j'ai des PNG convertis en WebP sur mon site et une prise en charge des anciens types de navigateurs. Cela fonctionne très bien.
Mrteesurez
Merci de votre intérêt. J'apprécie que vous partagiez la solution qui a fonctionné pour vous. Je vais certainement l'explorer pour voir si elle répond à mes besoins, en particulier pour convertir automatiquement les images PNG en WebP comme solution de repli sur mon site Web. Assurer des formats d'image optimaux est crucial pour les performances et l'expérience utilisateur, donc trouver une méthode fiable pour cette tâche est une priorité pour moi.
Jiří Vaněk
Concernant la question du meilleur format pour WordPress. Est-il préférable de n'uploader que du WebP sur le site en raison de sa taille et de sa vitesse de chargement, ou est-il préférable d'uploader du PNG puis de le convertir en WebP à l'aide d'un plugin ? Ma préoccupation est que je n'aie que du WebP sur mon site. Cependant, on m'a alerté que ce n'est pas la meilleure pratique pour les situations où quelqu'un visite mon site Web en utilisant un très vieux navigateur pour une raison quelconque. Par conséquent, leur navigateur ne prendrait pas en charge ce format, ce qui signifie qu'ils ne verraient pas les images sur mon site Web. Par conséquent, j'ai pensé à utiliser du PNG avec un plugin qui servirait du WebP aux navigateurs plus récents et du PNG aux plus anciens.
Support WPBeginner
Si vous avez des utilisateurs qui utilisent d'anciens navigateurs pour consulter votre site, il serait bon d'avoir une image de repli, et le moyen le plus simple de le faire serait d'uploader le type de fichier que vous souhaitez que vos utilisateurs chargent et d'utiliser un plugin pour convertir en WebP qui configure la solution de repli pour vous.
Admin
Jiří Vaněk
C'est une bonne idée. J'ai d'abord converti l'image en webp, puis je l'ai téléchargée sur le site web. Je vais donc essayer l'inverse selon vos conseils. Télécharger jpeg ou png et seulement ensuite convertir à l'aide du plugin. Merci pour vos conseils.
A Owadud Bhuiyan
Autant que je sache, le format PNG est généralement utilisé pour les images transparentes.
Cependant, la majorité des gens ont tendance à utiliser JPEG.
Ai-je raison ?
Support WPBeginner
You are correct, that that is how the image formats are currently used
Admin
Ralph
J'ai entendu parler de cette tendance webp il y a des années mais je n'y ai jamais prêté attention. Je sais que plus le site web est rapide, mieux c'est. Cependant, n'est-ce pas se battre pour des rendements décroissants ?
Tous mes jpegs pour les photos des articles principaux du blog font 1920×1280 et sans aucune optimisation, ils pèsent entre 150 et 250 ko, la plupart autour de 220 ko. J'utilise une résolution plus grande, car les écrans s'améliorent de plus en plus, donc je n'ai pas à les mettre à jour à l'avenir.
Je sais qu'en webp ces mêmes images pourraient être de taille plus petite. Peut-être 150 Ko ? 120 Ko ?
En tenant compte du fait que nous avons une connexion Internet de plus en plus performante et rapide dans le monde entier, et que dans mon pays Internet était bon il y a des années et que l'infrastructure est vraiment bonne, est-ce vraiment la peine ?
Je dois passer beaucoup de temps à convertir chaque jpg en webp, mais je ne vois pas d'amélioration RÉELLE (en dehors des applications de test de sites web).
J'aimerais pouvoir faire cela en 5 minutes, mais est-ce que ces 70 ko de moins en valent vraiment la peine ?
Support WPBeginner
Une chose à considérer est que les utilisateurs de données mobiles peuvent ne pas avoir la meilleure connexion pour les images plus volumineuses. Pour déterminer si ce changement en vaut la peine, la seule personne qui peut décider si c'est juste pour votre site, c'est vous, car il s'agit actuellement d'une nouvelle option disponible mais pas d'une exigence.
Admin
Piotr Z
Votre discussion sur les photos et les sites web m'a fait réfléchir car j'ai récemment lancé mon propre blog. Lorsque j'ai créé mon blog, je ne savais pas que le type d'images que j'utilisais pouvait affecter la vitesse de chargement du site web. J'ai donc fait quelques tests et j'ai découvert que mes photos « lourdes » causaient des problèmes. C'est à ce moment-là que j'ai appris les différences de formats en ce qui concerne les images.
JPEG est comme de la magie pour réduire la taille des images et accélérer les sites web. Il peut réduire les images beaucoup plus que les images ordinaires (comme PNG). J'ai utilisé des plugins de conversion pour m'aider avec cela, et cela a très bien fonctionné.
Maintenant, quand il s'agit de choisir entre WebP. Les outils populaires comme Canva, ou même certaines applications de téléphone portable peuvent-ils convertir par défaut dans ce format ? Ou devrai-je trouver le plugin WP pour cela ?
Merci d'avoir expliqué ces choses importantes !
Support WPBeginner
Les outils d'édition d'images devraient normalement avoir un moyen de créer une image WebP, nous n'avons pas testé les applications mobiles pour cette fonctionnalité.
Admin
Ahmed Omar
Merci pour l'explication détaillée.
En fait, je rencontrais ce problème avec les images WebP, et je me demandais ce qu'était WebP.
Maintenant, c'est clair, et je peux même en tirer parti.
Mais voici ma question : puis-je changer les JPEG et PNG en WebP ? Et comment puis-je le faire ?
Merci
Support WPBeginner
There are a few tools available to convert it for you, for a starting point we would recommend taking a look at our article below
https://www.wpbeginner.com/wp-tutorials/how-to-use-webp-images-in-wordpress/
Admin
Akpobor Joseph
Merci, WPBeginner pour cet article. J'ai justement terminé une recherche rapide sur ce sujet avant de voir cette notification. Honnêtement, votre équipe m'aide beaucoup dans mon parcours en ligne.
J'apprécie vraiment votre bon travail.
Support WPBeginner
You’re welcome, glad our guide was helpful and we hope our team and articles continue to be helpful to you
Admin