Véritable caméléon du HTML, la balise picture est un élément important pour améliorer l’expérience utilisateur sur les sites web. En effet, elle permet d’afficher une même image dans différentes tailles et résolutions en fonction de l’appareil utilisé. Et pourtant cette balise est encore trop peu utiliser lors de développement frontend.
Comment fonctionne la balise picture ?
La balise picture permet de spécifier différentes sources d’une même illustration afin d’afficher une image de qualité optimale en fonction de la taille de l’écran sur lequel s’affiche la page web qui la contient. Il est donc nécessaire de posséder X fois la même version d’image dans les différents formats souhaités. Notons qu’il est possible d’appeler trois illustrations différentes, sans rapport entre elles. Mais l’intérêt d’une telle pratique est discutable. Une fois les images définies dans les différentes tailles, la balise s’utilise en combinaison avec les balises <source> et <img>, comme le montre le code ci-dessous.
<picture>
<source srcset="image-large.jpg" media="(min-width: 768px)">
<source srcset="image-medium.jpg" media="(min-width: 480px)">
<source srcset="image-small.jpg">
<img src="image-default.jpg" alt="image description">
</picture>Dans cet exemple, trois versions de la même image sont fournies pour différents formats d’écran. Le navigateur choisit la source la mieux adaptée en fonction de la taille de l’écran et des caractéristiques du périphérique d’affichage. C’est à vous de choisir au mieux la largeur de chaque image en fonction de la largeur de l’écran.
Si aucune des sources n’est adaptée, une image par défaut est alors affichée grâce à la classique balise <img>. Dans l’idéal, optez pour une taille médiane pour cette image. Ni trop grande, ni trop petite, afin de limiter le poids et par là le temps de chargement de la page.
L’attribut srcset définit l’endroit où se situe l’image à charger. L’attribut media indique à partir de quelle largeur d’écran l’image doit s’afficher. Rappelons que la valeur min-with veut dire « à partir de, et supérieur ». À l’inverse, la valeur max-width signifie « à partir de, et inférieur ». Il est important de savoir si le site est développé en « mobile first » (min-width) ou en « desktop first » (max-width) pour utiliser les bonnes propriétés.
Les avantages de la balise picture :
L’utilisation de la balise picture offre l’avantage principal d’améliorer la vitesse de chargement de la page. Par ricochet, elle offre également une meilleure expérience utilisateur grâce à une image optimale pour une taille d’écran donnée, mais aussi une amélioration du référencement naturel.
En effet, les moteurs de recherche prennent en compte la vitesse de chargement des pages et l’expérience utilisateur pour classer les sites web dans les résultats de recherche. En utilisant la balise picture, vous améliorez potentiellement la visibilité de votre site web dans les résultats de recherche.
Image by Nick from Pixabay
Inconvénient et alternatives
Bien qu’elle soit très utile, l’usage de la balise picture présente néanmoins une contrainte non négligeable. Il est en effet nécessaire de posséder, et donc de créer, une même image dans divers formats pour que le principe fonctionne. Ceci peut vite devenir chronophage s’il y a beaucoup d’images à gérer et si aucune automatisation du processus est mis en place.
Dans ce cas, les media queries en CSS restent une alternative possible pour spécifier différents formats à une même image en fonction de la taille de l’écran de l’utilisateur. Notons toutefois que même si nous changeons la taille de l’image via le CSS son poids, lui, reste inchangé.
Cependant, comme nous l’avons explicité plus haut, en utilisant la balise picture de manière efficace, vous pouvez grandement améliorer la vitesse de chargement de votre site web, surtout si vous optimisez le poids de chaque variation d’image avec un outil comme optimizilla. L’expérience utilisateur et le référencement naturel n’en seront qu’améliorés.
Astuce :
Il est possible d’utiliser la propriété CSS object-position afin d’ajuster le positionnement de l’image dans le cadre de l’élément. La propriété object-fit permet quant à elle de contrôler la façon dont la taille de l’image est ajustée. Bien entendu, ces deux propriétés s’appliquent sur la balise <img> fille de la balise picture.
Vous aimerez lire aussi :
- La balise picture, une spécialiste de l’adaptation !
4.7 (3)Véritable caméléon du HTML, la balise picture est un élément important pour améliorer l’expérience utilisateur sur les sites web. En […] - Pourquoi le CSS Nesting Module est une révolution pour le frontend ?
4.3 (12)Le CSS Nesting Module est une spécification CSS du W3C en cours de développement qui permet l’imbrication des règles de […] - Les sprites CSS. Quatre méthodes pour les mettre en place
4.4 (5)Les sprites CSS sont une technique mise au point pour économiser de la bande passante en réduisant le nombre de […]