Convertir des photos en WebP et AVIF en ligne : accelerer le site et ameliorer le SEO

En studio, nous preparons chaque jour des images pour des sites et des marketplaces et nous voyons a quel point le bon format change la vitesse de chargement. Dans cet article, sans eau, nous expliquons ce que sont WebP et AVIF, quand prendre quel format, comment ils influencent le SEO et comment convertir une photo en ligne en une minute.

Sur un site typique, les images representent de 50 a 70 % du poids total de la page. Ni les scripts, ni les polices, ce sont bien les images qui tirent vers le bas le trafic et le temps de chargement. Quand nous optimisons des projets, la premiere chose que nous regardons, c est dans quel format sont posees les photos. Et presque toujours, on y trouve le bon vieux JPEG ou, pire, un PNG lourd de 2 a 3 megaoctets. Les formats modernes WebP et AVIF reglent ce probleme a la racine : ils montrent la meme image, mais pesent une fois et demie a deux fois moins. Moins de poids veut dire chargement plus rapide, meilleures metriques de comportement et meilleures positions dans les moteurs de recherche. Ci-dessous, nous detaillons : de combien exactement les nouveaux formats sont plus legers, comment ils influencent les Core Web Vitals et le SEO, quels navigateurs les prennent en charge, quand utiliser quoi et comment convertir tout cela sans Photoshop ni ligne de commande.

WebP est un format de Google, apparu en 2010. Il utilise l algorithme de compression du codec video VP8 et sait travailler aussi bien avec perte de qualite (a la place du JPEG) que sans perte (a la place du PNG). Sa propriete principale : a qualite visuellement egale, un fichier WebP pese en moyenne 25 a 35 % de moins qu un JPEG et 25 a 30 % de moins qu un PNG. En bonus, WebP prend en charge la transparence (canal alpha) et l animation, il peut donc aussi remplacer le GIF, avec un gain de poids considerable.

AVIF est un format plus jeune base sur le codec video AV1, ouvert et gratuit. Il compresse plus agressivement que WebP : sur les memes photographies, AVIF donne des fichiers 40 a 50 % plus legers qu un JPEG, parfois davantage. AVIF tient mieux les degrades (ciel, fond flou, peau), ne donne presque pas les artefacts carres caracteristiques et prend en charge une plage dynamique etendue (HDR, couleur sur 10 a 12 bits). La contrepartie : l encodage AVIF est plus lent, et les vieux appareils et navigateurs ne le comprennent pas.

Pour rendre cela plus parlant, voici des chiffres typiques de notre pratique. Une photo de produit de 1200 sur 1200 pixels :

• JPEG qualite 85 pese environ 280 a 350 Ko ;
• WebP de la meme qualite visuelle pese 180 a 230 Ko, une economie d environ 30 % ;
• AVIF pese 130 a 170 Ko, une economie de 45 a 55 %.

Sur une page de catalogue avec 30 a 40 images de ce type, la difference passe des kilooctets aux megaoctets, et l utilisateur en connexion mobile le sent aussitot. Nuance importante : l economie depend du contenu. Sur des photos complexes et detaillees (texture de tissu, feuillage), le gain est moindre ; sur des images simples aux aplats et degrades, il peut au contraire atteindre 70 %. Nous conseillons donc de ne pas croire les promesses moyennes, mais simplement de passer vos vrais fichiers dans un convertisseur et de comparer le poids. Cela se fait en ligne en une minute : vous chargez un JPEG, obtenez les deux formats et voyez vous-meme combien pese chacun.

La vitesse du site n est pas un confort abstrait, mais un facteur de classement direct. Les moteurs de recherche tiennent compte de la rapidite et de la stabilite de chargement d une page. Google a formalise cela dans un jeu de metriques, les Core Web Vitals, et les images influencent presque chacune d elles.

LCP (Largest Contentful Paint), c est le temps d affichage du plus grand element de la zone visible. Sur la plupart des sites, cet element est justement une image : la banniere principale, la photo de produit, la couverture d un article. Plus ce fichier est leger, plus tot il s affiche. Remplacer un JPEG par un AVIF pour l image LCP retranche souvent 0,5 a 1,5 seconde sur mobile. Google considere comme bon un LCP jusqu a 2,5 secondes, et c est souvent le passage de la photo principale au format moderne qui sort la page de la zone rouge vers la verte.

