Aujourd’hui, nous allons parler des images Web responsive, un sujet très populaire et assez problématique.

Si vous recherchez ce sujet, vous trouverez d’innombrables articles avec toutes sortes d’explications, mais je ne vais pas les répéter et vous enseigner différemment.

Chargez correctement les images, augmentez votre classement SEO et offrez une meilleure expérience utilisateur pour votre site Web.

Que sont les images réactives?

Les images réactives s’ajusteront (devraient) s’ajuster automatiquement pour s’adapter à la taille de l’écran. Mais… est-ce la bonne façon de procéder? Eh bien, oui et non. Si vous faites une recherche sur Google à ce sujet ou regardez des frameworks modernes comme Bootstrap, vous remarquerez que leur définition des “images réactives” est un simple CSS similaire à:

1max-width:  100%;
2height:  auto;

Bien que cela “fonctionne”, ce n’est pas tout à fait correct. Il y a plusieurs raisons à cela, mais la plus importante est la taille de l’image. Je ne parle pas de la “largeur/hauteur” de l’image, je parle de la taille réelle de l’image en kilo-octets/mégaoctets.

La plupart des sites Web (comme 80% des sites Web que j’ai vus au cours de toutes ces années) utilisent des images incroyablement grandes sur leurs sites Web et les “dimensionnent” simplement de haut en bas. Une telle image est généralement de 1000px à même 4000px et j’ai même vu 8000px !!! (qu’est-ce que c’est fou).

Ces images ont tendance à être de très grande taille, de 1 MB à 10 et même 20 MB. J’ai très rarement vu des gens compresser leurs images lorsqu’ils les exportent. Cela étant dit, imaginez simplement que vous avez un site Web riche en images composé de 5, 10, 20 images ou plus et qu’un utilisateur visite votre site Web sur mobile. Même en 5G, c’est beaucoup de données à télécharger rien que pour les images, sans parler du reste.

Comment créer des images responsives ?

Les navigateurs sont utiles avec la prise en charge du jeu de sources d’images (srcset). Avec cette fonctionnalité, nous pouvons effectivement avoir plusieurs versions de l’image dans différentes tailles et le navigateur choisira la bonne en fonction de la taille de l’écran. Maintenant, c’est réactif!

Cependant, la plupart des gens ne peuvent pas gérer les ensembles de sources d’images pour plusieurs raisons, allant de “je n’en ai aucune idée” à “je ne comprends pas” et bien d’autres.

Au fur et à mesure que la technologie a évolué, nous pouvons désormais utiliser des outils en ligne et des API pour créer ces ensembles de sources automatiquement pour nous. Mais gardez vos chevaux, les créer automatiquement ne signifie pas que vous pouvez simplement copier coller le résultat et vous attendre à ce qu’il fonctionne correctement.

De tout mon travail et de tous les tests effectués, il n’y a pas de solution unique et vous devez toujours faire du travail supplémentaire.

Choisir les bonnes balises HTML de l’image

C’est la première et la plus importante chose que vous devez comprendre. Vous pouvez utiliser la balise traditionnelle <img /> ou la balise moderne <picture>.

Chacun a son propre écueil, mais d’après ma propre expérience, <picture> gagne toujours. Cette balise est largement prise en charge par les navigateurs, cela ne devrait donc pas poser de problème.

Il n’existe aucun moyen automatique de générer les tailles correctes (d’après ce que je sais) pour un site Web dynamique. Prenez par exemple le WordPress bien connu, il générera des tailles herratiques et erronées en fonction de l’image que vous téléchargez et de l’endroit où vous la placez.

Utilisation des balises img

Les balises img se trouvent sur la majorité des sites Web; pour les images réactives, les balises <img /> sont combinées avec l’attribut srcset, mais je peux vous dire avec certitude qu’aucune d’entre elles ne fonctionne correctement.

L’un des problèmes est que la balise <img /> ne fonctionne pas correctement sur certains navigateurs, par exemple Chrome. J’ai en fait un problème ouvert sur stackoverflow.com à ce sujet sans explication pourquoi.

