Balise picture


La balise <picture> est un élément HTML5 qui est utilisé dans le cadre de la création de sites web responsive. Elle régule l’affichage des images de façon à l’adapter aux différents écrans d’affichage.

Informations générales

Le point de départ pour l'introduction de la balise <picture> était l'utilisation croissante des appareils mobiles. En raison des nombreuses tailles d'affichage, des densités de pixels, des formats d'image et des viewports, l'affichage d'images sur les smartphones et les tablettes n'était pas toujours idéal. D'une part, elles nécessitent un volume de données relativement important. D'autre part, les images haute résolution ont souvent été échelonnées de manière incorrecte sur les appareils mobiles, de sorte que les détails n'étaient plus visibles.

Cela a changé avec les sites web responsive. Le contenu des sites web d’aujourd'hui est optimisé afin qu'ils puissent également être affichés sur des écrans plus petits. Toutefois, dans le cas des images, les utilisateurs ont encore un problème. Si une image haute résolution devait être chargée sur un petit écran, le temps de chargement augmentait et nécessitait encore beaucoup de volume de données. La balise <picture> représente une solution dans ce cas.

Fonctionnement

La balise <picture> offre au navigateur la possibilité d'opter pour une image afin qu'elle s'affiche correctement sur des écrans de différentes tailles. Un navigateur mobile sélectionne une version qui convient à son type d'appareil et à sa taille d'affichage. Un navigateur sur un ordinateur de bureau optera pour une haute résolution qui correspond à un écran beaucoup plus grand.

La balise <picture> agit comme un conteneur. Elle ne charge pas l'image à afficher, mais indique au navigateur quelle image de la balise <img> doit être chargée. La balise <picture> contient la balise <img>. La balise <picture> n’annule pas d'autres balises obsolètes comme <source> et <img>. Elle englobe plutôt ces balises pour les consacrer à l'affichage. La source d'une image et d'autres attributs d'image continuent à être définis dans les balises standards.

La différence avec la balise <img> est que <picture> est associée à certains attributs. Ces attributs déterminent l'affichage de sorte qu'une image s'affiche correctement sur les appareils mobiles avec de petits écrans.

  • srcset : cet attribut donne au navigateur un ensemble d'images pouvant être chargées.
  • media : l'attribut multimédia contient des informations sur les requêtes multimédias. Il interroge quel srcset est lié au support de sortie. Si, par exemple, un smartphone de certaines dimensions (largeur, hauteur) est concerné, le paramètre src associé sera utilisé et l'affichage est optimisé pour le type de périphérique.
  • sizes : sizes définit la quantité d'espace de la fenêtre disponible pouvant être occupée par une image. Cela se fait en spécifiant un pourcentage, par exemple, à 100%, pour occuper tout champ visible de l'écran d'affichage.

Exemple

Dans cet exemple simplifié, l'élément <picture> englobe à la fois la source et l'image. L'attribut srcset fournit au navigateur plusieurs options pour pouvoir décider d'une image appropriée. Derrière chaque image dans srcset se trouve une indication sur la résolution, c'est-à-dire 1x pour la résolution standard, et 2x pour une résolution plus élevée, comme pour les affichages Retina. 4x est conçu pour les moniteurs 4K haute définition. Ces informations peuvent également être spécifiées comme faisant partie de la "largeur". Par exemple: "image1x.jpg 640W". 

<picture>
    <source srcset=”image1x.jpg 1x, image2x.jpg 2x, image4x.jpg 4x”>
    <img src=” image1x.jpg” alt=”image pour design responsive”>
</picture>

Importance pratique

Cependant, tous les navigateurs ne supportent pas cette nouvelle fonction. Dans de tels cas, il existe un repli sur la balise <img>, de sorte que l'image standard s'affiche. Parfois, la fonction peut être autorisée en utilisant les "fonctionnalités de la plate-forme web expérimentale" dans les navigateurs Chrome et Opera. Dans Firefox, cela se fait via "dom.image.picture.enable" dans les paramètres du navigateur. Internet Explorer vérifie l'intégration des balises d'image. Une nouvelle solution est Picturefill 2.0, qui fonctionne selon le même principe, mais JavaScript est utilisé pour afficher et ajuster les images. Avec le fichier image, l'élément <picture> peut être utilisé dans n'importe quel navigateur.

Importance pour le référencement

Une fois que l'intégration sera prise en charge dans tous les principaux navigateurs, la balise <picture> évoluera probablement vers une nouvelle norme, car elle offre différentes options pour s'adapter à différentes tailles d'écran, densités de pixels, viewport ou résolutions. Du point de vue du référencement, cela permet de réduire les temps de chargement. Cela augmente l’utilisabilité et sera probablement évalué par les moteurs de recherche comme un signal positif.

Liens wevb

Récupérée de « https://fr.ryte.com/wiki/index.php?title=Balise_picture&oldid=3144 »

Category