CLS (Cumulative Layout Shift), c est le decalage de la mise en page pendant le chargement. Le format d image en soi n influence pas le CLS, mais une habitude liee compte : indiquez toujours les attributs width et height de la balise img, pour que le navigateur reserve la place a l avance. Des AVIF legers chargent plus vite, le contenu se fixe plus tot, il y a moins de sauts.

INP et reactivite generale gagnent indirectement : moins d octets a charger veut dire moins de charge sur le reseau et le processeur, surtout sur les smartphones d entree de gamme.

Ce que cela donne pour le SEO en pratique :

• la page entre dans la zone verte des Core Web Vitals, un plus pour le classement dans les resultats mobiles ;
• un taux de rebond plus bas, parce que les gens ne quittent pas une page lente avant son chargement ;
• une meilleure indexation, le robot parcourt plus facilement un site leger dans son budget de crawl ;
• une conversion plus elevee, selon les etudes chaque 100 ms de chargement en trop rogne sensiblement les ventes.

Notons a part une erreur frequente : les gens mettent du WebP, mais oublient le chargement paresseux (loading="lazy") pour les images sous le premier ecran et le fetchpriority="high" pour l image LCP principale. Le format et ces attributs fonctionnent ensemble. Et encore : ne compressez pas jusqu a rendre les artefacts visibles a l oeil, la sur-optimisation nuit a la confiance dans le produit autant qu un chargement lent. Quand il faut tenir une limite precise, par exemple 200 Ko pour les exigences d une plateforme, il est plus pratique de passer par une compression de photo dediee.

La question principale des webmasters : le site ne va-t-il pas casser pour une partie des visiteurs. Reponse par les faits, a l horizon 2026.

WebP est pris en charge par absolument tous les navigateurs actuels : Chrome, Firefox, Safari (depuis la version 14, soit 2020), Edge, Opera, ainsi que les navigateurs mobiles sur Android et iOS. La couverture depasse globalement 97 % de l audience. En pratique, cela veut dire que WebP peut etre servi a tous sans arriere-pensee, le risque de croiser un utilisateur sans prise en charge est minime.

AVIF est plus jeune, mais deja massivement pris en charge : Chrome et Edge depuis 2020, Firefox depuis 2021, Safari depuis la version 16 (2022). La couverture globale est d environ 93 a 95 % et continue de croitre. Ne prennent pas en charge AVIF seulement les versions tres anciennes de navigateurs et certains environnements d entreprise restes sur des systemes obsoletes.

La bonne approche, qui leve entierement la question de la compatibilite, c est la balise picture avec plusieurs sources. Le navigateur choisit lui-meme le premier format qu il comprend et retombe sur le JPEG s il ne prend rien de nouveau en charge. Le principe est le suivant :

• on propose d abord au navigateur une source en AVIF ;
• s il ne comprend pas, on propose une source en WebP ;
• s il ne la comprend pas non plus, on charge une img ordinaire en JPEG comme repli.

Avec ce schema, les navigateurs modernes recoivent le format le plus leger, et les anciens voient le JPEG habituel sans rien casser. C est le standard de reference, et nous le recommandons justement pour les sites commerciaux ou chaque pour cent d audience compte.

A part, un mot sur les plateformes et services ou vous chargez des photos au lieu de les servir depuis votre serveur. La, tout est plus strict :

• les marketplaces comme Amazon, eBay et Leboncoin acceptent le JPEG et le PNG dans les fiches produit, on ne peut pas y charger de WebP ni d AVIF. Ces formats sont pour votre propre site, pas pour la marketplace ;
• les portails administratifs et officiels attendent eux aussi du JPEG ou du PNG en resolution et poids donnes ;
• les reseaux sociaux et messageries recompressent eux-memes ce que vous chargez, il est donc inutile de leur donner de l AVIF.

Conclusion simple : WebP et AVIF sont un outil pour votre site, votre landing, votre blog. Pour les marketplaces et les portails officiels, gardez du JPEG a la bonne taille.

Il existe plusieurs facons, voyons-les de la plus rapide a la plus complexe, en signalant tout de suite les pieges.

Methode 1 : convertisseur en ligne (recommande pour la plupart)

La voie la plus rapide, sans installer de logiciel ni connaitre la console. Marche a suivre :

