Merci d'avoir participé à Google I/O ! Regarder des contenus à la demande

Cette page a été traduite par l'API Cloud Translation.

Images responsives

Sur le Web, le texte passe automatiquement à la ligne sur le bord de l'écran pour éviter overflow. Les images, en revanche, ont une taille intrinsèque. Si une image est plus large que l'écran, l'image déborde et l'utilisateur doit faire défiler la page horizontalement pour le voir en entier.

Heureusement, le CSS vous fournit des outils pour éviter que cela ne se produise.

Limiter vos images

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

Navigateurs pris en charge

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

Source

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

Vous pouvez appliquer la même règle à d'autres types de contenus intégrés, comme les vidéos et les 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 qu'elles tiennent sur l'écran.

Deux captures d'écran le premier montre une image qui dépasse la largeur du navigateur. La seconde montre la même image soumise à une contrainte dans la fenêtre d'affichage du navigateur. — Limiter votre image permet aux utilisateurs de la voir en entier sans avoir à faire défiler la page.

Ajouter un block-size la valeur auto signifie que le navigateur conserve les images de format les redimensionne.

Parfois, les dimensions d'une image sont définies par un système de gestion de contenu (CMS) un autre système de diffusion de contenu. Si votre conception nécessite un format différent par défaut, vous pouvez utiliser aspect-ratio pour préserver le design 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.

</ph>

La modification du format de l'image la fait apparaître écrasés ou étirés.

Pour éviter tout écrasement ou tout étirement, utilisez la object-fit.

Navigateurs pris en charge

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

Source

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

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

</ph>

