Images responsives

Cet atelier de programmation fait partie du cours de développement des progressive web apps, développé par l'équipe de formation Google Developers. Exploitez tout le potentiel de ce cours en suivant les ateliers de programmation dans l'ordre.

Pour en savoir plus, consultez la Présentation des progressive web apps.

Introduction

Dans cet atelier, vous allez découvrir comment optimiser l'affichage des images sur votre page Web sur tous les appareils.

Points abordés

  • Rendre vos images responsives afin qu'elles soient redimensionnées de façon appropriée pour différents facteurs de forme
  • Utilisation de srcset et sizes pour afficher l'image correspondant à la largeur de la fenêtre d'affichage
  • Utiliser picture et source en combinaison avec des requêtes média, de sorte que les images de la page répondent automatiquement lorsque la fenêtre est redimensionnée

Bon à savoir

  • Code HTML et CSS de base

Ce dont vous avez besoin

  • Éditeur de texte
  • Ordinateur avec accès au terminal/shell

Téléchargez ou clonez le dépôt pwa-training-labsà partir de GitHub, puis installez la version LTS de Node.js, si nécessaire.

Si vous ne disposez pas d'un serveur de développement local préféré, installez le package http-server Node.js:

npm install http-server -g

Accédez au répertoire responsive-images-lab/app/ et démarrez le serveur:

cd responsive-images-lab/app
http-server -p 8080 -a localhost -c 0

Vous pouvez mettre fin au serveur à tout moment avec Ctrl-c.

Ouvrez votre navigateur et accédez à localhost:8080/.

Remarque : Annulez l'enregistrement des nœuds de calcul de service et videz le cache de tous les nœuds de calcul de l'hôte local afin qu'ils n'interfèrent pas avec l'atelier. Pour ce faire, cliquez sur Effacer les données du site dans la section Effacer les données de stockage de l'onglet Application dans les outils pour les développeurs Chrome.

Si vous disposez d'un éditeur de texte qui vous permet d'ouvrir un projet, ouvrez le dossier responsive-images-lab/app/. Vous pourrez ainsi vous organiser plus facilement. Sinon, ouvrez le dossier dans le système de fichiers de votre ordinateur. Le dossier app/ correspond à l'endroit où vous allez créer l'atelier.

Ce dossier contient:

  • Le dossier images contient des exemples d'images, plusieurs versions ayant des résolutions différentes
  • index.html est la page HTML principale de notre exemple de site/application.
  • styles/main.css est la feuille de style en cascade pour l'exemple de site.

Avant de rendre les images responsives, faites en sorte qu'elles ne dépassent pas l'écran.

Remplacez TODO2 dans styles/main.css par le code suivant:

img {
  max-width: 100%;
}

Enregistrez le code et actualisez la page dans votre navigateur. Essayez de redimensionner la fenêtre. La largeur des images doit rester totale dans la fenêtre.

Explanation

La valeur associée à max-width représente un pourcentage de l'élément parent. Dans le cas présent, l'élément article.

Remarque : Vous pouvez également spécifier le max-width en termes de largeur de la fenêtre d'affichage à l'aide d'unités vw (par exemple, 100vw). Dans le cas présent, nous utilisons une valeur en pourcentage pour conserver la même largeur que les images dans le texte.

L'objectif est d'amener le navigateur à récupérer la version de l'image dont les dimensions sont les plus petites et toujours plus grandes que la taille d'affichage finale de l'image. srcset nous permet de répertorier un ensemble d'images avec différentes résolutions pour le navigateur lors de la récupération de l'image. Le choix du navigateur dépend des dimensions de la fenêtre d'affichage, de la taille de l'image par rapport à celle de la fenêtre d'affichage, de la densité en pixels de l'appareil de l'utilisateur et du format source du fichier.

Ajouter un srcset à une image

Pour compléter TODO 3.1 dans index.html, ajoutez l'attribut srcset suivant à l'élément img contenant l'image SFO:

srcset="images/sfo-1600_large.jpg, images/sfo-1000_large.jpg, images/sfo-800_medium.jpg, images/sfo-500_small.jpg"

Enregistrez le code et actualisez la page dans le navigateur. Ouvrez les outils de développement de votre navigateur et examinez les requêtes réseau. Essayez d'actualiser la page à différentes tailles de fenêtre. Vous constatez que le navigateur récupère images/sfo-1600_large.jpg quelle que soit la taille de la fenêtre.

Explanation