• ouvrez un outil de conversion en WebP et AVIF ;
• glissez-y une photo ou un dossier de photos ;
• choisissez le format (les deux d un coup, possible) et le niveau de qualite ;
• telechargez le resultat et comparez le poids avec la source.

Cela prend moins d une minute et convient quand il faut preparer une dizaine d images pour un article ou une landing. Les fichiers sont traites directement dans le navigateur, les originaux ne partent nulle part.

Methode 2 : outils de construction du site

Si vous avez un CMS ou un generateur statique, il existe le plus souvent un plugin ou un module qui sert lui-meme du WebP et de l AVIF et pose la balise picture. C est la bonne voie pour un grand site aux milliers d images, car la conversion se fait automatiquement au chargement.

Methode 3 : ligne de commande

Pour les developpeurs, il existe les utilitaires cwebp et avifenc, qui lancent une conversion par lot par script. Puissant, mais cela demande de la competence et du temps de configuration.

Maintenant, les erreurs frequentes que nous rencontrons sans cesse :

• Conversion depuis un JPEG deja compresse. Si la source est surcompressee, le WebP ne fera que figer les artefacts au lieu de les enlever. Prenez l original de qualite maximale ;
• Qualite trop basse pour le poids. Une qualite de 60 et moins donne de la salete et du flou, surtout sur le texte et les logos. Le couloir optimal pour la photo est 75 a 85 ;
• Remplacer un PNG a transparence par un JPEG. Le JPEG ne sait pas gerer la transparence, le fond deviendra blanc. Pour les images transparentes, prenez du WebP ou de l AVIF sans perte ;
• Absence de repli. Vous n avez pose que de l AVIF sans balise picture, et une partie des utilisateurs voit des trous a la place des images ;
• Oubli des metadonnees. L EXIF ajoute du poids inutile et revele parfois la geolocalisation. Avant publication, il vaut mieux nettoyer ces donnees.

Un convertisseur en ligne couvre 90 % des taches : passer une dizaine de photos en WebP, compresser une banniere, preparer des images pour un article. Mais il y a des cas ou il vaut mieux confier le travail. Le premier, ce sont les grands catalogues : quand vous avez des centaines ou des milliers de photos de produits et qu il faut non pas seulement convertir, mais aussi detourer le fond, aligner sur une grille, ajouter des ombres et de l infographie. La, un travail manuel a la chaine sans perte de qualite prime sur la vitesse d un clic. Le deuxieme, ce sont les sources complexes : cliches surexposes, troubles, pris au telephone en mauvaise lumiere, qu il faut rattraper en couleur et en nettete avant conversion, sinon le format leger ne fera que figer le rebut. Le troisieme, c est quand il faut un resultat stable en flux et qu on n a pas le temps de s occuper des balises picture, du repli et des reglages de qualite.

Tirons un trait. WebP est plus leger que le JPEG d environ 25 a 35 %, AVIF de 40 a 50 %, et les deux formats sont deja pris en charge par presque tous les navigateurs. Passer les images aux formats modernes ameliore directement le LCP et les autres Core Web Vitals, ce qui aide les positions dans la recherche, reduit les rebonds et remonte la conversion. Pour votre propre site, utilisez picture avec la chaine AVIF, WebP, JPEG, pour obtenir a la fois legerete et compatibilite. Pour les marketplaces et les portails officiels, gardez du JPEG au bon poids. Ne courez pas apres la taille minimale au detriment de la qualite, tenez la qualite dans le couloir 75 a 85 et nettoyez l EXIF. Et surtout, ne remettez pas a plus tard : vous pouvez verifier le gain des maintenant, en passant vos photos dans un convertisseur et en voyant en une minute a quel point vos pages deviendront plus legeres.

Convertir les images ne suffit pas, il importe de les brancher de facon que le site s ouvre chez tous. L approche moderne, c est la balise picture avec plusieurs sources : le navigateur choisit lui-meme le format le plus leger qu il comprend, et s il ne comprend pas le nouveau, il prend le JPEG de repli. Le schema est simple : on indique d abord une source AVIF, puis une source WebP, et a la fin une img ordinaire en JPEG comme repli fiable.

Ainsi, un visiteur sur navigateur recent recoit un AVIF leger, un visiteur sur navigateur plus ancien un WebP, et sur un tout vieux ou dans de rares clients, il voit un JPEG sans rien casser. Ne supprimez pas les JPEG d origine, ils servent de repli. Beaucoup de moteurs et de plugins savent servir du WebP automatiquement, en substituant le format a la volee selon le navigateur, ce qui est commode pour les grands sites. Regle principale : le nouveau format doit accelerer, pas casser l affichage des images pour une partie de l audience, le repli est donc obligatoire.

