HTML5 : balise PICTURE

Il est absurde d'afficher sur l'écran minuscule d'un smartphone une image haute résolution (donc une image lourde).
Ces images qui pèsent plus d'un demi méga doivent être réservées aux grands écrans et encore si elles sont affichées "plein écran".
Grâce à la balise PICTURE d'HTML5 il est possible de changer d'image en fonction de la taille de l'écran.

Exemple d'utilisation de cette balise

Dans l'exemple ci-dessous il y a deux versions de la photo :

"aravis_grand.jpg" est l'image d'origine.
"aravis_petit.jpg" est une copie redimensionnée avec PAINT et à laquelle j'ai rajouté un texte : "petite image".
Notez que si vous divisez par 3 le nombre de pixels en largeurs (et en conservant les proportions) le poids de l'image est divisé par 9 !!!
Dans une deuxième étape j'ai rogné l'image à gauche et à droite avec que le rapport largeur par hauteur corresponde mieux aux petits écrans. Et donc en définitive le poids de la petite image tombe à 70 Ko (au lieu de 1200 à l'origine).

Réduisez la largeur de la fenêtre pour observer le changement de source !

PICTURE : élément d'image adaptative

Le col des Aravis en hiver :

Le code correspondant

CSS :
	figure {width : 90% ; margin : 10px auto 10px auto; border : 1px solid black; }
	img, picture{width : 100%; }
HTML : ... <figure> <figcaption>Le col des Aravis en hiver : </figcaption> <picture> <source srcset="../images/aravis_grand.jpg" media="(min-width: 800px)"> <img src="../images/aravis_petit.jpg" /> </picture> </figure> ...

Notez que la balise PICTURE contient un test : si la largeur de la fenêtre est au minimum de 800px alors la source est "aravis_grand.jpg"
SINON la source est "aravis_petit.jpg".
Remarquez que la balise PICTURE doit contenir les éléments SOURCE et IMG. La balise IMG précise la source de l'image si le test est faux.
La balise SOURCE a deux attributs au moins : srcset, media.
La valeur de l'attribut media est une requête média ("media query" en anglais).

Exemple plus complexe

Il est possible d'avoir deux tests voir plus.

Le code HTML

... <h3>Superber photo du col des Aravis en hiver</h3> <p><b>Réduisez la largeur de la fenêtre pour observer le changement de source ! </b> <picture> <source media="(min-width: 1200px)" srcset="../images/aravis_grand.jpg" loading ="lazy"> <source media="(min-width: 800px)" srcset="../images/aravis_medium.jpg"> <img src="../images/aravis_petit.jpg" alt ="col des Aravis" > </picture> ...

Dans le cadre d'un grand écran l'image qui pèse plus d'un méga ne sera chargée que lorsque le visiteur va la "scroller".
C'est ce qu'on appelle le "chargement paresseux" ; voir le chapitre suivant dans le menu.

Ici alternative entre trois images selon la largeur de la fenêtre.
Si largeur écran >= à 1200px : affichage de "aravis_grand.jpg"
Sinon et si largeur >= à 800px : affichage de "aravis_medium.jpg"
Sinon affichage de : "aravis_petit.jpg"

Test

Observez le rendu de ce code

Vous pouvez tester cette page sur votre PC portable puis sur votre tablette puis sur votre smartphone.
Ou bien uniquement sur votre PC en réduisant progressivement la largeur de la fenêtre.

Remarque générale

Il faut faire preuve de bon sens. Il ne faut pas abuser de la balise PICTURE car le code HTML qui en découle est lourd.
Il faut réserver l'emploi de cette technologie aux images lourdes dont il faut éviter le chargement dans le cadre de internet mobile.
Retour menu