Un CDN peut servir AVIF au premier navigateur, mettre la réponse en cache puis la renvoyer à un client qui ne sait pas la décoder. L’erreur inverse est plus discrète : une clé varie sur la totalité de l’en-tête Accept, le hit s’effondre et chaque nuance de navigateur crée une nouvelle représentation.
Le vrai enjeu consiste à négocier un petit nombre de formats avec une clé déterministe et un fallback toujours valide. Pour décider, l’équipe choisit explicitement entre sélection HTML avec picture, URL distinctes ou négociation serveur ; elle teste Content-Type, Vary, cache, transformation et comportement d’erreur.
Le risque apparaît quand le poids moyen baisse mais que le TTFB image ou les appels origine augmentent. Contre-intuitivement, une URL par format peut être plus simple et plus efficace qu’une URL élégante qui varie implicitement sur chaque requête.
Un audit de SEO technique et performance web rapproche HTML, en-têtes, CDN, encodage, logs, LCP et crawl Googlebot. Il vérifie que chaque client reçoit une image décodable sans transformer le cache en loterie.
Définir le contrat de format et de repli
Nommer les représentations autorisées
Le contrat liste AVIF, WebP et fallback JPEG ou PNG selon transparence et besoin. Chaque format possède qualité, chroma, animation éventuelle, plafond de dimensions et encodage. Le type choisi doit préserver l’usage visuel.
Le pipeline ne convertit pas aveuglément les logos, captures ou images déjà très compressées. Une version peut être plus lourde ou altérer les détails. L’encodage est comparé au fallback avant publication.
Définir l’ordre et la commande de retour
AVIF est préféré lorsque support et gain sont établis, WebP vient ensuite, puis le format universel. L’ordre est centralisé. Un gabarit ne doit pas choisir WebP avant AVIF tandis qu’un autre applique l’inverse.
Le rollback peut désactiver un format ou revenir aux URL explicites sans invalider tout le site. Il conserve les dérivés le temps des caches. Une purge ciblée protège l’origine d’une régénération en rafale.
Observer le support réellement servi
Distinguer support théorique et réponse
Une matrice de compatibilité aide à concevoir, mais les logs indiquent le format réellement envoyé, le navigateur, le statut et le cache. Un proxy, un bot ou une application embarquée peut présenter un en-tête différent du navigateur principal.
Le client n’a pas à exécuter JavaScript pour prouver son support. picture et Accept sont les mécanismes natifs. Une détection user-agent ajoute une base à maintenir et des erreurs de classification.
Conserver les cohortes rares
Les navigateurs minoritaires, webviews, lecteurs de flux et robots sont suivis séparément. Un taux d’erreur global de 0,05 % peut cacher 100 % d’échec sur une cohorte réduite mais importante. Dans ce cas, le seuil de cette cohorte bloque seul l’extension.
Le fallback est testé avec un client qui ne déclare ni AVIF ni WebP. Les crawlers obtiennent une ressource valide, stable et autorisée. La canonical HTML ne dépend pas du format d’image.
Choisir picture, extension ou négociation
Préférer picture pour une sélection visible
L’élément picture énumère des sources par type et garde img comme fallback. Le navigateur choisit sans ambiguïté et chaque URL possède une extension ou un identifiant de format. Le cache ne dépend pas de Accept.
Cette stratégie fonctionne bien lorsque le frontend contrôle le HTML et le nombre de candidats. Elle se combine avec art direction et srcset, mais augmente le balisage. Le preload doit suivre les mêmes règles.
Réserver la négociation aux URL stables
La négociation serveur conserve une seule URL logique et choisit la représentation selon une capacité normalisée. Elle peut simplifier un parc d’images existant, à condition que CDN et origine partagent la même clé.
Les URL explicites restent une option robuste pour API, emails, partage social ou consommateurs qui gèrent mal Vary. Une architecture peut combiner les stratégies par canal sans incohérence.
Interpréter Accept sans créer une infinité
Normaliser en une capacité finie
Avant toute recherche dans le cache, le CDN ou son worker de requête parse et canonicalise Accept, puis calcule une classe finie avif, webp ou fallback. Cette classe synthétique, et non la chaîne brute, entre dans la clé de lookup ; sur un miss, l’origine applique exactement le même sélecteur avant de choisir ou générer la représentation.
Le parser traite les valeurs absentes, les jokers, les poids q, les exclusions à q=0 et la préférence serveur en cas d’égalité. Il remplace une recherche de sous-chaîne fragile. Un éventuel en-tête interne de classe est supprimé à l’entrée puis recalculé par l’infrastructure de confiance, et la classe choisie est exposée dans les logs.
Éviter le user-agent parallèle
Ajouter une exception par navigateur contredit la négociation et double les dimensions. Si une cohorte annonce un support défectueux, le correctif reste temporaire, versionné et mesuré, avec une date de retrait.
Les requêtes internes, preloads et optimizers utilisent le même contrat. Une sous-requête qui omet Accept ne doit pas préchauffer uniquement le fallback puis masquer l’absence d’AVIF.
Concevoir Vary et la clé de cache CDN
Aligner le CDN sur la classe de format
Si la réponse varie selon Accept, l’en-tête Vary: Accept décrit le contrat aux caches HTTP en aval. La politique spécifique du CDN peut regrouper les valeurs brutes dans la classe synthétique pour préserver le hit, mais seulement si deux valeurs qui sélectionnent des formats différents produisent toujours des clés distinctes et si deux valeurs équivalentes peuvent partager la même représentation.
Si le CDN ne peut pas garantir cette équivalence avant lookup, il doit respecter la clé brute induite par Vary: Accept ou utiliser des URL de format explicites, jamais ignorer Vary. Les tests alternent clients capables et incapables, dans les deux ordres, afin qu’une réponse AVIF ne remplisse jamais la clé du fallback.
Borner les autres dimensions
Largeur, qualité, recadrage et format forment déjà plusieurs axes. Chacun utilise une liste autorisée. Cookies, langue ou campagne ne doivent pas varier une image publique sans nécessité.
La clé synthétique inclut version de l’asset, profil et classe de format, pas des paramètres libres. Les logs CDN exposent hit, classe et origine. Une chute du ratio ou une collision après ouverture signale une canonicalisation différente entre worker, clé et origine.
Borner encodage et transformations
Choisir pré-génération ou encodage à la demande
Les images critiques et profils connus sont encodés à la publication. Le premier visiteur ne paie pas le CPU et le pic de trafic ne déclenche pas des conversions concurrentes. Les variantes longues restent éventuellement à la demande.
L’encodeur possède file, timeout, quota et cache négatif. Une source invalide ne doit pas être retraitée à chaque requête. Le monitoring suit temps, erreurs et saturation par codec.
Comparer qualité et poids
Un même chiffre de qualité n’est pas comparable entre codecs. Des jeux d’images représentatifs sont inspectés sur détails, aplats, transparence et texte. Les seuils automatiques complètent une revue visuelle.
Si AVIF est plus lourd ou visiblement moins fidèle, le pipeline peut conserver WebP ou le fallback. Le format préféré n’est pas obligatoire pour chaque source. La décision est stockée avec la version.
Garantir JPEG ou PNG de repli
Conserver une représentation durable
Le fallback est généré, publié et recetté comme les formats modernes. Il ne pointe pas vers un original gigantesque simplement parce que peu de clients l’utilisent. Ses dimensions et son poids respectent le même profil.
PNG reste pertinent pour transparence ou détails sans perte ; JPEG pour photographie universelle. Le choix suit le contenu. Un fallback ne signifie pas qualité médiocre ni absence de cache.
Dégrader sans casser le parcours
Si l’encodeur moderne échoue, l’origine sert le fallback avec son vrai Content-Type et un statut valide. Elle ne renvoie pas une erreur à toute la page ni un fichier JPEG étiqueté AVIF.
Le mode dégradé est visible dans les logs et borné dans le temps. Une hausse du fallback signale une panne de pipeline ou un changement de trafic. L’équipe peut couper un codec sans purger les autres.
Aligner Content-Type, URL et validation
Servir le type réellement encodé
Content-Type correspond aux octets, même si l’URL ne contient pas d’extension. Les tests décodent la signature et vérifient l’en-tête. nosniff peut révéler rapidement une incohérence.
Les erreurs HTML d’un service de transformation ne doivent jamais être cachées comme images pendant une longue durée. Le CDN différencie statuts, types et cache-control. Une réponse de panne garde une TTL courte.
Versionner ETag et invalidation
Chaque représentation possède un validateur cohérent avec ses octets. Un ETag partagé entre AVIF et WebP peut faire répondre 304 à la mauvaise variante. La classe ou le contenu doit participer au calcul.
Les URL versionnées reçoivent une longue durée de cache et immutable lorsque le contrat le permet. Une modification de source change la version au lieu de purger toutes les images du site.
Mesurer format, hit et performance
Rendre la décision visible dans les logs
Chaque réponse expose en journal classe demandée, format servi, profil, hit CDN, taille, statut et temps d’origine. Les agrégats révèlent part AVIF, WebP, fallback et erreurs par client.
Les données ne stockent pas l’en-tête complet s’il ajoute une cardinalité inutile. La classe normalisée suffit au pilotage. Les URLs signées sont anonymisées si elles contiennent un identifiant sensible.
Relier format au LCP
Le RUM associe currentSrc, type, octets et LCP pour les images candidates. Une baisse de poids accompagnée d’un TTFB plus long peut annuler le gain. Cache et temps d’encodage sont donc observés.
Le tableau segmente mobile, route et cohorte. Il ne prétend pas qu’AVIF améliore chaque page. L’arbitrage cherche le document plus rapide avec un cache stable, pas un taux de format moderne maximal.
Arbitrer un cas entièrement simulé
Comparer deux clés fictives
Par exemple, imaginons 800 000 images fictives servies avec la chaîne Accept brute dans la clé. Le hit CDN tombe à 61 % et l’origine encode 340 variantes de représentation par minute. Le seuil d’alerte vient de la capacité mesurée ; ces nombres ne viennent d’aucun client ni de Dawap.
Dans ce scénario, une normalisation en trois classes remonte fictivement le hit à 94 %. Les images LCP passent de 210 à 145 Ko en médiane et leur TTFB p75 reste sous le seuil de 180 ms. Le fallback représente 8 % du trafic et demeure recetté.
Fixer les seuils de retour
Le canari s’arrête si les erreurs de décodage dépassent 0,1 %, si le hit baisse de 3 points ou si le TTFB image p75 progresse de 60 ms ; alors le trafic revient au fallback. Ce seuil empêche le format moderne de masquer une origine saturée.
Cas concret : si une webview reçoit AVIF sans le décoder, alors l’équipe classe d’abord la cohorte en fallback, conserve les traces et corrige la normalisation. Deux versions de webview et deux cycles de cache conformes autorisent la reprise.
Recetter navigateurs, bots et caches
Construire une matrice de requêtes
La CI envoie Accept AVIF, WebP, fallback, absent, joker et pondéré. Elle vérifie type, magie du fichier, statut, Vary, cache-control et ETag. L’ordre des requêtes change pour détecter la pollution.
Les tests couvrent picture, preload, srcset, bot et email lorsque ces canaux consomment les images. Le HTML reste SSR, la canonical stable et l’indexation indépendante du codec.
Tester pannes et concurrence
La QA coupe encodeur, remplit la file, invalide une source et simule un cache froid. Le fallback doit répondre sans longues boucles ni avalanche de retries. L’origine conserve une marge.
Le rollback désactive une classe au CDN et à l’origine. La journalisation prouve que le cache ne mélange plus les réponses. Une purge globale n’est utilisée qu’en incident clairement borné.
Déployer par cohorte réversible
Commencer par des images non critiques
Le canari ouvre d’abord sur quelques profils sous la ligne de flottaison. Il vérifie négociation, hit et décodage sans exposer le héros. Les clients rares sont inclus volontairement.
Les images LCP arrivent après stabilité de l’origine et du cache. Leur preload est recetté. Le lot garde un témoin avec stratégie précédente pour comparer TTFB, taille et LCP.
Étendre depuis une décision datée
Chaque extension possède volume, erreurs, hit, coût et résultat. Une classe qui ne produit pas de gain reste désactivée pour le profil concerné. La règle peut différer entre photographie et capture.
Le responsable CDN valide la clé, la plateforme l’encodage, le frontend le HTML et le SEO le crawl. Le dossier conserve les commandes de retour et les versions encore en cache.
Erreurs fréquentes : les négociations ambiguës
Ajouter Vary sans configurer le CDN
Vary: Accept décrit la réponse, mais certains CDN exigent une clé normalisée explicite. Supposer que l’en-tête suffit peut mélanger ou fragmenter les objets. Le test de séquence tranche.
Autre erreur : varier sur le user-agent en plus de Accept. La cardinalité explose et les exceptions restent. Une classe finie, observable et versionnée est plus robuste.
Servir un fallback non entretenu
Un JPEG original de plusieurs mégaoctets n’est pas un repli acceptable. Il touche les clients les plus contraints et les bots. Chaque profil possède un fallback optimisé et testé.
Enfin, encoder à la première requête sans file ni verrou peut saturer l’origine après publication. Pré-génération, single-flight et quota protègent le TTFB autant que le choix du codec.
Plan d’action : migrer les formats en trois semaines
Semaine 1 : choisir stratégie et classes
L’équipe inventorie HTML, URLs, CDN, origine, codecs et clients. Elle mesure formats, poids, hit, TTFB, LCP et erreurs. Chaque profil reçoit stratégie picture, URL explicite ou négociation.
Les classes avif, webp et fallback sont testées avec Accept absent et pondéré. Les responsabilités, dépendances, seuils, en-têtes, clés et validateurs sont versionnés.
L’instrumentation journalise classe, format, profil, cache et statut. Le monitoring couvre encodeur, file, origine et CDN. Le rollback sait désactiver un codec sans casser les représentations encore en cache.
Le contrat de repli nomme responsabilités, dépendances, seuils et procédure de revalidation. Les logs comparent rendu SSR, routes, HTML, crawl et cache ; une invalidation de source ne doit ni dupliquer les canonical ni interrompre l’indexation pendant la régénération.
Semaines 2 et 3 : canarier puis étendre
La deuxième semaine ouvre des images non critiques. La CI teste types, octets, Vary, ETag, cache et fallback ; la QA joue navigateurs, webviews, bots, cache froid et encodeur indisponible.
La troisième semaine ajoute les candidats LCP. Le monitoring compare taille, TTFB, hit, erreurs et LCP au témoin. Une cohorte incapable garde le fallback sans pénaliser toutes les autres.
Par exemple, si le hit perd 3 points ou si le TTFB p75 gagne 60 ms, alors le trafic revient à la stratégie précédente. L’équipe corrige clé ou encodage, puis exige deux cycles de cache conformes.
- D’abord, nommer formats, profils et fallback.
- Ensuite, tester Accept, type, clé et validateurs.
- Puis, décider depuis poids, hit, TTFB et LCP.
- Enfin, étendre après un canari multi-client réversible.
Pour qui la négociation serveur vaut son coût
Qualifier les parcs d’URL existants
La négociation aide un parc important où une URL stable est consommée par plusieurs frontends et où le CDN sait normaliser les capacités. Elle exige une équipe capable d’observer origine et cache.
Un site contrôlant son HTML peut préférer picture et des URL explicites. Cette solution rend le format visible, simplifie le cache et réduit les modes de panne. L’élégance d’une URL unique ne justifie pas la complexité.
Documenter le refus et la revue
Une stratégie sans négociation conserve le coût du balisage et le taux de support. Une nouvelle étude exige un changement de canal, de CDN ou de volumétrie. Elle ne se rouvre pas à chaque nouveau codec.
La plateforme valide encodeur et repli, le CDN la clé, le frontend les sources et le SEO l’accès. Le format reste une optimisation du contenu, jamais une condition de disponibilité.
Vérifier les sources et prolongements
Lire le contrat HTTP
MDN présente la négociation de contenu, notamment Accept et Vary. La RFC 9110 définit les mécanismes de négociation HTTP.
La ressource web.dev compare les formats d’image. Ces sources cadrent protocole et codecs ; les classes, seuils et profils restent propres au pipeline.
Prolonger la chaîne de transformation
L’étude des URL d’images transformées encadre paramètres et signatures. L’analyse de l’art direction responsive relie format et candidat.
La première ressource protège origine et cache ; la seconde évite de servir le bon codec au mauvais cadrage. Ensemble, elles couvrent sélection, production et distribution.
Conclusion : varier le format sans fragmenter la vérité
AVIF et WebP ne créent de valeur que si chaque client reçoit une représentation décodable. Le fallback reste une première classe du système.
L’élément picture, l’URL explicite et la négociation sont trois choix d’architecture. Chacun exige un contrat de cache cohérent avec le navigateur et le CDN.
La preuve associe format, type, clé, hit, TTFB, poids et LCP. Le canari inclut clients rares, ordre de cache et panne d’encodeur.
Pour auditer vos en-têtes, normaliser les clés et fiabiliser le fallback, notre accompagnement en SEO technique déploie les formats modernes sans fragiliser la distribution.
