Problème avec l'attribut "sizes" en HTML

Questions Dev
1

:wave: Bonjour les dev !

Ma question concerne : HTML
L’attribut sizes sur une image : à quoi sert-il et comment l’utilise-t-on ?

Voici mon code en question ainsi qu’un screen de ce que me dit W3C lorsque je fais une vérification :

html
<img
        srcset="img/img_an-761-407.jpg 761w, img/img_an-477-255.jpg 477w"
        src="img/img_an-761-407.jpg"
        alt="Photo officielle de la XVIe législature"
        width="695"
        height="370"
        title="Photo officielle de la XVIe législature"
      />

image
image1756×144 14.7 KB

1 « J'aime »
2

Salut Maxence.

Alors, voici mon explication.

Les attributs srcset et sizes sont utilisés dans les éléments img pour améliorer la qualité de l’affichage d’une image sur différents écrans et appareils.

L’attribut srcset permet de spécifier une liste d’images et leurs tailles respectives, afin que le navigateur puisse choisir celle qui convient le mieux en fonction de la résolution de l’écran et de la largeur disponible. Par exemple :

<img srcset="image-small.jpg 640w, image-medium.jpg 1024w, image-large.jpg 1440w" src="image-medium.jpg" alt="Mon image">

Dans cet exemple, srcset définit trois versions de l’image, avec leurs tailles respectives indiquées en termes de largeur en pixels (640 pixels, 1024 pixels et 1440 pixels). Le navigateur choisira l’image la plus adaptée en fonction de la résolution de l’écran et de la largeur disponible dans le conteneur de l’image.

L’attribut sizes permet de spécifier la taille de l’image en fonction de la largeur du conteneur de l’image. Par exemple :

<img srcset="image-small.jpg 640w, image-medium.jpg 1024w, image-large.jpg 1440w" sizes="(max-width: 640px) 640px, (max-width: 1024px) 1024px, 1440px" src="image-medium.jpg" alt="Mon image">

Dans cet exemple, sizes indique que si la largeur du conteneur de l’image est inférieure à 640 pixels, l’image utilisée sera de 640 pixels de large ; si elle est inférieure à 1024 pixels, l’image utilisée sera de 1024 pixels de large ; et si elle est supérieure ou égale à 1024 pixels, l’image utilisée sera de 1440 pixels de large. Cela permet de charger une image de la taille appropriée en fonction de la résolution de l’écran et de la largeur disponible.

sizes et srcset doivent donc tous les deux être présents dans ton code. L’un pour lister les images disponibles, l’autre pour dire laquelle charger en fonction de la largeur de son conteneur.

3

D’accord, je te mentirais si je te disais que je n’avais pas compris.

En revanche, j’ai essayé avec mon code qui se trouve ici, et ça n’a pas l’air de marcher. Ça marchait quand il y avait juste l’attribut srcset, mais depuis que j’ai rajouté l’attribut sizes en suivant ce que tu as fait, ça n’a plus l’air de marcher.
Est-ce qu’éventuellement, tu peux aller voir ce code (il s’agit de mon exercice avancé en HTML) et me dire ce qui cloche s’il te plaît ?