srcset (img) et pagespeedinsight

[saluts92]

BOnjour,
je suis actuellement dans l'optimisation de mon site et surtout de mes images.
Je viens d'implémenter l'attribut srcset sur certaines images afin d'éviter le chargement inutile de grosse image lorsqu'il s'agit d'un smartphone

puis j'ai fait des tests avec PageSpeedInsight et j' m'aperçois qu'il ne prend pas en compte SRCSET
ce que je trouve bizarre étant donné que c'est plutot un outil destiné à nous aider à optimiser nos pages.

ai je oublié qqe chose ? ou est ce "normal" que PSI n'en tienne pas compte ?

j'utilise

<img src="..." width="900" height="300" srcset="xxxxx 100w, xxxx 200w, xxxx 300w" />

je n'utilise pas SIZES (qui est par défaut 100vw de toute façon)

 

[ZImm]

Si vous spécifiez les attributs width, et height , alors, le navigateur prend l'image qui correspond a ces dimensions, sans tenir compte des variantes, ce qui est logique, puisque vous indiquez que, quelque soit la résolution de l'écran, l'image fait 900 x 300 .

 

[saluts92]

Si vous spécifiez les attributs width, et height

il faut toujours spécifier l'attribut width et height pour plusieurs raisons : dont la principale est que le navigateur utilise un rapport hauteur/largeur lors du redimensionnement de l'image

cela n'a pas d'impact sur les variantes qui sont utilisées lorsque le navigateur le peu

 

[ZImm]

Moi, je réponds juste à la question avec les bonnes pratiques, après les "il faut", ça c'est une autre histoire, mais je continue de dire, que, si on utilise srcset, alors, il ne faut utiliser les attributs width et height, et contrôler les dimensions / proportions de l'image au travers de la feuille de styles.

https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/srcset

 

[saluts92]

à la question avec les bonnes pratiques,

justement "il faut" , que fais tu si le navigateur ne prend pas en charge le SRCSET ?

si tu ne mets pas de width ni de height, avec ou sans srcet, tu auras du CLS, en effet le SRCSET n'indique que la largeur (à condition d'utiliser w)

et là je te parle de mes nombreux tests

ta source n'indiquant à aucun moment qu'il faut ou ne faut pas utiliser width et height

 

[ZImm]

Perso, je sépare complètement le fond et la forme. Pour les dimensions des images, je les contrôle depuis la feuille de styles.

Pour les images multi résolutions, j'utilise la balise <picture> , honnêtement, je ne me souviens plus pourquoi j'avais opté pour <picture> à la place de <img srcset... mais j'avais sûrement une bonne raison ... mais là aussi, je passe par la feuille de style pour les dimensions.

 

[saluts92]

je les contrôle depuis la feuille de styles.

pourquoi pas (mais ce n'est pas l'objet de mon post) mais si tu ne fais que ça tu auras des problèmes de CLS (signaux web essentiels), mon post tourne autour de ça, et ta solution va générer du CLS (Cumulative Layout Shift) pour toutes tes images au dessus de la ligne de flottaison

 

[ZImm]

mais si tu ne fais que ça tu auras des problèmes de CLS

Bah, non, justement aucun problème, ... je dois mal expliquer, alors, je ne vais pas polluer la discussion plus longtemps.

 

[saluts92]

oui