Images responsives

Sur le Web, le texte s'affiche automatiquement sur plusieurs lignes lorsqu'il atteint le bord de l'écran pour éviter de déborder. Les images, en revanche, ont une taille intrinsèque. Si une image est plus large que l'écran, elle le dépasse et l'utilisateur doit faire défiler l'écran horizontalement pour la voir en entier.

Heureusement, les CSS vous fournissent des outils pour éviter cela.

Limiter vos images

Dans votre feuille de style, vous pouvez utiliser max-inline-size pour déclarer que les images ne peuvent jamais être affichées à une taille supérieure à celle de leur élément conteneur.

img {
  max-inline-size: 100%;
  block-size: auto;
}

Vous pouvez également appliquer la même règle à d'autres types de contenus intégrés, comme les vidéos et les iFrames.

img,
video,
iframe {
  max-inline-size: 100%;
  block-size: auto;
}

Avec cette règle en place, les navigateurs réduisent automatiquement la taille des images pour les adapter à l'écran.

Si vous ajoutez une valeur block-size de auto, le navigateur conserve le format de vos images lorsqu'il les redimensionne.

Parfois, les dimensions d'une image sont définies par un système de gestion de contenu (CMS) ou un autre système de diffusion de contenu. Si votre conception nécessite un format différent de celui par défaut du CMS, vous pouvez utiliser la propriété aspect-ratio pour préserver la conception de votre site :

img {
  max-inline-size: 100%;
  block-size: auto;
  aspect-ratio: 2/1;
}

Malheureusement, cela signifie souvent que le navigateur doit compresser ou étirer l'image pour qu'elle s'adapte à l'espace prévu.

Pour éviter l'écrasement et l'étirement, utilisez la propriété object-fit.

Une valeur contain pour object-fit indique au navigateur de conserver le format de l'image, en laissant un espace vide autour de l'image si nécessaire.

img {
  max-inline-size: 100%;
  block-size: auto;
  aspect-ratio: 2/1;
  object-fit: contain;
}

Une valeur cover pour object-fit indique au navigateur de conserver les proportions de l'image et de la recadrer si nécessaire.

img {
  max-inline-size: 100%;
  block-size: auto;
  aspect-ratio: 2/1;
  object-fit: cover;
}

Vous pouvez modifier la position du recadrage de l'image à l'aide de la propriété object-position. Cela permet d'ajuster la mise au point du recadrage afin de vous assurer que la partie la plus importante de l'image reste visible.

img {
  max-inline-size: 100%;
  block-size: auto;
  aspect-ratio: 2/1;
  object-fit: cover;
  object-position: top center;
}

Diffuser vos images

Ces règles CSS indiquent au navigateur comment vous souhaitez que les images soient affichées. Vous pouvez également fournir des indications dans votre code HTML sur la façon dont le navigateur doit gérer ces images.

Conseils pour choisir la bonne taille

Si vous connaissez les dimensions de votre image, incluez toujours les attributs width et height. Même si l'image est affichée dans une taille différente en raison de votre règle max-inline-size, le navigateur connaît toujours le rapport largeur/hauteur et peut réserver la bonne quantité d'espace. Cela empêche le reste de votre contenu de bouger lorsque l'image se charge.

<img
 src="image.png"
 alt="A description of the image."
 width="300"
 height="200"
>

Conseils de chargement

Utilisez l'attribut loading pour indiquer au navigateur s'il doit retarder le chargement de l'image jusqu'à ce qu'elle se trouve dans ou à proximité de la fenêtre d'affichage. Pour les images situées sous la ligne de flottaison, utilisez la valeur lazy. Le navigateur ne chargera les images différées que lorsque l'utilisateur aura fait défiler la page suffisamment loin pour que l'image soit sur le point d'apparaître. Si l'utilisateur ne fait jamais défiler la page, l'image ne se charge jamais.

<img
 src="image.png"
 alt="A description of the image."
 width="300"
 height="200"
 loading="lazy"
>

Pour une image de bannière au-dessus de la ligne de flottaison, n'utilisez pas loading. Si votre site applique automatiquement l'attribut loading="lazy", vous pouvez généralement définir loading sur la valeur par défaut eager pour empêcher le chargement différé des images :

<img
 src="hero.jpg"
 alt="A description of the image."
 width="1200"
 height="800"
 loading="eager"
