Srcset et size

L’attribut srcset

L’attribut srcset, est un attribut pour les balises images qui permet de résoudre les problèmes que pose l’intégration de site responsive avec des images.

Cet attribut vient en corrélation de l’attribut src habituel d’une image et permet de spécifier une liste d’image à afficher selon certain critère.

Cela ressemble étrangement au média queries, mais la façon de penser est un peu différente.

En effet une média querie vas dire : utilise ceci quand la taille du conteneur est moyenne, alors que srcset vas dire dire : cette image est de taille moyenne.

en pratique cela donne ce morceau de code :

Si l’attribut srcset n’est pas supporté, c’est l’attribut src qui par défaut prend le relais.

Pour connaitre les limites techniques des navigateurs à l’heure actuelle  sur cet attribut je vous laisse regarder can i use.

Descripteurs

On peut aussi voir que chaque images précisé dans le srcset est suivi d’un chiffre et d’un w. Le w est appelé descripteur. Il en existe deux : le descripteur x et le descripteur w.

x: permet de préciser des images optimisées pour des appareils avec des densités de pixels à l’écran différentes ( utile pour les écrans rétinas par exemple )

w : est un  indicateur de la taille de l’image pour le navigateur.

c’est bien joli tout ça mais comment faire pour savoir quelle image sera affichée ?

Voici ce que dit la spécification à ce sujet :

L’agent utilisateur va calculer la densité de pixel réelle de chaque image à partir du descripteur w spécifié et des tailles de rendus spécifiées dans l’attribut sizes. Il peut ensuite choisir n’importe quelle ressource en fonction de la densité de pixels de l’écran de l’utilisateur, de son niveau de zoom, ou peut-être d’autres facteurs comme les conditions de réseau de l’utilisateur.

En gros le navigateur fait ce qu’il veut.

L’attribut size

L’attribut size est obligatoire désormais pour l’utilisation de scrset. Il permet de spécifier la largeur d’affichage de l’image selon des points de ruptures.

L’utilité de size et qu’il permet de spécifier différente largeurs d’affichage pour notre image selon le reste de notre page.  Ici les images prendront toujours une largeur égale à 100% du viewport. Les points de ruptures sont géré par le navigateur.

Mais il est aussi tout à fait possible de définir manuellement les points de ruptures :

Ici le point de rupture est à 20em s’il n’est pas rempli l’image prendra une largeur égale à 100% du viewport.

 

source : hteumeuleu, ericportis.com

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée.

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.