Dans le dossier images/, plusieurs versions de l'image SFO existent dans différentes résolutions. Nous les avons répertoriés dans l'attribut srcset pour permettre au navigateur de choisir le fichier à utiliser. Cependant, le navigateur n'a aucun moyen de déterminer la taille des fichiers avant de les charger. Par conséquent, il choisit toujours la première image de la liste.

Ajouter des descripteurs de largeur au srcset

Pour charger la bonne taille d'image en fonction de la largeur de la fenêtre d'affichage, nous devons indiquer au navigateur la taille de chaque fichier avant sa récupération.

Pour compléter TODO 3.2 dans index.html, ajoutez des descripteurs de largeur à l'élément img SFO:

srcset="images/sfo-1600_large.jpg 1600w, images/sfo-1000_large.jpg 1000w, images/sfo-800_medium.jpg 800w, images/sfo-500_small.jpg 500w"

Enregistrez le code et actualisez la page dans le navigateur. Actualisez la page dans différentes tailles et vérifiez les requêtes réseau pour voir la version de l'image récupérée dans chaque taille. Sur un écran 1x, le navigateur récupère sfo-500_small.jpg lorsque la fenêtre est plus étroite que 500 px, sfo-800_medium.jpg lorsqu'elle est plus étroite que 800 px, etc.

Remarque : Si une version plus grande d'une image est disponible dans le cache (HTTP) du navigateur, certains navigateurs peuvent charger cette image, même s'il ne s'agit pas de celle spécifiée par srcset. En effet, si le navigateur dispose déjà d'une image en haute résolution stockée localement, pourquoi ne pas l'utiliser ? Pour désactiver cette fonctionnalité dans l'atelier, assurez-vous que le cache HTTP est désactivé dans les outils de développement.

Remarque : Lorsque Chrome est ouvert, les dimensions de la fenêtre du navigateur s'affichent à mesure que vous redimensionnez la fenêtre dans Chrome (voir l'image ci-dessous). Cette fonctionnalité sera très utile tout au long de cet atelier de programmation.

dimensions-chrome

Explanation

En ajoutant un descripteur de largeur à chaque fichier de la propriété srcset, nous indiquons au navigateur la largeur de chaque image en pixels avant de la récupérer. Le navigateur peut ensuite utiliser ces largeurs pour décider quelle image extraire en fonction de la taille de la fenêtre. Il extrait l'image dont la largeur est la plus petite, toujours plus grande que celle de la fenêtre d'affichage.

Remarque : Vous avez également la possibilité de spécifier une densité de pixels plutôt qu'une largeur. En revanche, vous ne pouvez pas spécifier à la fois des densités de pixels et des largeurs dans le même attribut srcset. Nous verrons comment utiliser les densités de pixels dans une section ultérieure.

Afficher une image à la moitié de la largeur de la fenêtre d'affichage (50 vw)

Remplacez TODO 4.1 dans styles/main.css par le code suivant:

img#sfo {
  transition: width 0.5s;
  max-width: 50vw;
}

Enregistrez le code et actualisez la page dans le navigateur. Essayez d'actualiser la page à différentes tailles de fenêtre et de vérifier les demandes réseau à chaque taille. Le navigateur récupère les images de la même taille qu'auparavant.

Explanation

Comme le code CSS est analysé après le code HTML au moment de l'exécution, le navigateur n'a aucun moyen de connaître la taille finale de l'image lors de sa récupération. Sauf indication contraire, le navigateur suppose que les images seront affichées à 100% de la largeur de la fenêtre d'affichage et extrait les images en conséquence. Nous devons d'abord indiquer au navigateur si les images doivent être affichées dans une taille différente.

Ajouter l'attribut de taille à l'image

Nous pouvons fournir à img un attribut sizes pour indiquer à votre navigateur la taille d'affichage de l'image avant sa récupération.

Pour compléter TODO 4.2 dans index.html, ajoutez sizes="50vw" à l'élément img comme suit:

<img id="sfo" src="images/sfo-500_small.jpg" srcset="images/sfo-1600_large.jpg 1600w, images/sfo-1000_large.jpg 1000w, images/sfo-800_medium.jpg 800w, images/sfo-500_small.jpg 500w" sizes="50vw" alt="View from aircraft window near San Francisco airport">

Enregistrez le code et actualisez la page dans le navigateur. Actualisez la page à différentes tailles de fenêtre et vérifiez les requêtes réseau à chaque fois. Pour les tailles de fenêtre approximatives que vous avez utilisées pour tester l'étape précédente, le navigateur récupère une image plus petite.

Explanation

