Conseils essentiels pour les performances Web

Utilisez srcset pour choisir automatiquement la taille d'image appropriée.

Sam Dutton

Selon HTTP Archive, une page Web mobile typique pèse plus de 2,6 Mo, dont plus des deux tiers sont des images. C'est une excellente occasion d'optimiser vos campagnes !

Résumé

• N'enregistrez pas d'images plus grandes que leur taille d'affichage.
• Enregistrez plusieurs tailles pour chaque image et utilisez l'attribut srcset pour permettre au navigateur de choisir la plus petite. La valeur w indique au navigateur la largeur de chaque version :

<img src="small.jpg"
     srcset="small.jpg 500w,
             medium.jpg 1000w,
             large.jpg 1500w"
     alt="…">

Enregistrer 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.

Regardez les images ci-dessous.

Ils semblent presque identiques, mais la taille du fichier de l'un est plus de 10 fois supérieure à celle de l'autre.

La taille du premier fichier image est beaucoup plus importante, car il est enregistré avec des dimensions beaucoup plus grandes que celles de l'écran. 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 de l'écran.

Mais… que se passe-t-il si la taille de l'écran varie ?

Dans un monde multi-appareils, les images ne sont pas toujours affichées à une taille fixe.

Les éléments d'image peuvent avoir une largeur en pourcentage ou faire partie de mises en page responsives où la taille d'affichage des images change pour s'adapter à la taille de l'écran.

…et 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 pouvoir proposer chaque image dans différentes tailles, puis de laisser le navigateur choisir la taille la mieux adaptée à l'appareil et à la taille de l'écran ? Malheureusement, il existe un catch-22 lorsqu'il s'agit de déterminer quelle image est la meilleure. 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 la vérifier.

C'est pour cela que srcset s'avère pratique. Vous enregistrez les 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 a une largeur de 500 pixels. 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 les images pour vérifier leur taille.

Vous pouvez voir srcset en action pour l'image ci-dessous. Si vous êtes sur un ordinateur portable ou de bureau, modifiez la taille de la fenêtre de votre navigateur et rouvrez cette page. Utilisez ensuite le panneau "Réseau" des outils de votre navigateur pour vérifier l'image utilisée. (Vous devrez le faire dans une fenêtre de navigation privée, sinon le fichier image d'origine sera mis en cache.)

Comment créer plusieurs tailles d'image ?

Vous devrez proposer plusieurs tailles pour chaque image que vous souhaitez utiliser avec srcset.

Pour les images ponctuelles, comme les images de héros, vous pouvez enregistrer manuellement différentes tailles. Si vous avez beaucoup d'images, comme des photos de produits, vous devrez automatiser le processus. Pour ce faire, deux approches sont possibles.

Intégrer le traitement d'images à votre processus de compilation

Lors de votre processus de compilation, vous pouvez ajouter des étapes pour créer des versions de vos images de différentes tailles. Pour en savoir plus, consultez Utiliser Imagemin pour compresser les 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 tel que 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'URL.

Les services d'images 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 aux navigateurs qui prennent en charge ce format, au lieu de JPEGs, sans modifier l'extension de fichier.

Que faire si l'image ne s'affiche pas correctement à différentes tailles ?

Dans ce cas, vous devrez utiliser l'élément <picture> pour la "direction artistique", c'est-à-dire fournir une image ou un recadrage d'image différents pour 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 comporter deux ou trois fois plus de pixels sur chaque ligne de pixels qu'un appareil moins cher.

Cela peut avoir une incidence sur la taille à laquelle vous devez enregistrer vos images. Nous n'entrerons pas dans les détails ici, mais vous pouvez en savoir plus 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 encore plus srcset.

Sans cela, le navigateur utilise toute la largeur de la fenêtre d'affichage lorsqu'il choisit une image à partir d'un srcset. L'attribut sizes indique au navigateur la largeur d'affichage d'un élément d'image. Le navigateur peut ainsi choisir le plus petit fichier image possible avant d'effectuer des calculs 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é avec les navigateurs ?

srcset et sizes sont acceptés par plus de 90 % des navigateurs dans le monde.

Si un navigateur n'est pas compatible avec srcset ou sizes, il utilisera uniquement l'attribut src.

srcset et sizes sont donc d'excellentes améliorations progressives.

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, essayez le cours sans frais "Images responsives" proposé par Udacity.