La <picture>balise HTML5 vous aidera à résoudre la bonne source d'image en fonction de la largeur de l'écran
Apparemment, le comportement des navigateurs n'a pas beaucoup changé au cours des 5 dernières années et beaucoup téléchargeraient toujours les images cachées, même s'il y avait une display: nonepropriété définie dessus.
Même s'il existe une solution de contournement des requêtes multimédias , elle ne peut être utile que lorsque l'image a été définie comme arrière-plan dans le CSS.
Alors que je pensais qu'il n'y avait qu'une solution JS au problème ( chargement paresseux , remplissage d'image , etc.), il est apparu qu'il y avait une belle solution HTML pure qui sortait de la boîte avec HTML5.
Et c'est la <picture>balise.
Voici comment MDN le décrit:
L' élément HTML<picture> est un conteneur utilisé pour spécifier plusieurs <source>éléments pour un <img>contenu spécifique qu'il contient. Le navigateur choisira la source la plus appropriée en fonction de la disposition actuelle de la page (les contraintes de la boîte dans laquelle l'image apparaîtra) et l'appareil sur lequel elle sera affichée (par exemple, un appareil normal ou hiDPI.)
Et voici comment l'utiliser:
<picture>
<source srcset="mdn-logo-wide.png" media="(min-width: 600px)">
<img src="mdn-logo-narrow.png" alt="MDN">
</picture>
La logique derrière
Le navigateur chargerait la source de la imgbalise, uniquement si aucune des règles multimédias ne s'applique. Lorsque l' <picture>élément n'est pas pris en charge par le navigateur, il reviendra à nouveau à l'affichage de la imgbalise.
Normalement, vous mettriez la plus petite image comme source du <img>et donc ne chargeriez pas les images lourdes pour les écrans plus grands. Inversement, si une règle multimédia s'applique, la source du <img>fichier ne sera pas téléchargée, mais téléchargera le contenu de l'URL de la <source>balise correspondante .
Le seul écueil ici est que si l'élément n'est pas pris en charge par le navigateur, il ne chargera que la petite image. D'autre part, en 2017, nous devons penser et coder dans la première approche mobile .
Et avant que quelqu'un ne soit trop excité, voici le support actuel du navigateur pour <picture>:
Navigateurs de bureau
Navigateurs mobiles
Plus d'informations sur le support du navigateur que vous pouvez trouver sur Puis-je utiliser .
La bonne chose est que la phrase de html5please est de l' utiliser avec un repli . Et j'ai personnellement l'intention de prendre leur avis.
En savoir plus sur la balise que vous pouvez trouver dans les spécifications du W3C . Il y a un avertissement, que je trouve important de mentionner:
L' pictureélément est un peu différent des ressemblantes videoet des audioéléments. Bien qu'ils contiennent tous des sourceéléments, l' srcattribut de l'élément source n'a aucune signification lorsque l'élément est imbriqué dans un pictureélément et que l'algorithme de sélection des ressources est différent. De plus, l' pictureélément lui-même n'affiche rien; il fournit simplement un contexte pour son imgélément contenu qui lui permet de choisir parmi plusieurs URL.
Ce qu'il dit, c'est qu'il ne vous aide qu'à améliorer les performances lors du chargement d'une image, en lui fournissant un peu de contexte.
Et vous pouvez toujours utiliser de la magie CSS pour masquer l'image sur de petits appareils:
<style>
picture { display: none; }
@media (min-width: 600px) {
picture {
display: block;
}
}
</style>
<picture>
<source srcset="the-real-image-source" media="(min-width: 600px)">
<img src="a-1x1-pixel-image-that-will-be-hidden-in-the-css" alt="MDN">
</picture>
Ainsi, le navigateur n'affichera pas l'image réelle et ne téléchargera que l' 1x1image pixel (qui peut être mise en cache si vous l'utilisez plusieurs fois). Sachez cependant que si la <picture>balise n'est pas prise en charge par le navigateur, même sur les écrans descktop, l'image réelle ne sera pas affichée (vous aurez donc certainement besoin d'une sauvegarde polyfill).
