Images responsives

Le texte sur le Web se plie automatiquement au bord de l'écran pour ne pas déborder. Les images, en revanche, ont une taille intrinsèque. Si une image est plus large que l'écran, elle déborde et l'utilisateur doit faire défiler l'écran horizontalement pour la voir dans son intégralité.

Heureusement, CSS vous fournit des outils pour éviter cela.

Contraindre 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 dans une taille plus large que leur élément contenant.

Browser Support

  • Chrome: 57.
  • Edge: 79.
  • Firefox: 41.
  • Safari: 12.1.

Source

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 qu'elles s'adaptent à l'écran.

Deux captures d'écran : la première montre une image qui s'étend au-delà de la largeur du navigateur ; la seconde montre la même image limitée dans le champ de vision du navigateur.
En limitant votre image, les utilisateurs peuvent la voir entièrement sans avoir à faire défiler l'écran.

Ajouter une valeur block-size de auto signifie que 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 conserver 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 écraser ou étirer l'image pour l'adapter à l'espace prévu.

Profil d'un chien beau et heureux avec une balle dans la gueule, mais l'image est écrasée.
Modifier le format de l'image la fait paraître écrasée ou étirée.

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

Browser Support

  • Chrome: 32.
  • Edge: 79.
  • Firefox: 36.
  • Safari: 10.

Source

Une valeur object-fit de contain 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 object-fit de cover indique au navigateur de conserver le format de l'image, en la recadrant si nécessaire.

img {
  max-inline-size: 100%;
  block-size: auto;
  aspect-ratio: 2/1;
  object-fit: cover;
}
Profil d'un chien beau et heureux avec une balle dans la gueule. Il y a de l'espace supplémentaire de chaque côté de l'image. Profil d'un chien beau et heureux avec une balle dans la gueule. L'image a été recadrée en haut et en bas.
Même image avec deux valeurs différentes pour "object-fit" appliquées. La première a une valeur "object-fit" de "contain". La seconde a une valeur "object-fit" de "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.

Browser Support

  • Chrome: 32.
  • Edge: 79.
  • Firefox: 36.
  • Safari: 10.

Source

img {
  max-inline-size: 100%;
  block-size: auto;
  aspect-ratio: 2/1;
  object-fit: cover;
  object-position: top center;
}
Profil d'un chien beau et heureux avec une balle dans la gueule. L'image n'a été recadrée qu'en bas.
Vous pouvez définir object-position pour ne recadrer qu'un seul côté de votre image.

Envoyer 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 le dimensionnement

Si vous connaissez les dimensions de votre image, incluez toujours les attributs width et height. Même si l'image est affichée à une taille différente en raison de votre règle max-inline-size, le navigateur connaît toujours le format et peut réserver la bonne quantité d'espace. Cela évite que vos autres contenus ne sautent lorsque l'image se charge.

<img
 src="image.png"
 alt="A description of the image."
 width="300"
 height="200"
>
La première vidéo montre une mise en page sans dimensions d'image définies. Notez que le texte saute lorsque les images se chargent. Dans la deuxième vidéo, les dimensions de l'image ont été fournies. Le navigateur laisse donc de l'espace pour l'image et le texte ne saute pas lorsque l'image se charge.

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 la fenêtre d'affichage ou à proximité. Pour les images situées en dessous de la ligne de flottaison, utilisez la valeur lazy. Le navigateur ne charge pas les images lazy load tant que l'utilisateur n'a pas fait défiler la page suffisamment vers le bas pour que l'image soit sur le point d'apparaître. Si l'utilisateur ne fait jamais défiler l'écran, l'image ne se charge jamais.

<img
 src="image.png"
 alt="A description of the image."
 width="300"
 height="200"
 loading="lazy"
>
Les images chargées de manière différée attendent d'être chargées jusqu'à ce que l'utilisateur soit sur le point de les faire défiler.

Pour une image hero au-dessus du pli, 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é d'exploration

Pour les images importantes, telles que l'image LCP, vous pouvez hiérarchiser davantage 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 en priorité, au lieu d'attendre que le navigateur ait terminé sa mise en page et qu'il récupère les images normalement.

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

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 être indisponibles, comme celles ajoutées par JavaScript ou une image de fond CSS.

Vous pouvez utiliser le préchargement pour demander au navigateur d'extraire 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 acceptent le préchargement des images responsives sur la base de 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 le remplacement href, vous pouvez vous assurer que les navigateurs qui ne sont pas compatibles avec srcset préchargent toujours l'image correcte.

Vous ne pouvez pas précharger des images dans différents formats en fonction de la compatibilité du navigateur avec certains formats. Cela peut entraîner des téléchargements supplémentaires qui gaspillent les données des utilisateurs.

Décodage d'image