>

Priorité de récupération

Pour les images importantes, comme l'image LCP, vous pouvez encore prioriser le chargement à l'aide de la priorité de récupération en définissant l'attribut fetchpriority sur high :

<img
 src="hero.jpg"
 alt="A description of the image."
 width="1200"
 height="800"
 loading="eager"
 fetchpriority="high"
>

Cela indique au navigateur de récupérer l'image immédiatement et avec une priorité élevée, au lieu d'attendre qu'il ait terminé sa mise en page et qu'il récupère normalement les images.

Toutefois, lorsque vous demandez au navigateur de télécharger une ressource en priorité, comme une image, il doit réduire la priorité d'une autre ressource, comme un script ou un fichier de police. Ne définissez fetchpriority="high" sur une image que si c'est vraiment indispensable.

Conseils pour le préchargement

Il est préférable d'éviter le préchargement dans la mesure du possible en incluant toutes les images dans le fichier HTML initial. Toutefois, certaines images peuvent ne pas être disponibles, comme celles ajoutées par JavaScript ou une image de fond CSS.

Vous pouvez utiliser le préchargement pour que le navigateur récupère ces images importantes à l'avance. Pour les images vraiment importantes, vous pouvez combiner ce préchargement avec l'attribut fetchpriority :

<link rel="preload" href="hero.jpg" as="image" fetchpriority="high">

Encore une fois, utilisez ces attributs avec parcimonie pour éviter de remplacer trop souvent les heuristiques de priorisation du navigateur. Une utilisation excessive peut entraîner une dégradation des performances.

Certains navigateurs sont compatibles avec le préchargement d'images responsives basé sur srcset, à l'aide des attributs imagesrcset et imagesizes. Exemple :

<link rel="preload" imagesrcset="hero_sm.jpg 1x hero_med.jpg 2x hero_lg.jpg 3x" as="image" fetchpriority="high">

En excluant la solution de secours href, vous pouvez vous assurer que les navigateurs sans prise en charge de srcset préchargent toujours la bonne image.

Vous ne pouvez pas précharger des images dans différents formats en fonction de la compatibilité du navigateur avec certains formats. Si vous essayez de le faire, vous risquez d'entraîner des téléchargements supplémentaires qui gaspillent les données des utilisateurs.

Images responsives avec srcset

Grâce à cette déclaration max-inline-size: 100%, vos images ne peuvent pas sortir de leurs conteneurs. Toutefois, si un utilisateur dispose d'un petit écran et d'un réseau à faible bande passante, le fait de lui faire télécharger des images de la même taille que celles des utilisateurs disposant d'écrans plus grands gaspille des données.

Pour résoudre ce problème, ajoutez plusieurs versions de la même image dans différentes tailles et utilisez l'attribut srcset pour indiquer au navigateur que ces tailles existent et quand les utiliser.

Descripteur de largeur

Vous pouvez définir un srcset à l'aide d'une liste de valeurs séparées par une virgule. Chaque valeur correspond à l'URL d'une image, suivie d'un espace, puis de métadonnées sur l'image, appelées descripteur.

Dans cet exemple, les métadonnées décrivent la largeur de chaque image à l'aide de l'unité w. Un w correspond à la largeur d'un pixel.

<img
 src="small-image.png"
 alt="A description of the image."
 width="300"
 height="200"
 loading="lazy"
 decoding="async"
 srcset="small-image.png 300w,
  medium-image.png 600w,
  large-image.png 1200w"
>

L'attribut srcset complète l'attribut src au lieu de le remplacer. Vous devez toujours disposer d'un attribut src valide, mais le navigateur peut remplacer sa valeur par l'une des options listées dans srcset. Pour économiser de la bande passante, le navigateur ne télécharge l'image plus grande que si elle est nécessaire.

Tailles

Si vous utilisez le descripteur de largeur, vous devez également utiliser l'attribut sizes pour fournir plus d'informations au navigateur. Cela indique au navigateur la taille à laquelle vous souhaitez que l'image s'affiche dans différentes conditions. Ces conditions sont spécifiées dans une requête média.

L'attribut sizes accepte une liste de requêtes média et de largeurs d'image séparées par une virgule.