La valeur sizes correspond à la valeur max-width de l'image dans le code CSS. Le navigateur dispose désormais de tous les éléments nécessaires pour choisir la version d'image appropriée. Le navigateur connaît sa propre largeur de fenêtre d'affichage et la densité en pixels de l'appareil de l'utilisateur. Nous lui avons attribué les fichiers sources et les dimensions (à l'aide du descripteur de largeur) et les tailles d'image par rapport à la fenêtre d'affichage (à l'aide de l'attribut sizes).

Pour en savoir plus

Ajouter une requête média au CSS

Nous pouvons utiliser des requêtes média pour redimensionner des images en temps réel en fonction de la largeur de la fenêtre d'affichage.

Remplacez TODO 5.1 dans styles/main.css par le code suivant:

@media screen and (max-width: 700px) {
  img#sfo {
    max-width: 90vw;
    width: 90vw;
  }
}

Enregistrez le code et actualisez la page dans le navigateur. Réduisez la fenêtre à moins de 700 pixels (dans Chrome, les dimensions de la fenêtre d'affichage sont affichées à l'écran si les outils de développement sont ouverts). L'image doit s'adapter à 90% de la largeur de la fenêtre.

Explanation

La requête média teste la largeur de la fenêtre d'affichage et applique le code CSS si la largeur de la fenêtre d'affichage est inférieure à 700 pixels.

Pour en savoir plus

Ajouter la requête média à l'attribut de taille

Nous pouvons indiquer au navigateur la requête média dans l'attribut sizes afin qu'il récupère l'image appropriée lorsque l'image change de taille.

Pour exécuter TODO 5.2 dans index.html, modifiez l'attribut sizes dans l'image SFO:

sizes="(max-width: 700px) 90vw, 50vw"

Enregistrez le code et actualisez la page dans le navigateur. Redimensionnez la fenêtre du navigateur pour qu'elle atteigne 600 pixels de large. Sur un écran 1x, le navigateur doit récupérer sfo-800_medium.jpg.

Vous pouvez utiliser l'élément picture et l'élément source, associés à des requêtes média, pour modifier la source de l'image lorsque la fenêtre est redimensionnée.

Remplacez TODO6 dans index.html par le code suivant:

<figure>
    <picture>
    <source media="(min-width: 750px)"
            srcset="images/horses-1600_large_2x.jpg 2x,
                    images/horses-800_large_1x.jpg" />
    <source media="(min-width: 500px)"
            srcset="images/horses_medium.jpg" />
    <img src="images/horses_small.jpg" alt="Horses in Hawaii">
    </picture>
    <figcaption>Horses in Hawaii</figcaption>
</figure>

Enregistrez le code et actualisez la page dans le navigateur. Essayez de redimensionner la fenêtre du navigateur. L'image devrait changer à 750 px et 500 px.

Explanation

L'élément picture nous permet de définir plusieurs fichiers sources à l'aide de la balise source. Il ne s'agit pas simplement d'utiliser une balise img avec l'attribut srcset, car elle permet d'ajouter des éléments tels que des requêtes média à chaque ensemble de sources. Plutôt que d'attribuer une taille d'image au navigateur et de choisir les fichiers à utiliser, nous pouvons définir les images à utiliser pour chaque taille de fenêtre.

Nous avons inclus plusieurs versions de l'image exemple, chacune dans une résolution différente et recadrées, pour que l'image soit visible dans des tailles plus petites. Dans le code ci-dessus, sa taille étant supérieure à 750 px, le navigateur récupère horses-1600_large_2x.jpg (si l'appareil est doté d'un écran 2x) ou horses-800_large_1x.jpg. Si la largeur de la fenêtre est inférieure à 750 pixels, mais supérieure à 500 pixels, le navigateur récupère horses_medium.jpg. À moins de 500 px, le navigateur récupère l'image de remplacement, horses_small.jpg.

Remarque : Si le navigateur de l'utilisateur n'accepte pas l'élément picture, il récupère tout ce qui se trouve dans l'élément img. L'élément picture sert simplement à spécifier plusieurs sources pour l'élément img qu'il contient. L'élément img correspond à ce qui affiche l'image.

Pour en savoir plus

Vous savez désormais comment optimiser l'affichage des images sur votre page Web sur tous les appareils.

Resources

En savoir plus sur l'automatisation du processus

En savoir plus sur les ensembles et les tailles src

En savoir plus sur la direction artistique

Pour voir tous les ateliers de programmation du cours de formation sur la PWA, consultez l'atelier de bienvenue.