{"id":457,"date":"2026-10-17T21:44:15","date_gmt":"2026-10-17T20:44:15","guid":{"rendered":"https:\/\/foldline.studio\/blog\/?p=457"},"modified":"2026-10-17T21:44:15","modified_gmt":"2026-10-17T20:44:15","slug":"images-web-avif-webp-jpeg","status":"publish","type":"post","link":"https:\/\/foldline.studio\/blog\/images-web-avif-webp-jpeg\/","title":{"rendered":"Images web\u00a0: choisir AVIF, WebP ou JPEG et pr\u00e9parer les bonnes tailles"},"content":{"rendered":"

Convertir toutes les images d\u2019un site dans un nouveau format ne garantit pas une am\u00e9lioration. Les images web demandent aussi les bonnes dimensions, des recadrages coh\u00e9rents et un chargement adapt\u00e9 \u00e0 leur place dans la page.<\/p>\n

Pr\u00e9parez une petite cha\u00eene de production : conserver l\u2019original, d\u00e9finir les usages, g\u00e9n\u00e9rer les versions n\u00e9cessaires, comparer le rendu et v\u00e9rifier le site. Cette m\u00e9thode \u00e9vite de choisir uniquement sur le poids annonc\u00e9 par un outil.<\/p>\n

Inventorier les emplacements avant la conversion<\/h2>\n

Listez les familles d\u2019images : couverture, vignette, photo produit, d\u00e9tail, illustration et logo. Notez la taille affich\u00e9e, le recadrage et le besoin \u00e9ventuel de zoom.<\/p>\n

Une photo destin\u00e9e \u00e0 un zoom produit n\u2019a pas les m\u00eames besoins qu\u2019une miniature de carte. Un logo contenant des formes simples peut demander une autre approche qu\u2019une photographie.<\/p>\n

Le guide photo produit<\/a> permet de pr\u00e9parer des originaux coh\u00e9rents. L\u2019optimisation web doit pr\u00e9server les d\u00e9tails n\u00e9cessaires au choix, pas seulement r\u00e9duire les octets.<\/p>\n

Comparer les formats sur les m\u00eames images<\/h2>\n
\n\n\n\n\n\n\n\n\n
Format<\/th>\nUsage \u00e0 \u00e9tudier<\/th>\nContr\u00f4le utile<\/th>\n<\/tr>\n<\/thead>\n
JPEG<\/td>\nPhotographies et compatibilit\u00e9 du flux existant<\/td>\nArtefacts, nettet\u00e9 et poids \u00e0 qualit\u00e9 acceptable<\/td>\n<\/tr>\n
WebP<\/td>\nPhotos ou images selon les capacit\u00e9s du site<\/td>\nRendu, transparence si n\u00e9cessaire et g\u00e9n\u00e9ration<\/td>\n<\/tr>\n
AVIF<\/td>\nImages pour lesquelles le flux le prend en charge<\/td>\nRendu, poids et co\u00fbt de traitement<\/td>\n<\/tr>\n
SVG<\/td>\nDessins vectoriels adapt\u00e9s, notamment certains logos<\/td>\nFichier ma\u00eetris\u00e9 et int\u00e9gration appropri\u00e9e<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n

La documentation des formats d\u2019image de MDN<\/a> d\u00e9taille leurs caract\u00e9ristiques. Le meilleur choix pour une famille d\u2019images se v\u00e9rifie dans votre cha\u00eene de production et sur les contextes d\u2019affichage vis\u00e9s.<\/p>\n

Ne comparez pas seulement des curseurs de qualit\u00e9 portant le m\u00eame nombre : leurs \u00e9chelles peuvent diff\u00e9rer selon les formats et les outils.<\/p>\n

Ajuster les dimensions \u00e0 l\u2019usage r\u00e9el<\/h2>\n

Une image affich\u00e9e dans un petit bloc ne doit pas syst\u00e9matiquement imposer le fichier destin\u00e9 au plein \u00e9cran. Pr\u00e9parez les variantes n\u00e9cessaires et v\u00e9rifiez comment le th\u00e8me les propose au navigateur.<\/p>\n

Les images responsives permettent de fournir plusieurs ressources selon la mise en page et les conditions de l\u2019appareil. Il faut aussi que les indications de tailles correspondent r\u00e9ellement au composant affich\u00e9.<\/p>\n

Conservez les dimensions intrins\u00e8ques et une mise en page qui r\u00e9serve l\u2019espace utile. Le chargement de l\u2019image ne devrait pas d\u00e9placer soudainement le texte ou les boutons voisins.<\/p>\n

Exemple p\u00e9dagogique : une m\u00eame photo sur deux composants<\/h2>\n

Imaginons une photo fictive utilis\u00e9e dans une grille de produits et dans une fiche avec zoom. Le site sert partout le plus grand fichier disponible.<\/p>\n

L\u2019\u00e9quipe d\u00e9finit une version pour la carte, une version pour la fiche et une ressource de zoom si le parcours la n\u00e9cessite. Elle compare les visuels sur les \u00e9crans pr\u00e9vus, puis mesure les fichiers r\u00e9ellement charg\u00e9s.<\/p>\n

Une r\u00e9duction obtenue sur une photo ne d\u00e9montre pas le m\u00eame gain sur tout le catalogue. Les textures, les transparences et les d\u00e9tails fins doivent \u00eatre examin\u00e9s sur un \u00e9chantillon repr\u00e9sentatif.<\/p>\n

Donner un chargement adapt\u00e9 \u00e0 la place de l\u2019image<\/h2>\n

Les images \u00e9loign\u00e9es dans la page peuvent \u00eatre charg\u00e9es selon une strat\u00e9gie diff\u00e9rente de l\u2019image importante visible d\u00e8s l\u2019arriv\u00e9e. La documentation web.dev sur le chargement diff\u00e9r\u00e9<\/a> explique les principes \u00e0 prendre en compte.<\/p>\n

\u00c9vitez d\u2019appliquer le m\u00eame r\u00e9glage partout sans regarder le r\u00e9sultat. L\u2019\u00e9quipe technique doit v\u00e9rifier les ressources d\u00e9couvertes, leur priorit\u00e9 et le comportement r\u00e9el de la page.<\/p>\n

Mesurez sur plusieurs pages repr\u00e9sentatives, avec des conditions coh\u00e9rentes. Une page de d\u00e9monstration tr\u00e8s l\u00e9g\u00e8re ne d\u00e9crit pas forc\u00e9ment une cat\u00e9gorie contenant beaucoup d\u2019images.<\/p>\n

Pr\u00e9server les informations utiles au r\u00e9f\u00e9rencement<\/h2>\n

Le nom du fichier, le contexte et le texte alternatif doivent d\u00e9crire le contenu lorsqu\u2019ils sont pertinents. Google documente les bonnes pratiques SEO pour les images<\/a>, notamment leur int\u00e9gration dans les pages.<\/p>\n

Le texte alternatif ne doit pas devenir une liste de mots-cl\u00e9s. Une image d\u00e9corative et une photo qui identifie une r\u00e9f\u00e9rence n\u2019ont pas le m\u00eame r\u00f4le.<\/p>\n

Apr\u00e8s livraison, v\u00e9rifiez les liens, les versions g\u00e9n\u00e9r\u00e9es, la nettet\u00e9 et les recadrages. Conservez les originaux pour pouvoir produire d\u2019autres formats sans repartir d\u2019une image d\u00e9j\u00e0 fortement compress\u00e9e.<\/p>\n

Questions fr\u00e9quentes<\/h2>\n

Faut-il convertir tous les JPEG en AVIF ?<\/h3>\n

Commencez par un \u00e9chantillon et v\u00e9rifiez les capacit\u00e9s du site. Le choix doit am\u00e9liorer le rendu et le chargement dans le flux r\u00e9ellement utilis\u00e9.<\/p>\n

Un faible poids prouve-t-il qu\u2019une image est bien optimis\u00e9e ?<\/h3>\n

Il faut aussi pr\u00e9server les informations visuelles utiles, la bonne taille et une int\u00e9gration correcte. Une miniature trop floue peut \u00eatre l\u00e9g\u00e8re et peu exploitable.<\/p>\n

Pr\u00e9parez vos types de pages et vos originaux pour organiser une optimisation des images de votre site<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"

Convertir toutes les images d\u2019un site dans un nouveau format ne garantit pas une am\u00e9lioration. Les images web demandent aussi les bonnes dimensions, des recadrages coh\u00e9rents et un chargement adapt\u00e9 \u00e0 leur place dans la page.<\/p>\n","protected":false},"author":1,"featured_media":458,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_fl_seo_title":"Images web : AVIF, WebP, JPEG et tailles utiles | Foldline","_fl_seo_desc":"Pr\u00e9parez vos images web : formats, dimensions, recadrages, qualit\u00e9 visuelle et chargement, avec un inventaire utile avant la conversion en lot.","_fl_noindex":false,"footnotes":""},"categories":[5],"tags":[],"class_list":["post-457","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-et-apps"],"_links":{"self":[{"href":"https:\/\/foldline.studio\/blog\/wp-json\/wp\/v2\/posts\/457","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/foldline.studio\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/foldline.studio\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/foldline.studio\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/foldline.studio\/blog\/wp-json\/wp\/v2\/comments?post=457"}],"version-history":[{"count":1,"href":"https:\/\/foldline.studio\/blog\/wp-json\/wp\/v2\/posts\/457\/revisions"}],"predecessor-version":[{"id":617,"href":"https:\/\/foldline.studio\/blog\/wp-json\/wp\/v2\/posts\/457\/revisions\/617"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/foldline.studio\/blog\/wp-json\/wp\/v2\/media\/458"}],"wp:attachment":[{"href":"https:\/\/foldline.studio\/blog\/wp-json\/wp\/v2\/media?parent=457"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/foldline.studio\/blog\/wp-json\/wp\/v2\/categories?post=457"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/foldline.studio\/blog\/wp-json\/wp\/v2\/tags?post=457"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}