</ph> La même image avec deux valeurs différentes pour "object-fit" (ajustement de l'objet) appliqué. La première a une valeur d'ajustement de l'objet définie sur "contain". La seconde a une valeur d'ajustement aux objets définie sur "cover".

Vous pouvez modifier la position du recadrage de l'image à l'aide des object-position . Cela permet d'ajuster la mise au point du recadrage. une partie importante de l'image est toujours visible.

Navigateurs pris en charge

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

Source

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

</ph>

Vous pouvez définir object-position pour recadrer un seul côté de votre image.

Diffuser vos images

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

Conseils pour les tailles

Si vous connaissez les dimensions de votre image, incluez toujours width et height . Même si l'image s'affiche dans une taille différente en raison de votre max-inline-size, le navigateur connaît toujours le rapport largeur/hauteur. peut réserver la bonne quantité d'espace. Cela empêche vos autres contenus qui sautent quand l'image est chargée.

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

</ph>

La première vidéo présente une mise en page sans dimensions d'image définies. Remarquez comment le texte saute lors du chargement des images. 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 lors du chargement de l'image.

Conseils de chargement

Utilisez l'attribut loading pour indiquer au navigateur s'il doit retarder le chargement de jusqu'à ce qu'elle soit dans la fenêtre d'affichage ou à proximité. Pour les images en dessous de la ligne de flottaison, utilisez une valeur sur lazy. Le navigateur ne charge pas les images différées tant que l'utilisateur n'a pas fait défiler la page vers le bas pour que l'image soit sur le point d'apparaître. Si l'utilisateur n'a jamais défile, l'image ne se charge jamais.

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

</ph>

Les images chargées de manière différée attendent que l'utilisateur se charge sur le point de faire défiler la page jusqu'à eux.

Pour une image de héros au-dessus de la ligne de flottaison, n'utilisez pas loading. Si votre site a automatiquement applique l'attribut loading="lazy", vous pouvez généralement définir loading sur la valeur par défaut de 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"
>

Extraire la priorité

Pour les images importantes, telles que l'image LCP, vous pouvez à l'aide de la fonctionnalité Récupérer la priorité 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 d'extraire l'image immédiatement et avec une priorité élevée au lieu d'attendre que le navigateur ait terminé sa mise en page normalement.

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

Conseils pour le préchargement

Il est préférable d'éviter le préchargement autant que possible en incluant toutes les images dans fichier HTML initial. Cependant, certaines images peuvent être indisponibles, ajoutée par JavaScript ou une image de fond CSS.

Vous pouvez utiliser le préchargement pour que le navigateur récupère ces images importantes en temps réel. Pour les images très importantes, vous pouvez combiner ce préchargement avec Attribut fetchpriority:

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

Encore une fois, utilisez ces attributs avec parcimonie pour éviter de remplacer les paramètres de priorisation. Leur utilisation excessive peut nuire aux performances une dégradation importante.

Certains navigateurs acceptent le préchargement des images responsives. basé sur srcset, en utilisant les 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 sans srcset supportent toujours le préchargement de la bonne image.

Vous ne pouvez pas précharger les images dans différents formats selon la compatibilité du navigateur avec dans certains formats. Si vous tentez d'effectuer cette opération, vous risquez de générer des téléchargements supplémentaires et de gaspiller le temps données.

Décodage d'images

Vous pouvez également ajouter un attribut decoding aux éléments img. On peut voir pour que l'image puisse être décodée de manière asynchrone traiter 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 l'élément le plus important de de contenu à 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. Elle affecte uniquement si le navigateur attend que le décodage de l'image se produise avant afficher d'autres contenus.

Dans la plupart des cas, cela n'a pas beaucoup d'impact, mais parfois, cela peut navigateur pour afficher votre image ou tout autre contenu un peu plus vite. Par exemple, pour un les documents volumineux comportant de nombreux éléments dont l'affichage prend du temps, et avec de grands images dont le décodage prend beaucoup de temps, définir sync sur les images importantes indique que le navigateur attende l'image et affiche les deux en même temps. Par ailleurs, vous pouvez définir async pour permettre au navigateur d'afficher le contenu plus rapidement et sans en attente du décodage de l'image.

Cependant, la meilleure option consiste généralement à essayer éviter les tailles de DOM excessives et utilisez des images responsives au lieu d'utiliser decoding pour réduire le temps de décodage.

Images responsives avec `srcset`

Grâce à cette déclaration max-inline-size: 100%, vos images ne peuvent pas apparaître de leurs conteneurs. Toutefois, si un utilisateur dispose d'un petit écran et d'une faible bande passante Ils téléchargent ainsi des images de la même taille que les utilisateurs disposant d'écrans plus grands. sur le gaspillage des données.

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

Descripteur de largeur

Vous pouvez définir un élément 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 métadonnées sur le appelée descripteur.

Dans cet exemple, les métadonnées décrivent la largeur de chaque image à l'aide de l'w bloc d'annonces. 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 disposer d'un attribut src valide, mais le navigateur peut remplacer son avec l'une des options listées dans srcset. Pour économiser de la bande passante, ne télécharge la plus grande image que si elle est nécessaire.

Tailles

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

L'attribut sizes utilise une liste de requêtes média et une image séparées par une virgule. et leur largeur.

<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 dépasse 66em, l'image ne doit pas être plus large qu'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, afficher l'image à moitié la largeur de l'écran (comme dans une mise en page sur deux colonnes).

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

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

</ph>

Utiliser des descripteurs de taille pour modifier l'apparence de votre page disposées sur différentes tailles d'écran.

Descripteur de la densité de pixels

Vous pouvez également utiliser des descripteurs pour fournir une autre version des images sur les écrans haute densité, pour que les images restent nettes en des solutions qu'ils proposent.

Deux versions de la même image d'un beau chien à l'air heureux avec une boule dans la gueule, une image nette et l'autre floue. — Les images dont la densité de pixels est plus faible peuvent être floues.

Utilisez le descripteur de densité pour décrire la densité en pixels de l'image dans relation avec l'image dans l'attribut src. Le descripteur de densité est un nombre suivie 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 a une taille de 300 x 200 pixels et que medium-image.png est 600 x 400 pixels, alors medium-image.png peut être suivi de 2x dans le Liste srcset.

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

Images de présentation

Les images en HTML constituent 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 aucune 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.

Idéalement, les images de présentation ou décoratives sont incluses en CSS plutôt que HTML. HTML est destiné à 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 candidats d'images à l'aide de la 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 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é en 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 s'il s'agit d'une image de contenu ou décorative

Il peut être utile de prendre le temps d'optimiser vos images. De mauvaises stratégies concernant les images agacent et frustrent vos utilisateurs. Une stratégie d'image efficace donne l'impression que votre site rapide et net, quel que soit l'appareil ou la connexion réseau de l'utilisateur.

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

Testez vos connaissances

Testez vos connaissances sur les images.

Vous devez ajouter des styles pour que les images tiennent dans la fenêtre d'affichage.

Vrai

Les images sans confinement seront aussi grandes que leur taille naturelle.

Faux

Veuillez indiquer des styles.

Lorsque la hauteur et la largeur d'une image ont été forcées dans un format anormal, quels styles peuvent aider à ajuster la façon dont l'image s'adapte à ces proportions ?

object-fit

Indiquez comment l'image s'adapte à l'aide de 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 non naturel.

Si vous ajoutez height et width à vos images, le CSS ne pourra pas appliquer un style différent.

Vrai

Considérez-les davantage comme des indices que comme 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 dans le tag.

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

compléter, remplace

srcset ne remplace certainement pas l'attribut src.

remplacer, compléments

Il fournit au navigateur des options supplémentaires, s'il en est capable.

alt manquant sur une image équivaut à un élément alt vide.

Vrai

Un attribut alt vide indique à un lecteur d'écran que cette image est une présentation.

Faux

L'absence de alt n'indique rien au lecteur d'écran.

Images responsives

Limiter vos images

Diffuser vos images

Conseils pour les tailles

Conseils de chargement

Extraire la priorité

Conseils pour le préchargement

Décodage d'images

Images responsives avec srcset

Descripteur de largeur

Tailles

Descripteur de la densité de pixels

Images de présentation

Image de fond

Testez vos connaissances

Images responsives avec `srcset`