WebP et AVIF resolvent la meme tache, mais differemment. WebP est nettement plus leger que le JPEG, pris en charge par quasiment tous les navigateurs actuels et rapide a encoder, c est un choix de travail fiable aujourd hui. AVIF compresse encore plus fort, surtout sur les photos aux degrades doux, et donne une meilleure qualite a poids moindre, mais encode plus lentement et est un peu moins bien pris en charge dans les versions les plus anciennes.

Le choix pratique est le suivant : si vous voulez une compatibilite maximale et de la simplicite, prenez du WebP a une qualite d environ 80 %, c est deja moins trente a quarante pour cent de poids par rapport au JPEG sans difference visible. Si vous courez apres la vitesse maximale et acceptez un reglage un peu plus complexe, ajoutez l AVIF en premiere source a une qualite d environ 50 a 60 %, son echelle de qualite est decalee et de telles valeurs donnent une image excellente. L optimal est de servir les deux formats via picture, alors chaque navigateur recoit le meilleur de ce qu il sait. Ne poussez pas la qualite a zero pour le poids, l economie cessera de valoir la perte de nettete.

Les nouveaux formats sont bons sur votre propre site, mais il y a des endroits ou ils poseront probleme. Les marketplaces acceptent les photos de produit en JPEG et PNG, et ne prennent souvent pas en charge WebP et AVIF au chargement, preparez donc les fiches en JPEG. Les portails administratifs, les documents et la plupart des formulaires officiels attendent aussi du JPEG ou du PNG. L envoi de photos a des proches par messagerie et par courriel est plus sur en JPEG, car WebP ne s ouvrira pas chez tout le monde.

Autre nuance : le traitement ulterieur et l impression. Tous les editeurs et imprimeurs ne sont pas a l aise avec l AVIF, pour ces taches gardez les sources dans les formats habituels. Regle simple : WebP et AVIF pour servir les images aux visiteurs de votre site, ou vous controlez le branchement et le repli, et tout ce qui part vers des systemes externes et vers les gens, servez-le en JPEG ou PNG. Vous aurez alors la vitesse la ou elle importe et la compatibilite la ou elle est critique.

• Pas de JPEG de repli. Les images ne sont servies que dans le nouveau format, et chez une partie des visiteurs elles ne chargent pas. Laissez toujours un repli via picture.
• Chargement de WebP sur une marketplace. La plateforme n accepte pas le format, la fiche echoue. Pour les marketplaces, uniquement JPEG et PNG.
• Compression extreme. La qualite est poussee au plancher pour le poids, des artefacts apparaissent. Gardez un equilibre raisonnable autour de 80 % pour le WebP.
• Conversion depuis une source floue. Le nouveau format n ameliorera pas une photo deja gachee, il la conservera seulement plus legere. Convertissez depuis un original de qualite maximale.
• Double compression. Un JPEG surcompresse est transcode en WebP, empilant les artefacts. Partez de la source de qualite maximale.

De combien WebP est-il plus leger que le JPEG ?

A qualite comparable, WebP est d ordinaire 25 a 35 % plus leger que le JPEG, et AVIF encore plus leger. Sur un grand site, cela accelere nettement le chargement et ameliore les indicateurs de vitesse.

Tous les navigateurs ouvrent-ils le WebP ?

Quasiment toutes les versions actuelles de Chrome, Firefox, Safari et Edge prennent en charge le WebP. AVIF est un peu moins bien pris en charge dans les versions les plus anciennes, le JPEG de repli reste donc necessaire.

WebP ameliore-t-il les positions dans la recherche ?

Le format ne classe pas directement, mais il accelere le site, et la vitesse est un facteur de classement et de confort. Les pages rapides sont mieux indexees et retiennent le visiteur.

Peut-on charger du WebP sur les marketplaces ?

Non, les marketplaces attendent du JPEG et du PNG. Utilisez WebP et AVIF sur votre propre site, et preparez les fiches produit dans les formats pris en charge.

