Le texte s'affiche automatiquement sur les bords de l'écran afin d'éviter tout dépassement. C'est différent avec des images. Les images ont une taille intrinsèque. Si une image est plus large que l'écran, elle déborde, ce qui entraîne l'affichage d'une barre de défilement horizontale.
Heureusement, vous pouvez prendre des mesures en CSS pour éviter que cela ne se produise.
Contraindre vos images
Dans votre feuille de style, vous pouvez utiliser max-inline-size pour déclarer que les images ne doivent jamais être affichées dans une taille plus large que 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, tels que des vidéos et des cadres iFrame.
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 une valeur block-size de auto, le format des images restera constant.
Parfois, les dimensions d'une image peuvent être hors de votre contrôle (si une image est ajoutée via un système de gestion de contenu, par exemple). Si votre conception exige que les images aient un format différent de leurs dimensions réelles, utilisez la propriété aspect-ratio en CSS.
img {
max-inline-size: 100%;
block-size: auto;
aspect-ratio: 2/1;
}
Toutefois, le navigateur risque d'écraser ou d'étirer l'image afin qu'elle s'adapte au format de votre choix.
Pour éviter cela, utilisez la propriété object-fit.
Une valeur object-fit de contain indique au navigateur de conserver le format de l'image, même si cela implique de laisser un espace vide au-dessus et en dessous.
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, même si cela implique de recadrer l'image en haut et en bas.
img {
max-inline-size: 100%;
block-size: auto;
aspect-ratio: 2/1;
object-fit: cover;
}
Si vous rencontrez un problème de recadrage régulier en haut et en bas, utilisez la propriété CSS object-position pour ajuster la zone de recadrage.
Vous pouvez faire en sorte que les images les plus importantes restent visibles.
img {
max-inline-size: 100%;
block-size: auto;
aspect-ratio: 2/1;
object-fit: cover;
object-position: top center;
}
Envoyer vos images
Ces règles CSS indiquent au navigateur le mode de rendu des images. Vous pouvez également fournir des indications dans votre code HTML sur la façon dont le navigateur doit gérer ces images.
Conseils de dimensionnement
Si vous connaissez les dimensions de l'image, vous devez inclure les attributs width et height. Même si l'image est affichée dans une taille différente (en raison de la règle max-inline-size: 100%), le navigateur connaît le rapport largeur/hauteur et peut réserver la bonne quantité d'espace. Ainsi, les autres contenus ne sauteront pas au chargement de l'image.
<img
src="image.png"
alt="A description of the image."
width="300"
height="200"
>
Chargement des conseils...
Utilisez l'attribut loading pour indiquer au navigateur s'il faut 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 que les images soient sur le point de s'afficher. 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, loading ne doit pas être utilisé. Si votre site applique automatiquement l'attribut loading="lazy", vous pouvez généralement définir l'attribut eager (par défaut) pour empêcher son application:
<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 prioriser davantage le chargement à l'aide de la règle Fetch Priority 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 qu'il doit récupérer l'image immédiatement et avec une priorité élevée, au lieu d'attendre que le navigateur ait terminé la mise en page alors que les images sont normalement extraites.
Gardez toutefois à l'esprit que lorsque vous demandez au navigateur de prioriser le téléchargement d'une ressource (comme une image), le navigateur 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 de préchargement
Il est possible que certaines images ne soient pas disponibles dans le code HTML initial si elles ont été ajoutées en JavaScript, ou en tant qu'images de fond dans CSS. Vous pouvez également utiliser le préchargement pour permettre la récupération anticipée de ces images importantes. Cet attribut peut être associé à l'attribut fetchpriority pour les images très importantes:
<link rel="preload" href="hero.jpg" as="image" fetchpriority="high">
Là encore, il convient d'utiliser cette approche avec parcimonie pour éviter de remplacer trop souvent l'heuristique de priorisation des navigateurs, ce qui pourrait dégrader les performances.
Le préchargement d'images responsives basé sur "srcset" (décrit ci-dessous) via les attributs imagesrcset et imagesizes est plus avancé et est compatible avec certains navigateurs, mais pas dans tous:
En excluant la création de remplacement href, vous vous assurez que les navigateurs non compatibles ne préchargent pas l'image incorrecte.
Le préchargement basé sur différents formats d'image en fonction de la compatibilité du navigateur avec ces images n'est actuellement pas pris en charge et peut entraîner des téléchargements supplémentaires.
L'idéal est d'éviter le préchargement dans la mesure du possible et d'avoir l'image disponible dans le code HTML initial, d'éviter la répétition du code et de permettre l'accès à la gamme complète des options prises en charge par le navigateur.
Décodage des images
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. Le navigateur peut alors traiter en priorité les 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 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, mais simplement si le navigateur attend que le décodage de l'image ait lieu avant d'afficher d'autres contenus.
Dans la plupart des cas, l'impact est faible, mais dans certains cas, l'image ou le contenu peut s'afficher un peu plus rapidement. Par exemple, pour un document volumineux comportant de nombreux éléments dont l'affichage prend du temps, ainsi que pour les grandes images dont le décodage prend du temps, définir sync sur les images importantes indique au navigateur d'attendre l'image et d'afficher les deux en même temps. La définition de async permet également 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 de DOM excessives et à s'assurer que des images responsives sont utilisées afin de réduire le temps de décodage. Cela signifie que l'attribut de décodage aura peu d'effet.
Images responsives avec srcset
Grâce à cette déclaration max-inline-size: 100%, vos images ne sortiront jamais de leurs conteneurs. En revanche, une grande image qui se rétrécit pour tenir sur la taille n'est pas optimale. Si une personne utilise un appareil à petit écran sur un réseau à faible bande passante, elle téléchargera des images inutilement volumineuses.
Si vous créez plusieurs versions de la même image dans différentes tailles, vous pouvez les signaler au navigateur à l'aide de l'attribut srcset.
Descripteur de largeur
Vous pouvez transmettre une liste de valeurs séparées par une virgule. Chaque valeur doit correspondre à l'URL d'une image, suivie d'un espace, suivie de métadonnées concernant l'image. Ces métadonnées sont 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 à 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 ne remplace pas l'attribut src. En revanche, l'attribut srcset complète l'attribut src. Vous devez toujours disposer d'un attribut src valide, mais le navigateur peut désormais remplacer sa valeur par l'une des options répertoriées dans l'attribut srcset.
Le navigateur ne télécharge les images plus grandes que si elles sont réellement nécessaires. ce qui permet d'économiser de la bande passante.
Tailles
Si vous utilisez le descripteur de largeur, vous devez également utiliser l'attribut sizes pour fournir plus d'informations au navigateur. Cette valeur indique au navigateur la taille que l'image doit s'afficher 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 qu'au-dessus d'une largeur de fenêtre d'affichage de 66em, l'image doit être affichée au moins un tiers 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 (mise en page en deux colonnes).
Pour les éléments inférieurs à 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 le grand écran. Une grande fenêtre de navigateur pouvant afficher une mise en page à plusieurs colonnes utilisera une image qui tient sur une seule colonne. Cette image 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
Il se peut également que vous souhaitiez fournir plusieurs versions de la même image.
Certains appareils sont équipés d'un écran haute densité. Sur un écran double densité, vous pouvez regrouper deux pixels d'informations dans l'espace d'un pixel. Ainsi, les images sont nettes sur ce type d'écran.
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: 1x, 2x, etc.
<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 la taille de medium-image.png est de 600 x 400 pixels, medium-image.png peut avoir 2x après dans la liste srcset.
Vous n'êtes pas obligé d'utiliser des nombres entiers. Si la taille d'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 toujours fournir un attribut alt avec une description de l'image pour les lecteurs d'écran et les moteurs de recherche.
Si vous intégrez une image purement visuelle et sans contenu pertinent, utilisez un attribut alt vide.
<img
src="flourish.png"
alt=""
width="400"
height="50"
>
Vous devez toujours inclure l'attribut alt. Un attribut alt manquant est différent d'un attribut alt vide. Un attribut alt vide indique à un lecteur d'écran que cette image est une image de présentation.
Idéalement, vos images de présentation ou de décoration ne doivent pas se trouver dans votre code HTML. HTML sert à la structure. Le CSS sert à 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 choisira l'image la mieux adaptée à la densité en pixels de l'appareil.
Lorsque vous ajoutez des images à votre site, vous devez prendre en compte de nombreux facteurs:
Réservez le bon espace à chaque image. Déterminer le nombre de tailles dont vous avez besoin. Déterminer si l'image est de contenu ou décoratif.
Il est utile de prendre le temps d'obtenir des images de qualité. Les stratégies d'images de mauvaise qualité sont à l'origine de frustration et d'agacement pour les utilisateurs. Une bonne stratégie d'images permet de rendre votre site dynamique et net, quel que soit l'appareil ou la connexion réseau de l'utilisateur.
Votre kit comporte un autre élément HTML pour vous aider à mieux contrôler vos images: l'élément picture.
Testez vos connaissances
Tester vos connaissances sur les images
Des styles doivent être ajoutés pour que les images s'adaptent à la fenêtre d'affichage.
Lorsque la hauteur et la largeur d'une image ont été formulées de force dans un format artificiel, quels styles peuvent aider à ajuster la façon dont l'image s'adapte à ces proportions ?
object-fitcontain et cover.image-fitfit-imageaspect-ratioSi vous ajoutez height et width à vos images, CSS ne pourra pas appliquer un style différent à ces images.
L'attribut srcset ne _______ pas l'attribut src, mais _______ l'.
srcset ne remplace définitivement 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 cette image est une image de présentation.alt ne signale aucun lecteur d'écran.