Meilleur format d’image pour le Web : JPG, PNG, WebP ou AVIF ?

JPG, PNG, WebP et AVIF en bref

Consultez la référence MDN des formats d’image pour les propriétés techniques et la compatibilité. Un format pris en charge par les navigateurs n’est pas forcément accepté par chaque éditeur ou service.

Ce que préservent les compressions avec et sans perte

L’encodage avec perte modifie une partie des données des pixels pour réduire le fichier. Une petite modification de texture peut passer inaperçue dans une photo, mais gêner la lecture autour d’une lettre. La compression sans perte préserve les données de pixels qu’elle reçoit. Convertir en PNG un JPG déjà compressé ne restitue pas les détails perdus dans le JPG ; cela peut simplement agrandir le fichier.

WebP accepte les deux modes, comme l’explique la documentation WebP de Google. Le nom du format ne suffit pas à connaître le mode utilisé, et une qualité de 100 ne garantit pas un résultat sans perte. Conservez votre meilleure source et créez chaque version de diffusion à partir de celle-ci, sans enchaîner les conversions avec perte. Consultez le guide de la compression avec et sans perte pour comprendre la différence.

Photos : comparer WebP et AVIF au JPG actuel

La photo de montagne ci-dessous compare de véritables exports Pixilo. Le JPG fourni pèse 413,1 ko ; Pixilo a produit un WebP de 299,0 ko à la qualité 80 et un AVIF de 275,7 ko avec son préréglage de qualité 65. Les trois images font 1920 × 1440 pixels. WebP économise environ 28 % et AVIF environ 33 % par rapport à ce JPG. Dans cet exemple, l’AVIF est environ 8 % plus petit que le WebP.

Ces mesures portent sur des fichiers complets issus d’un seul JPG déjà compressé. Les échelles de qualité diffèrent selon le format et les exports n’ont pas été ajustés pour obtenir une qualité visuelle identique. Ce sont des exemples à examiner, pas un classement universel. Dans le comparateur, cherchez une texture rocheuse adoucie, des halos sur la ligne des sommets et des bandes dans le ciel uni. Jugez d’abord l’image entière à sa taille d’affichage prévue, puis utilisez la vue de détail pour vérifier les zones douteuses.

Recommencez avec une image représentative de votre site : un tissu pour une boutique ou un visage pour une page d’équipe. Créez les deux versions depuis la même source aux mêmes dimensions : JPG vers WebP et JPG vers AVIF pour une source JPG. Pour les autres sources, utilisez PNG vers AVIF ou WebP vers AVIF. Choisissez la plus petite version dont les détails restent satisfaisants ; conserver l’original convient aussi s’il répond déjà au besoin. Pour un lot important, tenez également compte du temps de conversion.

JPG originalWebP de Pixilo

Graphismes : préserver contours, texte et transparence

Les textes et schémas révèlent vite les défauts : une frange colorée autour d’une lettre ou une ligne d’un pixel interrompue peut compter davantage qu’une légère modification du paysage. Le graphique ci-dessous compare un PNG de 109,2 ko aux exports JPG, WebP et AVIF de Pixilo, tous en 960 × 640 pixels. L’AVIF ne pèse que 6,4 ko, mais ce gain n’est utile que si les plus petits textes et traits restent assez nets.

Changez de format et examinez les mêmes lettres et contours colorés dans la vue de détail. Revenez ensuite à l’image entière pour juger la taille de lecture normale. Ces exemples utilisent des conversions avec perte ; ce ne sont pas des tests WebP ou AVIF sans perte. Si une capture documente un prix, un message d’erreur ou un réglage logiciel, privilégiez un texte lisible et exact plutôt que le fichier le plus petit. Conservez le PNG si les autres versions échouent à ce test.

La transparence est une exigence distincte de la netteté : PNG, WebP et AVIF la prennent en charge, contrairement à JPG. Pour une photo de produit transparente, essayez PNG vers WebP et examinez son contour et son ombre sur des fonds clairs et sombres. Avant un export JPG, choisissez volontairement un fond uni. Le graphique opaque ci-dessous ne teste pas les contours transparents.

Si votre logo existe en SVG, conservez la source vectorielle. Le rasteriser uniquement pour le compresser peut faire perdre son avantage de mise à l’échelle nette. Les outils Pixilo traitent les types d’images indiqués sur chaque outil. Consultez le guide SVG et PNG pour décider quand conserver le format vectoriel et quand créer une copie PNG.

PNG originalJPG de Pixilo

Choisir les dimensions avant de chercher le fichier le plus léger

Partez de l’espace réellement occupé. Une photo affichée sur 600 pixels CSS pourrait justifier une version de 1200 pixels pour un écran à haute densité de pixels. C’est un exemple à tester, pas une règle universelle. Agrandir un petit original ne recrée pas les détails absents.

Doubler la largeur et la hauteur multiplie le nombre de pixels par quatre. Le poids du fichier ne quadruple pas forcément, mais l’encodeur doit représenter davantage de données. Choisissez d’abord le cadrage et les dimensions nécessaires, puis comparez les formats à dimensions égales pour distinguer le gain du redimensionnement de celui du changement de format.

Un site peut diffuser plusieurs tailles selon la mise en page avec des réglages tels que srcset et sizes. Préparez les variantes avec Redimensionner une image et consultez le guide des images responsives pour comprendre leur diffusion. Évitez un poids maximal identique pour toutes les images : une petite carte et un zoom produit détaillé répondent à des usages différents.

Vérifier aussi le chargement

Réservez l’espace de l’image pour éviter les sauts au chargement. Le chargement différé peut convenir aux images plus bas, mais retarder l’image principale visible. Les conseils LCP de Google recommandent de rendre l’image importante découvrable tôt et de ne pas différer l’image LCP.

Si un format de secours est nécessaire, configurez-le dans le code ou le CMS. Avec un élément picture, le navigateur choisit la première source correspondant aux formats qu’il accepte et aux autres conditions ; il ne compare pas tous les fichiers pour trouver le plus petit. Placez votre format testé préféré en premier et gardez un JPG ou PNG adapté en secours. Le guide picture de web.dev explique cette sélection.

Vérifiez l’image réellement servie sur la page publiée. Un CMS ou CDN d’images peut redimensionner ou réencoder votre envoi : les visiteurs reçoivent alors parfois un fichier différent de votre export Pixilo. Pixilo prépare les fichiers ; votre site gère leur diffusion. Un export plus petit ne corrige pas à lui seul une requête d’image tardive ou un serveur lent.

Avant de publier

• La destination accepte le format et l’extension est correcte.
• Les dimensions conviennent à la mise en page.
• Texte, visages et contours transparents restent satisfaisants.
• Le fichier est plus léger ou résout un vrai besoin de compatibilité.
• La page fonctionne en largeur réduite et l’image importante arrive vite.
• L’original est conservé pour les retouches futures.