« Vary: Width, DPR, Viewport-Width » : cet en-tête, ajouté à une réponse serveur, ouvre la porte à une adaptation d’image basée non plus sur des règles CSS ou des attributs srcset côté client, mais sur une négociation effectuée directement entre le navigateur et le serveur avant même le premier chargement de la page. C’est le principe des Client Hints, une famille d’en-têtes HTTP encore peu exploitée sur les sites WordPress.
Sur un parc de sites où la bande passante compte, notamment pour des visiteurs en connexion mobile limitée, cette approche permet de réduire le poids des images transmises sans dépendre d’une bibliothèque JavaScript supplémentaire ni d’un service tiers de traitement d’image. Le mécanisme reste indépendant d’un CDN d’images dédié, qui répond à un besoin différent et complémentaire.
Comprendre le principe des Client Hints
Le mécanisme démarre par une réponse serveur qui annonce, via l’en-tête Accept-CH, quelles informations elle souhaite recevoir du navigateur lors des requêtes suivantes : la largeur d’affichage disponible via Viewport-Width, la densité de pixels de l’écran via DPR, ou la largeur exacte demandée pour une ressource via Width. Un navigateur compatible renvoie alors ces informations dans les requêtes suivantes vers ce même domaine.
add_header Accept-CH "DPR, Viewport-Width, Width";
add_header Vary "DPR, Viewport-Width, Width";
Une fois ces en-têtes envoyés, chaque requête d’image ultérieure porte les informations de contexte nécessaires pour que le serveur choisisse la variante la plus adaptée, sans que le développeur du thème n’ait besoin de générer un attribut srcset exhaustif côté HTML.
Adapter la réponse côté Nginx selon les en-têtes reçus
Côté serveur, un bloc Nginx peut lire ces en-têtes entrants et servir un fichier différent selon la largeur demandée, en s’appuyant par exemple sur une variable extraite de l’en-tête Width :
location ~* ^/wp-content/uploads/(.+)\.(jpg|jpeg|png|webp)$ {
set $img_width $http_width;
if ($img_width != "") {
rewrite ^/wp-content/uploads/(.+)\.(jpg|jpeg|png|webp)$ /wp-content/uploads-resized/$1-$img_width.$2 last;
}
}
Cette configuration délègue la génération effective des variantes d’image à un traitement en amont, réalisé au moment de l’import du média dans la médiathèque WordPress ou via un script planifié qui prépare les tailles les plus fréquemment demandées, plutôt que de générer une nouvelle image à chaque requête, ce qui serait coûteux en ressources serveur.
Le support navigateur, encore partiel
Les Client Hints ne sont pas supportés de manière uniforme par l’ensemble des navigateurs, et certains ignorent purement et simplement l’en-tête Accept-CH sans erreur ni avertissement visible. Cette réalité impose de conserver, en parallèle, un mécanisme de repli classique basé sur srcset et sizes, que WordPress génère nativement depuis plusieurs années pour les images insérées via la médiathèque.
- Annoncer les en-têtes souhaités via
Accept-CH - Vérifier la présence des en-têtes
Width,DPRouViewport-Widthcôté serveur - Servir la variante d’image correspondante si elle existe déjà
- Conserver un repli via
srcsetpour les navigateurs non compatibles
Mesurer le gain réel avant de généraliser
Avant de déployer cette approche sur un parc entier, une mesure du gain effectif reste indispensable : le rapport entre la part de trafic issue de navigateurs compatibles et l’effort de mise en place de la génération de variantes détermine si l’investissement est justifié. Sur un site à trafic majoritairement issu d’un navigateur peu compatible, le gain resterait marginal comparé à un simple srcset bien configuré.
Sur les sites où nous avons testé cette approche, le gain le plus net s’est vu sur les connexions mobiles à faible bande passante, précisément le public pour lequel chaque kilo-octet économisé compte le plus.
Où cette approche s’arrête
Ce mécanisme reste indépendant d’un CDN spécialisé dans le traitement d’images à la volée, qui propose une transformation dynamique bien plus large, formats modernes, recadrage automatique, compression adaptative, et qui répond à un besoin différent, complémentaire plutôt que concurrent de cette approche basée sur les en-têtes Client Hints.
En résumé
Les Client Hints, exploités via l’en-tête Accept-CH et une configuration serveur adaptée, permettent de servir des images à la résolution la plus pertinente sans bibliothèque JavaScript supplémentaire. Le support navigateur encore partiel impose cependant de conserver un mécanisme de repli classique, et le gain réel mérite d’être mesuré avant toute généralisation sur un parc de sites.
