srcset (img) et pagespeedinsight

Discussion dans 'Débuter en référencement' créé par saluts92, 12 Avril 2021.

  1. saluts92
    saluts92 WRInaute impliqué
    Inscrit:
    12 Avril 2006
    Messages:
    962
    J'aime reçus:
    42
    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
    Code:
    <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)
     
  2. ZImm
    ZImm WRInaute discret
    Inscrit:
    26 Mars 2021
    Messages:
    134
    J'aime reçus:
    17
    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 .
     
  3. saluts92
    saluts92 WRInaute impliqué
    Inscrit:
    12 Avril 2006
    Messages:
    962
    J'aime reçus:
    42
    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
     
  4. ZImm
    ZImm WRInaute discret
    Inscrit:
    26 Mars 2021
    Messages:
    134
    J'aime reçus:
    17
    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
     
  5. saluts92
    saluts92 WRInaute impliqué
    Inscrit:
    12 Avril 2006
    Messages:
    962
    J'aime reçus:
    42
    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
     
    #5 saluts92, 30 Avril 2021
    Dernière édition: 30 Avril 2021
  6. ZImm
    ZImm WRInaute discret
    Inscrit:
    26 Mars 2021
    Messages:
    134
    J'aime reçus:
    17
    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.
     
  7. saluts92
    saluts92 WRInaute impliqué
    Inscrit:
    12 Avril 2006
    Messages:
    962
    J'aime reçus:
    42
    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
     
  8. ZImm
    ZImm WRInaute discret
    Inscrit:
    26 Mars 2021
    Messages:
    134
    J'aime reçus:
    17
    Bah, non, justement aucun problème, ... je dois mal expliquer, alors, je ne vais pas polluer la discussion plus longtemps.
     
  9. saluts92
    saluts92 WRInaute impliqué
    Inscrit:
    12 Avril 2006
    Messages:
    962
    J'aime reçus:
    42