<img
 src="small-image.png"
 alt="A description of the image."
 width="300"
 height="200"
 loading="lazy"
 decoding="async"
 srcset="small-image.png 300w,
  medium-image.png 600w,
  large-image.png 1200w"
 sizes="(min-width: 66em) 33vw,
  (min-width: 44em) 50vw,
  100vw"
>

Dans cet exemple, vous indiquez au navigateur que dans une fenêtre d'affichage dont la largeur est supérieure à 66em, l'image ne doit pas dépasser un tiers de la largeur de l'écran (dans une mise en page à trois colonnes, par exemple).

Pour les largeurs de fenêtre d'affichage comprises entre 44em et 66em, affichez l'image à la moitié de la largeur de l'écran (comme dans une mise en page à deux colonnes).

Pour toute largeur inférieure à 44em, affichez l'image sur toute la largeur de l'écran.

Cela signifie que l'image la plus grande ne sera pas forcément utilisée pour l'écran le plus large. Une fenêtre de navigateur large pouvant afficher une mise en page à plusieurs colonnes utilise une image qui tient dans une colonne, qui peut être plus petite qu'une image utilisée pour une mise en page à une seule colonne sur un écran plus étroit.

Descripteur de densité de pixels

Vous pouvez également utiliser des descripteurs pour fournir une version alternative des images à afficher sur les écrans haute densité, afin de conserver la netteté des images aux résolutions plus élevées qu'ils offrent.

Utilisez le descripteur de densité pour décrire la densité en pixels de l'image par rapport à celle de l'image dans l'attribut src. Le descripteur de densité est un nombre suivi de la lettre x, comme dans 1x ou 2x.

<img
 src="small-image.png"
 alt="A description of the image."
 width="300"
 height="200"
 loading="lazy"
 decoding="async"
 srcset="small-image.png 1x,
  medium-image.png 2x,
  large-image.png 3x"
>

Si small-image.png mesure 300 x 200 pixels et que medium-image.png mesure 600 x 400 pixels, alors medium-image.png peut être suivi de 2x dans la liste srcset.

Vous n'avez pas besoin d'utiliser des nombres entiers. Si une autre version de l'image mesure 450 x 300 pixels, vous pouvez la décrire avec 1.5x.

Images de présentation

Dans le code HTML, les images sont considérées comme du contenu. C'est pourquoi vous incluez l'attribut alt avec une description de l'image pour les lecteurs d'écran et les moteurs de recherche.

Si vous intégrez une image décorative, sans contenu significatif, vous pouvez utiliser un attribut alt vide.

<img
 src="flourish.png"
 alt=""
 width="400"
 height="50"
>

Vous devez toujours inclure l'attribut alt, même s'il est vide. Un attribut alt vide indique à un lecteur d'écran que l'image est de présentation. Un attribut alt manquant ne fournit pas ces informations.

Idéalement, les images de présentation ou décoratives sont incluses avec le CSS plutôt qu'avec le HTML. HTML pour la structure. Le CSS est utilisé pour la présentation.

Image de fond

Utilisez la propriété background-image dans CSS pour charger les images de présentation.

element {
  background-image: url(flourish.png);
}

Vous pouvez spécifier plusieurs candidats d'image à l'aide de la fonction image-set pour background-image.

La fonction image-set en CSS fonctionne de la même manière que l'attribut srcset en HTML. Fournissez une liste d'images avec un descripteur de densité de pixels pour chacune d'elles.

element {
  background-image: image-set(
    small-image.png 1x,
    medium-image.png 2x,
    large-image.png 3x
  );
}

Le navigateur choisit l'image la plus appropriée à la densité de pixels de l'appareil.

De nombreux facteurs sont à prendre en compte lorsque vous ajoutez des images à votre site, y compris :

• Réserver l'espace approprié pour chaque image.
• Déterminez le nombre de tailles dont vous avez besoin.
• Déterminer si l'image est un contenu ou un élément décoratif.

Il vaut la peine de prendre le temps de choisir les bonnes images. De mauvaises stratégies d'image peuvent agacer et frustrer vos utilisateurs. Une bonne stratégie d'images permet à votre site d'être rapide et clair, quels que soient l'appareil ou la connexion réseau de l'utilisateur.

Il existe un autre élément HTML dans votre boîte à outils qui vous permet de mieux contrôler vos images : l'élément picture.

Vérifiez vos connaissances

Testez vos connaissances sur les images.