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
etsizes
pour afficher l'image correspondant à la largeur de la fenêtre d'affichage - Utiliser
picture
etsource
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.
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
- Images responsives GFP : vous devez utiliser libvips sous Mac.
- Image responsive sur GitHub (GitHub) : nécessite une image graphique sur toutes les plates-formes.
- Version 2.0 du générateur de points d'arrêt responsif
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.