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 ! Smiley biggrin
Laure
Merci de ta réponse. J'aurais préféré ne pas avoir a utiliser srcset/sizes, mais avec une page internet qui est un "mur d'image", il faut vraiment que j'ai deux tailles d'images possibles selon la taille d'écran de l'utilisateur, sinon visuellement mon effet est raté.
Administrateur
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 Raphaël et Jean-Pierre,

En effet, cela me paraît compliqué, je lis, cherche des articles à ce sujet et essaye différentes solutions, mais je n'ai pas encore trouvé celle qui permet d'adapter la taille des images à l'écran tout en évitant le mouvement des éléments pendant le chargement. Il est possible que je doive restructurer ma page avec une Grid qui contiendrait les images. Merci pour l'article, je vais le lire.

Bonne journée,

Laure