[Résolu] Srcset, sizes et Cumulative Layout Shift

Bonjour,

Sauriez-vous comment éviter les mouvements des images d'une page, au cours du chargement, lorsqu'on utilise pour ces images srcset et sizes ?

Avant, j'avais résolu ce problème en spécifiant pour chaque image width et height. Or, j'ai changé l'html de ma page pour utiliser srcset et sizes, et il me semble qu'ainsi je ne peux pas mettre width et height pour mes images. Est-ce que je me trompe ? Sinon, connaissez-vous une autre astuce pour éviter le mouvement des éléments pendant le chargement ?

D'avance, merci beaucoup !
Laure

laurerocherluna a écrit :
Sinon, connaissez-vous une autre astuce pour éviter le mouvement des éléments pendant le chargement ?

Bonjour Laure,

Le sujet est très délicat à traiter et dépend de beaucoup de choses (et de tes contraintes)

Il y a eu récemment un excellent article de Hubert Sablonnière à ce sujet, il devrait t'intéresser : https://www.hsablonniere.com/prevent-layout-shifts-with-css-grid-stacks--qcj5jo/

Jean-Pierre-Bruneau a écrit :

Je te mets juste un mot pour te dire que je n'utilises pas ces usines à gaz, préfèrent de beaucoup

img {width:90%;max-width:1000px;;}

Oui Jean-Pierre, mais ta piste ne fait que "masquer" le problème et ne permet pas du tout de charger des images différentes selon les tailles d'écran. Sans oublier les problèmes de performance que cela engendre.

Bonne journée,

Raphaël

Bonjour,
qu'en est-il de l'utilisation des @media en lieu et place de srcset, en 2020 ?
Il y avait une discussion à ce sujet sur Alsacreations : https://forum.alsacreations.com/topic-27-60810-1-Media-queries-taille-dimage-et-chargement.html. Les choses ont-elles évoluées depuis ?