Pour une boutique en ligne, la vitesse de chargement, c est de l argent direct : chaque seconde d attente en plus reduit la conversion et augmente les rebonds, et le visiteur mobile en connexion faible part simplement. Les images constituent d ordinaire la part du lion du poids de la page, le passage du catalogue en WebP ou AVIF donne donc le gain de vitesse le plus visible. Des images plus legeres chargent plus vite, economisent le trafic de l acheteur et reduisent la charge sur votre serveur, ce qui compte en periode de pic de soldes.

On integre cela sur le site de la boutique via le service automatique de WebP avec JPEG de repli, pour que les images s ouvrent chez tous. Important, a ne pas confondre : il s agit bien de votre site, pas des fiches sur les marketplaces, ou les photos se chargent toujours en JPEG. Autrement dit, un meme produit, vous le servez aux visiteurs de votre boutique en WebP leger pour la vitesse, et aux marketplaces en JPEG pour la compatibilite. Ce double standard est normal et donne le meilleur des deux mondes : un site rapide et des fiches acceptees par les plateformes.

Configurer le WebP ne suffit pas, il faut s assurer que le navigateur recoit bien la version legere et non le vieux JPEG. Cela se verifie simplement via les outils de developpement du navigateur. Ouvrez la page, appuyez sur F12, allez dans l onglet Network, actualisez la page et regardez les images chargees : dans la colonne du type ou dans le nom du fichier doit figurer webp ou avif, pas jpeg. Si c est encore du JPEG, la substitution de format ne fonctionne pas et le reglage doit etre corrige.

Deuxieme repere : la taille des fichiers dans le meme onglet, la version WebP doit peser nettement moins que le JPEG d origine. Il est aussi utile de passer la page dans des services de test de vitesse, ils indiqueront directement si les images peuvent etre servies dans un format plus moderne et montreront l economie potentielle. Verifiez sur differents navigateurs, car le service depend de la prise en charge, et assurez-vous que sur un navigateur sans prise en charge du nouveau format, le JPEG de repli se charge correctement. Cette verification prend deux minutes et garantit que tout le travail de conversion accelere vraiment le site au lieu de rester lettre morte.

Les nouveaux formats savent faire plus que compresser legerement des photos, ce qui elargit leur usage. WebP comme AVIF prennent en charge la transparence comme le PNG, on peut donc servir un logo ou une image a fond transparent en WebP et obtenir a la fois la transparence et un faible poids, ce qu on ne peut pas obtenir d un JPEG. Pour les sites, cela veut dire que meme un graphisme a zones transparentes, autrefois garde en PNG lourd, peut desormais etre allege en conservant des bords soignes sur tout fond.

WebP sait aussi l animation, en remplacant plus legerement le format GIF vieillissant : un WebP anime pese bien moins pour une meilleure qualite et fluidite. C est utile pour de petites bannieres animees et des icones sur un site. Il faut cependant se souvenir du repli : la ou une partie de l audience peut etre sur un vieux navigateur, on garde quand meme un repli pour l animation et la transparence, que ce soit un PNG pour le statique ou un autre format pris en charge. Dans l ensemble, l alliance du faible poids, de la transparence et de l animation dans un meme format fait de WebP un outil universel pour le graphisme web, et AVIF y ajoute une compression photo encore plus forte.

Le passage massif a WebP et AVIF doit se faire avec soin, pour ne pas casser l affichage des images chez une partie des visiteurs. Commencez petit : prenez un modele de page ou une section, configurez le service de WebP avec JPEG de repli et assurez-vous, via les outils du navigateur, que la version legere charge bien et que sur un vieux navigateur le JPEG se substitue correctement. Ce n est qu une fois que tout fonctionne que vous etendez l approche a tout le site. Conservez les JPEG d origine, ils servent de repli et de base si vous devez regenerer les images dans un autre format ou une autre taille.

Sur un grand site, la conversion manuelle de chaque image est irrealiste, on branche donc d ordinaire un module ou un plugin qui cree les versions WebP automatiquement et les sert aux navigateurs compatibles, en gardant le JPEG pour les autres. Cela supprime le travail manuel et rend la migration transparente pour les gestionnaires de contenu, qui continuent de charger les JPEG habituels. Apres l integration, passez les pages cles dans des services de test de vitesse et verifiez que le poids des images a baisse et que les indicateurs de chargement se sont ameliores. Une migration progressive avec repli obligatoire donne tout le benefice de la vitesse sans risquer que des images disparaissent chez certains visiteurs.