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 :

  1. l'URL vers une image,
  2. 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.
  3. 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

en anglais

logo drush