5545 sujets

Sémantique web et HTML

Bonjour,

Aujourd'hui, je faisais des tests sur l'attribut srcset de la balise <img>. J'ai l'impression qu'il y a une erreur sur l'article Responsive Images – L'arrivée de srcset de Geoffrey C.

Son 2e exemple de code ne fonctionne pas chez moi :
<img src="mon-image.jpg"
     srcset="mon-image.jpg 1x,
             mon-image-320.jpg 320w 1x,
             mon-image-640.jpg 320w 2x"
     width="850" height="475" alt="">


D'après mes tests, on ne peut pas préciser un critère de largeur (320w) en même temps qu'un critère de résolution (2x). C'est l'un ou l'autre. Si on veut faire les 2, il faut utiliser une balise <picture> :
http://codepen.io/mathiaspeguet/pen/LxyrZJ?editors=1100

Mais peut-être que j'ai mal compris. Dans ce cas, je suis intéressé par une explication.

Smiley cligne
Modifié par dew (24 Jan 2017 - 13:49)
En effet, l'attribut srcset ne peut pas recevoir les descripteurs de largeur et de densité pour une même source.

Vu sur MDN :
Au sein d'un même attribut srcset, on ne peut pas mélanger des descripteurs exprimés en densité de pixels et des descripteurs exprimés en largeur. Il est également invalide d'avoir deux sources pour lesquelles le descripteur est le même (par exemple, deux sources décrites par '2x').

Modifié par mob (26 Jan 2017 - 09:48)