Responsive Breakpoints - Une image responsive pour toutes les résolutions - Alfred Dagenais

Un outil simple et efficace pour créer plusieurs images pour le responsive

Une image pour toutes les résolutions d’écran et différents appareils n’est pas suffisante. Voici un outil simple et efficace pour créer plusieurs images pour le responsive.

www.responsivebreakpoints.com

Images fluides, c’est quoi?

Lorsque vous insérez une image dans votre page web, il ya des chances que vous utilisez un code semblable à:
<img src="mon-image.jpg" width="850" height="475" alt="">

Ce code permet de télécharger les images en réservant un espace de 850 pixels de large et sur un écran que sur un écran de smartphone.
img { max-width: 100%; height: auto; }

Mais vous conviendrez que de charger l’image à 850 x 475 px n’est pas très adapté à l’écran de 320 px de large (si l’on prend comme exemple la largeur actuelle gérée par l’iPhone). La différence 127 Ko, multipliée par le nombre d’images du même genre sur votre page.

`srcset`, pour piocher la bonne ressource

l’attribut srcset vient résoudre ce problème vous permettant d’identifier une image correspondant à un terminal de consultation sur les orientations de la taille de l’écran, et une densité de pixels.

Dans le cadre de cet attribut srcset, les spécifications prévoient deux types de descripteurs ce qui permet de conditionner les ressources de téléchargement:

descripteur « x » sélectionne l’image en fonction de la densité de pixels (pixel ratio) de l’écran

srcset et le descripteur « x »

Le descripteur « x », appelé officiellement »pixel density descriptor-n’est pas étonnant, d’un pixel à l’écran. C’est un bon moyen de cibler les écrans dits retina (pixel-ratio 2) ou HD.

Le nombre exprimé dans ce descripteur peut contenir un point décimal, mais doit être positif. La valeur par défaut de ce descripteur, si elle n’est pas »1x ».

Voici par exemple vous pouvez utiliser l’attribut srcset en combinaison avec le descripteur »x »:
<img src="mon-image.jpg" srcset="mon-imageHD.jpg 2x" alt="">

dans le cas contraire, dans le cas où le navigateur se sent proche de pixel-ratio: 2, il se chargera de mon-imageHD.jpg et dans le cas contraire il choisit mon-image.jpg.

`srcset` et le descripteur « w »

Descripteur « w », pour »width descriptor » informe le navigateur de la largeur de l’image proposée. La valeur à »w » signifie que la taille de l’image et non pas de la consulter ou de la surface de l’écran.

Voici par exemple vous pouvez utiliser l’attribut srcset en combinaison avec le descripteur « w »:
<img src="mon-image.jpg" srcset="mon-image-320.jpg 320w, mon-image-640.jpg 640w" alt="">

Dans cet exemple, j’ai clairement indique au navigateur: « j’ai deux images dont la première a une largeur de 320px et l’autre 640px, nous exprimons à toi pour prendre le meilleur ».

Selon les spécifications, le navigateur vous devrez tenir compte de plusieurs paramètres au choix:

agent utilisateur va calculer la densité de pixels, le réel de chaque image à partir d’un descripteur w sont indiquées et les dimensions sont faits mentionnés dans l’attribut sizes. Ensuite, il peut choisir n’importe quelle ressource en fonction de la densité de pixels sur l’écran de l’utilisateur, à son échelle, ou peut-être d’autres facteurs tels que les conditions du réseau de l’utilisateur.

En général, si l’utilisateur a device 320px de large, l’image sera téléchargée mon-image-320.jpg; comme, par exemple, sur une surface plus large, le choix peut porter plutôt sur la mon-image-640.jpg.

Choses se compliquent un peu sachant que si le descripteur »w » est utilisé, alors l’attribut sizes s’applique nécessairement.

veuillez noter qu’il n’a pas le droit de combiner dans le modèle »x » et descripteur »w » dans le même état d’srcset.

srcset et l’attribut sizes

L’attribut sizes permet d’indiquer au navigateur quelle doit être la largeur finale de l’image à l’affichage.

Par exemple:

sizes="1000px" -indique au navigateur que l’image au final occupera 1000px de largeur sur l’écran
sizes="100vw" indique que l’image s’occuper toute la largeur du viewport

C’est une information importante pour permettre au navigateur de choisir la bonne ressource, parce qu’il doit jongler entre sa largeur effective, la largeur de l’image, mais aussi de sa densité de pixel.

Voici par exemple vous pouvez utiliser l’attribut srcset en combinaison avec le descripteur »w » et à l’attribut sizes:
<img src="mon-image.jpg" srcset="mon-image-320.jpg 320w, mon-image-640.jpg 640w" sizes="100vw" alt="">

Dans cet exemple, nous indiquons au navigateur que l’image devra au final occuper toute la surface.

un iPhone 3 taille est de 320px télécharge mon-image-320.jpg
iPhone 4 dont la taille de 320px, mais où la densité de pixels est de 2 chargera mon-image-640.jpg

Notez les informations complémentaires suivantes:

n’est pas autorisé d’employer l’unité% en valeur de sizes (les unités courantes vw ou px)
valeurs par défaut sizes est 100vw
l’Image CONTRE image(s) chargée(s)?

L’un des intérêts de cet attribut est qu’il prenne la valeur de l’attribut src si l’un des critères est valide, l’avantage étant, de ce fait, de ne charger que l’image la plus intéressante pour le terminal qui consulte votre page web. D’ailleurs le processus est décrit en détail sur la page du W3C.

Figurez-vous que c’est exactement ce que font les navigateurs actuels (desktop et mobile).

Mais comment réagit le navigateur s’il rencontre les deux images dont les critères sont les mêmes?

-une très bonne question, nous nous la sommes posée. Pour effectuer le test, nous avons regroupé plusieurs images identiques dans leurs proportions et ajouté un mot dessus pour découvrir, lorsqu’il est chargé. Ensuite nous avons appliqué des critères bidons et des critères correspondant à notre terminal de test (viewport 1920px, densité de 1.0).

Test N°1: La densité
<img src="mon-image.jpg" srcset="mon-image-big.jpg 1x, mon-image-hd.jpg 2x" width="850" height="475" alt="">

L’image « big » correspondant au critère « 1x » chargé », donc tout va bien.

Test n° 2: L’absent
<img src="mon-image.jpg" srcset="mon-image-hd.jpg 2x" width="850" height="475" alt="">

il n’y a aucun critère de srcset ne correspond, pas à l’image src chargée.

Test n° 3: viewport
<img src="mon-image.jpg" srcset="mon-image-320.jpg 320w, mon-image-big.jpg 1920w" width="850" height="475" alt="">

L’image « big » est chargée, ce qui est le comportement attendu dans notre cas.

Il est important de rappeler que srcset donne au navigateur d’informations sur les images et leur utilisation prévue.

Ressources

Une image pour toutes les résolutions d’écran et différents appareils n’est pas suffisante. Voici un outil simple et efficace pour créer plusieurs images pour le responsive.