Utilisez "srcset" pour choisir automatiquement la bonne taille d'image.
Selon HTTP Archive, une page Web mobile standard pèse plus de 2,6 Mo, dont plus des deux tiers correspondent à des images. Il s'agit d'une excellente opportunité d'optimisation.
Résumé
- N'enregistrez pas d'images plus grandes que leur taille d'affichage.
- Enregistrez plusieurs tailles pour chaque image et utilisez l'attribut
srcsetpour permettre au navigateur de choisir la plus petite taille. La valeurwindique au navigateur la largeur de chaque version:
<img src="small.jpg"
srcset="small.jpg 500w,
medium.jpg 1000w,
large.jpg 1500w"
alt="…">
Enregistrez des images à la bonne taille
Vous pouvez rendre votre site Web plus rapide et moins gourmand en données en utilisant des images dont les dimensions correspondent à la taille d'affichage. En d'autres termes, donnez aux images la bonne largeur et la bonne hauteur lorsque vous les enregistrez.
Examinez les images ci-dessous.
Ils semblent presque identiques, mais la taille de fichier de l'un d'eux est plus de 10 fois supérieure à celle de l'autre.
La première image est beaucoup plus grande, car elle est enregistrée dans des dimensions bien plus grandes que la taille d'affichage. Les deux images sont affichées avec une largeur fixe de 300 pixels. Il est donc logique d'utiliser une image enregistrée à la même taille.
Pour les largeurs fixes, utilisez des images enregistrées avec les mêmes dimensions que la taille d'affichage.
Mais que se passe-t-il si la taille d'affichage varie ?
Dans un monde multi-appareil, les images ne s'affichent pas toujours dans une taille unique fixe.
Les éléments d'image peuvent avoir un pourcentage de largeur ou faire partie de mises en page responsives où la taille d'affichage des images change pour s'adapter à la taille de l'écran.
Qu'en est-il des appareils gourmands en pixels, comme les écrans Retina ?
Aider le navigateur à choisir la bonne taille d'image
Ne serait-il pas idéal de proposer chaque image dans différentes tailles, et de laisser le navigateur choisir la taille la mieux adaptée à l'appareil et à la taille d'affichage ? Malheureusement, il existe une erreur catch-22 qui permet de déterminer la meilleure image. Le navigateur doit utiliser la plus petite image possible, mais il ne peut pas connaître la largeur d'une image sans la télécharger pour vérifier.
C'est pour cela que srcset s'avère pratique. Vous enregistrez des images dans différentes tailles, puis vous indiquez au navigateur la largeur de chaque version:
<img src="small.jpg"
srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w"
alt="…">
Les valeurs w indiquent la largeur de chaque image en pixels. Par exemple, small.jpg 500w indique au navigateur que small.jpg fait 500 pixels de large. Cela permet au navigateur de choisir la plus petite image possible en fonction du type d'écran et de la taille de la fenêtre d'affichage, sans avoir à télécharger des images pour vérifier leur taille.
Vous pouvez voir srcset en action pour l'image ci-dessous. Si vous utilisez un ordinateur portable ou de bureau, modifiez la taille de la fenêtre de votre navigateur et rouvrez cette page.
Consultez ensuite le panneau "Réseau" des outils de votre navigateur pour vérifier quelle image a été utilisée.
(Dans le cas contraire, le fichier image d'origine sera mis en cache.)
Comment créer plusieurs tailles d'image ?
Vous devez rendre plusieurs tailles disponibles pour chaque image que vous souhaitez utiliser avec srcset.
Pour les images ponctuelles telles que les images de héros, vous pouvez enregistrer manuellement différentes tailles. Si vous avez beaucoup d'images, telles que des photos de produits, vous devez les automatiser. Pour cela, il existe deux approches.
Intégrer le traitement d'image à votre processus de compilation
Dans le cadre de votre processus de compilation, vous pouvez ajouter des étapes pour créer des versions de différentes tailles de vos images. Pour en savoir plus, consultez Utiliser Imagemin pour compresser des images.
Utiliser un service d'images
La création et la diffusion d'images peuvent être automatisées à l'aide d'un service commercial tel que Cloudinary ou d'un équivalent Open Source comme Thumbor que vous installez et exécutez vous-même.
Vous importez vos images haute résolution, et le service d'images crée et fournit automatiquement différents formats et tailles d'image en fonction des paramètres d'URL. Pour obtenir un exemple, ouvrez cet exemple d'image sur Cloudinary et essayez de modifier la valeur w ou l'extension de fichier dans la barre d'adresse.
Les services d'image disposent également de fonctionnalités plus avancées, telles que la possibilité d'automatiser le "recadrage intelligent" pour différentes tailles d'image et de diffuser automatiquement des images WebP dans des navigateurs compatibles avec ce format plutôt que des fichiers JPEG, sans modifier l'extension de fichier.
Que se passe-t-il si l'image ne s'affiche pas correctement dans différentes tailles ?
Dans ce cas, vous devez utiliser l'élément <picture> pour la "direction artistique", c'est-à-dire fournir une autre image ou un recadrage d'image de différentes tailles. Pour en savoir plus, consultez l'atelier de programmation Direction artistique.
Qu'en est-il de la densité de pixels ?
Les appareils haut de gamme ont des pixels physiques plus petits (plus denses). Par exemple, un téléphone haut de gamme peut avoir deux à trois fois plus de pixels dans chaque ligne de pixels qu'un appareil moins cher.
Cela peut avoir une incidence sur la taille dont vous avez besoin pour enregistrer vos images. Nous n'entrerons pas dans les détails ici, mais vous pouvez en apprendre davantage dans l'atelier de programmation Utiliser des descripteurs de densité.
Qu'en est-il de la taille d'affichage de l'image ?
Vous pouvez utiliser sizes pour améliorer le fonctionnement de srcset.
Sans cela, le navigateur utilise toute la largeur de la fenêtre d'affichage lorsqu'il choisit une image dans un élément srcset. L'attribut sizes indique au navigateur la largeur d'affichage d'un élément image afin qu'il puisse choisir le plus petit fichier image possible avant d'effectuer tout calcul de mise en page.
Dans l'exemple ci-dessous, sizes="50vw" indique au navigateur que cette image sera affichée à 50% de la largeur de la fenêtre d'affichage.
<img src="small.jpg"
srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w"
sizes="50vw"
alt="…">
Vous pouvez voir cela en action sur simpl.info/sizes et dans l'atelier de programmation Spécifier plusieurs largeurs d'emplacement.
Qu'en est-il de la compatibilité du navigateur ?
srcset et sizes sont compatibles avec plus de 90% des navigateurs dans le monde.
Si un navigateur ne prend pas en charge srcset ou sizes, il se contentera d'utiliser l'attribut src.
Cela fait d'excellentes améliorations progressives de srcset et sizes !
En savoir plus
Consultez la section Optimiser vos images de web.dev pour en savoir plus sur l'optimisation des images. Pour une expérience plus guidée, pensez à essayer le cours sans frais "Images responsives" proposé par Udacity.