Supporté par ChromeSupporté par FirefoxSupporté par EdgeSupporté par Safari/iOS <picture> : Démo HTML5

Mise à jour : 2017-01-22

La balise <picture> (HTML5.1), apporte une véritable avancée pour le responsive design, en ce sens que ce n'est pas simplement le même contenu qui est chargé et dont l'affichage est adapté, mais bien le contenu lui-même qui est chargé en conséquence, économisant ainsi de la bande passante.
Et ceci bien sûr sans une ligne de code.
Une partie de ces fonctionnalité peut être utilisée directement la balise <img>, bien que <picture> offre plus de souplesse.

<picture>

* : Attributs obligatoires.

Notes sur le tuto


Exemple de code HTML5

picture&gt; :<br>
Redimensionnez en largeur la fenêtre de votre navigateur pour voir une image différente.<br>
<picture>
	<source media="(min-width: 1024px)" srcset="img/1024+.png">
	<source media="(min-width: 768px)" srcset="img/768-1023.png">
	<source media="(min-width: 320px)" srcset="img/320-767.png">
	<img src="img/default.png"
		title="Image par défaut (navigateurs non supportés et résolution < 320px)">
</picture><br>
&lt;img&gt; :<br>
Redimensionnez en largeur la fenêtre de votre navigateur pour voir l'image s'adapter.<br>
<img src="img/default.png"
	title="Image par défaut (navigateurs ne supportant pas srcset)"
	srcset="img/1024+.png 1024w">

Démonstration du résultat HTML5


picture> :
Redimensionnez en largeur la fenêtre de votre navigateur pour voir une image différente.

<img> :
Redimensionnez en largeur la fenêtre de votre navigateur pour voir l'image s'adapter.

Détection automatique du support HTML5

Librairie JavaScript de détection automatique (attention, comporte quelques faux positifs et faux négatifs)
<script src="_html5detect.js"></script>
<script>
	isTagSupported("picture")
	isTagSupported("source")
	isAttributeSupported("source", "srcset")
	isAttributeSupported("source", "media")
	isAttributeSupported("source", "sizes")
	isAttributeSupported("source", "type")
	isAttributeSupported("img", "srcset")
	isAttributeSupported("img", "sizes")
</script>		

Can I Use picture? Data on support for the picture feature across the major browsers from caniuse.com.