Le texte sur le Web est automatiquement renvoyé à la ligne sur le bord de l'écran pour éviter tout dépassement. 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 entièrement.
Heureusement, le CSS vous fournit des outils pour mettre fin à cette situation.
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 plus large que leur élément qui les contient.
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, tels que des vidéos et des iFrames.
img,
video,
iframe {
max-inline-size: 100%;
block-size: auto;
}
Une fois cette règle en place, les navigateurs réduisent automatiquement les images pour les adapter à l'écran.
Si vous ajoutez la valeur block-size de auto, le navigateur conserve le format de vos images pendant qu'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 agrandir 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 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 définie sur 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;
}
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 de l'image afin de vous assurer que la partie la plus importante de l'image est toujours visible.
img {
max-inline-size: 100%;
block-size: auto;
aspect-ratio: 2/1;
object-fit: cover;
object-position: top center;
}
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 s'affichent. Vous pouvez également indiquer dans votre code HTML la manière dont le navigateur doit gérer ces images.
Conseils de dimensionnement
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 l'espace approprié. Cela empêche vos autres contenus de sauter lors du chargement de l'image.
<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 la fenêtre d'affichage ou à proximité. Pour les images en dessous de la ligne de flottaison, utilisez la valeur lazy. Le navigateur ne charge pas les images différées tant que l'utilisateur n'a pas fait défiler la page suffisamment bas pour afficher l'image. 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 héros 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 de eager pour éviter 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 telles que l'image LCP, vous pouvez hiérarchiser davantage le chargement à l'aide de l'option Fetch Priority (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 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 prioriser le téléchargement d'une ressource, comme une image, il doit diminuer la priorité d'une autre ressource, comme un script ou un fichier de police. Ne définissez fetchpriority="high" sur une image que si elle est vraiment essentielle.
Conseils pour le préchargement
Dans la mesure du possible, il est préférable d'éviter le préchargement en incluant toutes les images dans le fichier HTML initial. Cependant, certaines images peuvent ne pas être disponibles, telles que les images ajoutées par JavaScript ou une image de fond CSS.
Vous pouvez utiliser le préchargement pour que le navigateur récupère à l'avance ces images importantes. 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">
Là encore, utilisez ces attributs avec parcimonie pour éviter de remplacer trop souvent l'heuristique de priorisation du navigateur. Leur utilisation excessive peut dégrader les performances.
Certains navigateurs acceptent le préchargement des images responsives en fonction 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 la création de remplacement href, vous pouvez vous assurer que les navigateurs non compatibles avec srcset préchargent toujours la bonne image.
Vous ne pouvez pas précharger les images dans différents formats en fonction de la compatibilité du navigateur avec certains formats. Si vous tentez de le faire, vous risquez d'effectuer des téléchargements supplémentaires et de gaspiller les données des utilisateurs.
Décodage des images
Il existe également un attribut decoding que vous pouvez ajouter 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 traiter en priorité 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. Cela n'affecte que le fait que le navigateur attende que le décodage de l'image ait lieu avant d'afficher d'autres contenus.
Dans la plupart des cas, cela n'a pas beaucoup d'impact, mais cela peut parfois permettre au navigateur d'afficher votre image ou un autre contenu légèrement plus rapidement. Par exemple, pour un document volumineux comportant de nombreux éléments dont l'affichage prend du temps et pour des images volumineuses dont le décodage prend beaucoup de temps, définir sync sur les images importantes indique au navigateur d'attendre l'image et d'afficher les deux en même temps. Vous pouvez également définir async pour permettre au navigateur d'afficher le contenu plus rapidement, sans attendre le décodage de l'image.
Toutefois, la meilleure option consiste généralement à éviter les tailles DOM excessives et à 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 déborder de leurs conteneurs. Toutefois, si un utilisateur dispose d'un petit écran et d'un réseau à faible bande passante, le fait qu'il télécharge des images de la même taille que les utilisateurs ayant un écran plus grand gaspille des données.
Pour résoudre ce problème, ajoutez plusieurs versions de la même image dans différentes tailles, puis utilisez l'attribut srcset pour indiquer au navigateur que ces tailles existent et quand les utiliser.
Descripteur de largeur
Vous pouvez définir une srcset à l'aide d'une liste de valeurs séparées par une virgule. Chaque valeur est l'URL d'une image, suivie d'un espace, puis de quelques métadonnées concernant l'image, appelées descripteurs.
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 répertoriées dans le fichier srcset. Pour économiser de la bande passante, le navigateur ne télécharge l'image plus grande que si nécessaire.
Tailles
Si vous utilisez le descripteur de largeur, vous devez également utiliser l'attribut sizes pour fournir plus d'informations au navigateur. Elle indique au navigateur la taille d'affichage que vous souhaitez lui donner 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 d'une largeur supérieure à 66em, l'image ne doit pas dépasser un tiers de l'écran (dans une mise en page en 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).
Si la largeur est inférieure à 44em, affichez l'image en pleine largeur de l'écran.
Cela signifie que l'image la plus grande ne sera pas nécessairement utilisée pour le plus grand écran. Une fenêtre de navigateur large pouvant afficher une mise en page à plusieurs colonnes utilise une image qui tient dans une seule colonne, et qui peut être plus petite qu'une image utilisée pour une mise en page en une seule colonne sur un écran plus étroit.
Descripteur de densité de pixels
Vous pouvez également utiliser des descripteurs pour fournir une autre version des images à afficher sur des écrans haute densité, afin que les images restent nettes avec les résolutions plus élevées qu'elles fournissent.
Utilisez le descripteur de densité pour décrire la densité en pixels de l'image par rapport à celle-ci 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 la taille de small-image.png est de 300 x 200 pixels et que celle de medium-image.png est de 600 x 400 pixels, medium-image.png peut comporter 2x après dans la liste srcset.
Vous n'êtes pas obligé d'utiliser des nombres entiers. Si une autre version de l'image est de 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 intégrez une image décorative sans contenu pertinent, 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 présentation. Un attribut alt manquant ne fournit pas cette information.
Dans l'idéal, les images de présentation ou de décoration sont incluses en CSS plutôt qu'en HTML. HTML est pour la structure. Le CSS est destiné à la présentation.
Image de fond
Utilisez la propriété background-image dans 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 de manière très semblable à l'attribut srcset en HTML.
Fournissez une liste d'images avec un descripteur de densité de pixels pour chacune.
element {
background-image: image-set(
small-image.png 1x,
medium-image.png 2x,
large-image.png 3x
);
}
Le navigateur choisit l'image la mieux adaptée à la densité en pixels de l'appareil.
Vous devez tenir compte de nombreux facteurs lorsque vous ajoutez des images à votre site, y compris les suivants:
- Réserver l'espace approprié pour chaque image.
- Déterminer le nombre de tailles dont vous avez besoin.
- Déterminer si l'image est de contenu ou décorative.
Il est utile de prendre le temps d'obtenir des images correctes. De mauvaises stratégies d'image peuvent agacer et frustrer vos utilisateurs. Une bonne stratégie d'image permet de rendre votre site net et précis, quel que soit l'appareil ou la connexion réseau de l'utilisateur.
Votre kit d'outils contient un autre élément HTML pour vous donner plus de contrôle sur vos images: l'élément picture.
Testez vos connaissances
Testez vos connaissances sur les images.
Des styles doivent être ajoutés pour que les images s'intègrent à la fenêtre d'affichage.
Lorsque la hauteur et la largeur d'une image ont été formulées dans un format anormal, quels styles peuvent aider à ajuster la façon dont l'image s'adapte à ces proportions ?
object-fitcontain et cover.image-fitfit-imageaspect-ratioEn ajoutant height et width à vos images, vous empêchez CSS de définir un style différent.
L'attribut srcset ne _______ pas l'attribut src, mais le _______.
srcset ne remplace pas l'attribut src.Un élément alt manquant sur une image équivaut à un élément alt vide.
alt vide indique à un lecteur d'écran que l'image est une image de présentation.alt ne signale aucun lecteur d'écran.