Un autre problème est qu’il est difficile d’obtenir le bon attribut sizes. Il y a beaucoup, beaucoup d’articles avec des explications très directes et incomplètes que j’ai franchement trouvées très frustrantes.

Cela étant dit, je ne discuterai pas de l’utilisation de <img /> pour les images réactives car cela ne sert à rien (à mon avis).

Utiliser des balises d’image

Les balises picture sont les meilleures de mon avis, elles nous permettent de manipuler et de demander au navigateur de charger l’image nous voulons.

Il prend également en charge de nombreuses autres fonctionnalités telles que la spécification de la direction artistique, des formats d’image alternatifs, etc. Avec ce bel ensemble de capacités, nous pouvons atteindre notre objectif.

Avertissement! L'inconvénient de cette balise est qu'Internet Explorer n'est pas pris en charge.

Pas de problème cependant, il était temps pour ce navigateur de mourir cette année .

Générer des dimensions d’image réactives

Comme mentionné ci-dessus, nous pouvons utiliser de nombreux outils en ligne pour redimensionner et générer les images et le code source corrects pour nous en quelques clics seulement.

Je vous recommande d’utiliser celui-ci: https://responsivebreakpoints.com/ comme point de départ. L’outil redimensionnera vos images et générera les points d’arrêt pour avoir des images réactives.

Par exemple, la photo du chien sur leur site aura plusieurs images différentes redimensionnées et leur code HTML respectif:

 1<picture>
 2	<source
 3		media="(max-width: 767px)"
 4		sizes="(max-width: 1534px) 100vw, 1534px"
 5		srcset="
 6		dog_ar_1_1,c_fill,g_auto__c_scale,w_200.jpg 200w,
 7		dog_ar_1_1,c_fill,g_auto__c_scale,w_493.jpg 493w,
 8		dog_ar_1_1,c_fill,g_auto__c_scale,w_707.jpg 707w,
 9		dog_ar_1_1,c_fill,g_auto__c_scale,w_877.jpg 877w,
10		dog_ar_1_1,c_fill,g_auto__c_scale,w_1032.jpg 1032w,
11		dog_ar_1_1,c_fill,g_auto__c_scale,w_1108.jpg 1108w,
12		dog_ar_1_1,c_fill,g_auto__c_scale,w_1259.jpg 1259w,
13		dog_ar_1_1,c_fill,g_auto__c_scale,w_1353.jpg 1353w,
14		dog_ar_1_1,c_fill,g_auto__c_scale,w_1468.jpg 1468w,
15		dog_ar_1_1,c_fill,g_auto__c_scale,w_1534.jpg 1534w">
16	<source
17		media="(min-width: 768px) and (max-width: 991px)"
18		sizes="(max-width: 1983px) 70vw, 1388px"
19		srcset="
20		dog_ar_4_3,c_fill,g_auto__c_scale,w_538.jpg 538w,
21		dog_ar_4_3,c_fill,g_auto__c_scale,w_793.jpg 793w,
22		dog_ar_4_3,c_fill,g_auto__c_scale,w_1004.jpg 1004w,
23		dog_ar_4_3,c_fill,g_auto__c_scale,w_1198.jpg 1198w,
24		dog_ar_4_3,c_fill,g_auto__c_scale,w_1238.jpg 1238w,
25		dog_ar_4_3,c_fill,g_auto__c_scale,w_1384.jpg 1384w,
26		dog_ar_4_3,c_fill,g_auto__c_scale,w_1388.jpg 1388w">
27	<source
28		media="(min-width: 992px) and (max-width: 1199px)"
29		sizes="(max-width: 2400px) 60vw, 1440px"
30		srcset="
31		dog_ar_16_9,c_fill,g_auto__c_scale,w_596.jpg 596w,
32		dog_ar_16_9,c_fill,g_auto__c_scale,w_877.jpg 877w,
33		dog_ar_16_9,c_fill,g_auto__c_scale,w_1086.jpg 1086w,
34		dog_ar_16_9,c_fill,g_auto__c_scale,w_1314.jpg 1314w,
35		dog_ar_16_9,c_fill,g_auto__c_scale,w_1440.jpg 1440w">
36	<img
37		sizes="(max-width: 7000px) 40vw, 2800px"
38		srcset="
39		dog_c_scale,w_480.jpg 480w,
40		dog_c_scale,w_713.jpg 713w,
41		dog_c_scale,w_1036.jpg 1036w,
42		dog_c_scale,w_1180.jpg 1180w,
43		dog_c_scale,w_1313.jpg 1313w,
44		dog_c_scale,w_1433.jpg 1433w,
45		dog_c_scale,w_1606.jpg 1606w,
46		dog_c_scale,w_1748.jpg 1748w,
47		dog_c_scale,w_1884.jpg 1884w,
48		dog_c_scale,w_2015.jpg 2015w,
49		dog_c_scale,w_2133.jpg 2133w,
50		dog_c_scale,w_2260.jpg 2260w,
51		dog_c_scale,w_2377.jpg 2377w,
52		dog_c_scale,w_2345.jpg 2345w,
53		dog_c_scale,w_1871.jpg 1871w,
54		dog_c_scale,w_2800.jpg 2800w"
55		src="dog_c_scale,w_2800.jpg"
56		alt="">
57</picture>

