attribut srcset - HTML5
L'attribut srcset est spécifique à HTML5.
Source : https://developer.mozilla.org/fr/docs/Web/HTML/Element/Img#Attributs
Une liste d’une ou plusieurs chaînes de caractère séparé par des virgules ; indique l'ensemble des images possibles en fonction de l'user-agent utilisé. Ces chaînes son composée de :
- l'URL vers une image,
- Une description de la largeur de la fenêtre (un nombre entier positif directement suivi par 'w'). Si la valeur n'est pas indiquée, la valeur par défaut est l'infini.
-
Une description de la densité de pixel (un nombre entier positif directement suivi par 'x'). SI la valeur n'est pas renseignée, sa valeur par défaut est
1X
.
Chaque chaîne doit au moins renseigner une largeur ou une densité pour être valide. Dans cette liste, il ne peut y avoir deux fois la même description.
Lorsque l’attribut srcset
est accepté, une liste d’images/de conditions séparées par des virgules est analysée avant de formuler des requêtes, et seule l’image appropriée est téléchargée et affichée. Ex simplissime: <img src="photo.png" srcset="photo@2x.png 2x" ...>
Sur les navigateurs non compatibles avec l’attribut srcset
, le fichier image par défaut spécifié par l’attribut src
est utilisé. C’est pourquoi il est important de toujours inclure une image 1x pouvant être affichée sur tout appareil, quelles qu’en soient les capacités.
Mozilla indique:
- seule la densité de pixels bénéficie, à ce jour, d’une vaste prise en charge. Pour trouver le bon équilibre entre le comportement actuel et les fonctionnalités à venir, contentez-vous d’intégrer l’image 2x dans l’attribut.
- Art direction dans des images adaptatives avec l’élément picture
compatibilités selon les navigateurs
Supporté par les dernières versions de Firefox, Chrome (38 ou +), Opera (27 ou +), Android Browser (40), et Chrome for Android. Safari : partiel.
Aucun: Internet Explorer, et Opera Mini.
Voir aussi http://caniuse.com/#feat=srcset
sur le web
- https://developer.mozilla.org/fr/docs/Web/HTML/Element/Img
- en fr: http://www.stephanemartinw.com/articles/20-images-responsives-srcset-sizes-drupal parle aussi de drupal 8
en anglais
- tagué avec srcset sur stackoverflow.com ; tagué responsive-design
- https://html.spec.whatwg.org/multipage/embedded-content.html#attr-img-srcset
- http://www.w3.org/TR/html-srcset/
- http://blog.cloudfour.com/responsive-images-101-part-4-srcset-width-descriptors/
- http://www.vanseodesign.com/web-design/responsive-images-srcset-attribute/