<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>
- <picture> :
- <source> :
- srcset* : URL de l'image alternative.
- media : Media query habituellement dans le CSS se rapportant au srcset (ici on décide quelle image s'affiche en fonction de la taille de la page).
- sizes : Taille des images en fonction de l'expace disponible (ici on décide quelle image est chargée en fonction de la taille de la page).
- type : Type MIME de l'image alternative.
- <img>* : Balise image classique utilisée par défaut (navigateurs ne supportant pas <picture> et hors définition des media queries).
- <source> :
- <img> :
- srcset : URL de l'image alternative.
- sizes : Taille des images en fonction de l'expace disponible.
Notes sur le tuto
- Limitations :
- Firefox n'adapte pas l'image via la balie <img>.
- Edge ne présente pas l'image par défaut via la balise <picture>.
- Attention à l'ordre des medias queries, afin que toutes soient prises en compte.
- Informations détaillées :
- Librairie de substitution pour les navigateurs ne supportant pas la balise : Picturefill
Exemple de code HTML5
picture> :<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> <img> :<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>