Remarquez combien de dimensions d’écran il couvre pour nous, cool non? Mais est-ce suffisant pour le copier-coller sur votre site? NON.

Le plus gros problème avec ces ensembles de sources d’images est les attributs sizes et media. C’est assez compliqué à comprendre et encore plus compliqué à faire fonctionner correctement.

Cela étant dit, ce que vous devez faire est de rendre le code plus court et plus compréhensible. Sur mon site Web (celui sur lequel vous lisez), j’ai utilisé les points d’arrêt réactifs généraux fournis par Bootstrap et créé mes propres ensembles.

Créez vous-même des dimensions d’image réactives

La meilleure (et franchement la seule solution) est de créer vous-même les balises d’image.

Cela fonctionne bien en votre faveur lorsque vous développez un site Web sur mesure à partir de zéro, mais lorsque vous avez quelque chose comme WordPress en place, c’est une autre histoire et il y aura un autre article à ce sujet.

Comme point de départ, j’avais besoin d’un moyen clair et facile de comprendre les points d’arrêt de l’appareil; j’ai donc utilisé ceux fournis par Bootstrap qui sont extrêmement fiables :

BreakpointDeviceDimension
X-SmallSmall devices (portrait phones, less than 576px)<576px
SmallSmall devices (landscape phones, 576px and up)≥576px
MediumMedium devices (tablets, 768px and up)≥768px
LargeLarge devices (desktops, 992px and up)≥992px
Extra largeLarge devices (large desktops, 1200px and up)≥1200px
Extra extra largeLarge devices (larger desktops, 1400px and up)≥1400px

Avec ce qui précède, j’ai créé mes “propres” ensembles de sources d’images qui chargent l’image appropriée selon les tailles d’appareil ci-dessus:

1<picture>
2	<source srcset="" media="(min-width: 1400px)">
3	<source srcset="" media="(min-width: 1200px)">
4	<source srcset="" media="(min-width: 992px)">
5	<source srcset="" media="(min-width: 768px)">
6	<source srcset="" media="(min-width: 576px)">
7	<source srcset="" media="(min-width: 320px)">
8	<img src="" width="" height="" class="" alt="" >
9</picture>

Cela me donne une vision claire et une compréhension de ce qui devrait se passer et comment. En d’autres termes, je sais quelle image doit être chargée sur chaque appareil et il le fera.

Bien que cela semble prêt à l’emploi, ce n’est pas encore tout à fait prêt. Le chargement de ces images sur un périphérique spécifique n’est pas suffisant car l’image peut être encore trop grande.

Exemple 1:

  • Sur un grand appareil (grands ordinateurs de bureau, 1200px et plus), votre conteneur dans lequel vous intégrez l’ensemble d’images est d’une taille fixe de 800px
  • Le navigateur regardera votre viewport qui est de 1920px par exemple, il chargera l’image de taille 1400px (alors qu’en fait vous auriez besoin de la taille d’image de 768px…)