Vous pouvez également ajouter un attribut decoding aux éléments img. Vous pouvez indiquer au navigateur que l'image peut être décodée de manière asynchrone afin qu'il puisse donner la priorité au traitement d'autres contenus.

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

Vous pouvez utiliser la valeur sync si l'image elle-même est le contenu le plus important à prioriser.

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

L'attribut decoding ne modifie pas la vitesse de décodage de l'image. Il ne concerne que le fait que le navigateur attende que ce décodage d'image se produise avant d'afficher d'autres contenus.

Dans la plupart des cas, cela n'a pas d'impact, mais cela peut parfois permettre au navigateur d'afficher votre image ou d'autres contenus légèrement plus rapidement. Par exemple, pour un grand document contenant de nombreux éléments qui prennent du temps à s'afficher et de grandes images qui prennent beaucoup de temps à être décodées, définir sync sur les images importantes indique au navigateur d'attendre l'image et de les afficher toutes les deux en même temps. Vous pouvez également définir async pour permettre au navigateur d'afficher le contenu plus rapidement et sans attendre le décodage de l'image.

Toutefois, la meilleure option consiste généralement à essayer d'éviter les tailles DOM excessives et d'utiliser des images responsives pour réduire le temps de décodage, plutôt que d'utiliser decoding.

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 de 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 multimédia.

L'attribut sizes accepte une liste de requêtes multimédias 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 un viewport dont la largeur est supérieure à 66em, il ne doit pas afficher l'image sur plus d'un tiers de l'écran (dans une mise en page à trois colonnes, par exemple).

Pour les largeurs de vue 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 nécessairement utilisée pour l'écran le plus large. Une fenêtre de navigateur large pouvant afficher une mise en page multicolonne utilise une image qui s'adapte à 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.

Utilisez des descripteurs de taille pour modifier la mise en page de votre page sur différentes tailles d'écran.

Descripteur de densité de pixels

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

Deux versions de la même image d&#39;un chien beau et heureux avec une balle dans la gueule, l&#39;une nette et l&#39;autre floue.
Les images dont la densité de pixels est plus faible peuvent sembler floues.

Utilisez le descripteur de densité pour décrire la densité de pixels de l'image par rapport à celle de 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, 2x peut suivre medium-image.png dans la liste srcset.

Vous n'êtes pas obligé 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

Les images en HTML sont du contenu. C'est pourquoi vous devez inclure l'attribut alt avec une description de l'image pour les lecteurs d'écran et les moteurs de recherche.

Si vous insérez 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. L'absence d'un attribut alt ne fournit pas ces informations.

Idéalement, les images de présentation ou décoratives sont incluses avec CSS plutôt qu'avec HTML. Le code HTML sert à structurer le contenu. Le CSS est destiné à la présentation.

Image de fond

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

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

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

La fonction image-set en CSS fonctionne beaucoup comme 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 adaptée à la densité de pixels de l'appareil.

Vous devez prendre en compte de nombreux facteurs lorsque vous ajoutez des images à votre site, y compris:

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

Prenez le temps de bien choisir vos images. De mauvaises stratégies d'image peuvent agacer et frustrer vos utilisateurs. Une bonne stratégie d'images rend votre site plus fluide et plus net, quel que soit l'appareil ou la connexion réseau de l'utilisateur.

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

Vérifier vos connaissances

Testez vos connaissances sur les images.

Des styles doivent être ajoutés pour que les images s'adaptent à la fenêtre d'affichage.

Vrai
Les images sans structuration auront la même taille que leur taille naturelle.
Faux
Les styles sont obligatoires.

Lorsque la hauteur et la largeur d'une image ont été forcées dans un format inhabituel, quels styles peuvent aider à ajuster l'image à ces proportions ?

object-fit
Spécifiez comment l'image correspond aux mots clés tels que contain et cover.
image-fit
Cette propriété n'existe pas, je l'ai inventée.
fit-image
Cette propriété n'existe pas, je l'ai inventée.
aspect-ratio
Cela peut entraîner ou résoudre un format d'image anormal.

Si vous ajoutez height et width à vos images, le CSS ne pourra pas les styliser différemment.

Vrai
Considérez-les plutôt comme des conseils que des règles.
Faux
Le CSS propose de nombreuses options dynamiques pour dimensionner les images, même si la hauteur et la largeur sont intégrées à la balise.

L'attribut srcset ne _______ pas l'attribut src, il le _______.

complément, remplace
srcset ne remplace pas l'attribut src.
remplacent, complètent
Il fournit des options supplémentaires au navigateur, si celui-ci en est capable.

L'absence de alt sur une image est équivalente à un alt vide.

Vrai
Un attribut alt vide indique à un lecteur d'écran que cette image est à des fins de présentation.
Faux
L'absence de alt ne transmet rien à un lecteur d'écran.