Le CLS (Cumulative Layout Shift) survient quand le navigateur commence à mettre en page le contenu avant de connaître les dimensions réelles d'une image, puis doit déplacer les éléments environnants une fois l'image chargée. Avec un fichier statique, on code en dur width et height une bonne fois pour toutes et on n'y repense plus ; avec des images générées à la demande par un preset, ce réflexe se perd facilement puisque le fichier n'existait pas encore au moment où le template a été écrit.
Le navigateur n'a besoin que des attributs intrinsèques width et height, ou d'un aspect-ratio équivalent en CSS, pour réserver l'espace de mise en page : il n'a pas besoin des octets de l'image finale. Un preset ImagePipe fixe ces dimensions dans sa configuration quel que soit le mode de redimensionnement appliqué (Fit, Cover, Crop, Contain, Stretch), la taille de rendu est donc connue à l'avance, même avant qu'une variante donnée n'ait jamais été générée : rien ne justifie d'omettre ces attributs.
Le piège propre à la génération à la volée est un template de galerie qui n'écrit les dimensions dans le balisage qu'une fois le fichier existant, ou une boucle de vignettes qui retombe sur l'absence de dimensions tant qu'une variante n'a pas encore été générée. La toute première requête pour une taille donnée est justement le moment où le navigateur dispose du moins d'informations, et donc celui où un saut visible a le plus de chances d'apparaître.
Vérifiez d'abord que chaque balise img produite par le template de galerie porte des attributs width et height explicites correspondant aux dimensions configurées du preset, pas à celles du fichier source. Vérifiez ensuite, avec l'onglet Rendu de Chrome DevTools et l'option « Layout Shift Regions » activée, si un rechargement à froid (cache vide) déclenche encore un saut visible. Enfin, confirmez que le CSS du thème ne surcharge pas ces dimensions avec une règle width: auto contradictoire.