Exemple 2:

  • Sur n’importe quel appareil, votre conteneur où vous intégrez le jeu d’images est d’une taille fixe de 400px (cela peut être une carte par exemple ou une simple boîte)
  • Le navigateur regardera votre viewport qui est de 1920px par exemple, il chargera l’image de taille 1400px (alors qu’en fait vous auriez besoin de la taille d’image de 320px…)

Cela étant dit, vous chargez la mauvaise image, cela vous coûte, à vous et à votre utilisateur. D’abord, vous perdez de la vitesse (ce qui affecte d’ailleurs votre classement SEO), puis votre utilisateur attend indéfiniment que l’image se charge s’il est sur un mobile ou une bande passante lente.

La solution appropriée consiste à examiner votre conteneur dans lequel vous intégrez l’image et à déterminer la bonne taille pour celle-ci.

Vous pouvez le faire très facilement en inspectant la page et en émulant différents appareils, généralement les conteneurs restent plus ou moins les mêmes.

Donc, pour l’exemple 1 ci-dessus, j’ai modifié mon code comme suit:

1<picture>
2	<source srcset="" media="(min-width: 1200px), (min-width: 1400px), (min-width: 2500px)">
3	<source srcset="" media="(min-width: 992px)">
4	<source srcset="" media="(min-width: 768px)">
5	<source srcset="" media="(min-width: 576px)">
6	<source srcset="" media="(min-width: 320px)">
7	<img src="" width="" height="" class="" alt="">
8</picture>

Qu’est-ce que cela signifie? C’est assez explicite mais je vais quand même expliquer:

  • Sur un appareil de largeur minimale 320px, chargez l’image 320px
  • Sur un appareil de largeur minimale 576px, chargez l’image 576px
  • Sur un appareil de largeur minimale 768px, chargez l’image 768px
  • Sur un appareil de largeur minimale 992px, chargez l’image 992px
  • Sur un appareil d’au moins largeur 1200px OU 1400px OU 2500px chargez l’image 1200px

La dernière ligne garantit que le navigateur ne charge pas une taille d’image plus grande lorsque la taille du conteneur n’est que de 800px (ou 1200px dans mon cas lorsque vous cliquez sur développer l’article)

Je trouve que ce qui précède est presque parfait en termes de chargement de la bonne taille d’image. Même Google Pagespeed l’aime et ne génère aucun avertissement puisque nous chargeons la bonne taille d’image.

Tester vos images réactives

Je suis à peu près sûr qu’après avoir lu ce qui précède, vous avez une idée générale de la façon de tester si vos images se chargent correctement, mais je vais quand même vous expliquer.

Le processus de test peut être intimidant si vous avez beaucoup d’images, mais cela en vaut la peine.

Ce que vous devez faire est simple, cela prend juste un peu de temps :

  • Ouvrez le navigateur de votre choix et chargez votre page
  • Ouvrez les outils de développement et allez dans l’onglet Réseau et sélectionnez uniquement le filtre “Images”
  • Actualisez votre page sur plusieurs appareils (mobiles, tablettes, etc.) et voyez quelles images se chargent

C’est vraiment ça, rien d’extraordinaire.

Trucs et astuces

  • Si vous avez plusieurs images (plus qu’un en-tête), utilisez l’attribut loading=lazy. Vous pouvez en savoir plus à ce sujet ici .
  • Si vous ne pouvez pas exporter vos images/les redimensionner vous-même, vous pouvez utiliser le service en ligne pour le faire. Ils offriront également un CDN qui chargera vos images à une vitesse folle. Je vous recommande d’utiliser Cloudflare Images .
  • Nommez vos images correctement, c’est très important. Si vous ne nommez pas correctement vos images (par exemple, image-small.jpg ou image-320.jpg), vous ne pouvez pas déterminer facilement quelle image se charge lorsque vous testez.

Voilà, j’espère que cet article vous a aidé.