Conseils pour améliorer les performances sur le Web

Utilisez srcset pour choisir automatiquement la bonne taille d'image.

Sam Dutton

Selon HTTP Archive, un une page Web mobile standard pèse plus de 2,6 Mo, dont plus des deux tiers. le poids est des images. C'est une excellente opportunité d'optimisation !

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

Résumé

• N'enregistrez pas d'images plus grandes que leur taille d'affichage.
• Enregistrez plusieurs tailles pour chaque image et utilisez le srcset pour permettre au navigateur de choisir la plus petite valeur. 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 avec qui correspondent à la taille d'affichage. En d'autres termes, donnez aux images et la hauteur lorsque vous les enregistrez.

Examinez les images ci-dessous.

Ils semblent presque identiques, mais la taille d'un fichier est plus de 10 fois. plus grand que l'autre.

La première image est beaucoup plus grande, car elle est enregistrée avec des dimensions. soit bien plus grande que l'écran. Les deux images s'affichent avec une image fixe de 300 pixels. Il est donc logique d'utiliser une image enregistrée la taille de l'image.

Pour les largeurs fixes, utilisez des images enregistrées avec les mêmes dimensions que le fichier la taille d'affichage.

Mais... que faire si la taille d'affichage varie ?

Dans un monde multi-appareil, les images ne s'affichent pas toujours dans une seule taille fixe.

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

... et qu'en est-il des appareils dotés de pixels comme les écrans Retina ?

Aider le navigateur à choisir la bonne taille d'image

Ne serait-il pas génial de pouvoir rendre chaque image disponible dans différentes tailles, puis laisser le navigateur choisir la meilleure taille pour l'appareil et la taille d'affichage ? Malheureusement, un catch-22 pour choisir la meilleure image. Le navigateur doit utiliser la plus petite taille d'une image, mais il ne peut pas connaître sa largeur sans la télécharger pour la vérifier.

C'est pour cela que srcset s'avère pratique. Vous enregistrez des images de différentes tailles, 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 le fichier small.jpg est 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échargez 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 un ordinateur de bureau, modifiez la taille de la fenêtre de votre navigateur et rouvrez cette page. Vérifiez ensuite quelle image a été utilisée à l'aide du panneau "Network" (Réseau) de vos outils de navigateur. Pour ce faire, ouvrez une fenêtre de navigation privée, 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 telles que les images de héros, vous pouvez enregistrer manuellement différentes tailles. Si si vous avez beaucoup d'images, comme des photos de produits, vous devrez les automatiser. Pour cela, il existe deux approches.

Intégrer le traitement des images dans votre processus de compilation

Dans le cadre de votre processus de compilation, vous pouvez ajouter des étapes pour créer différentes tailles de vos images. Consultez la section Utiliser Imagemin pour compresser des images. pour en savoir plus.

Utiliser un service d'images

Vous pouvez automatiser la création et la diffusion d'images à l'aide d'un service commercial comme Cloudinary, ou un équivalent Open Source tel que Thumbor que vous installez et exécutez vous-même.

Une fois que vous avez importé vos images haute résolution, le service d'imagerie s'exécute automatiquement crée et diffuse différents formats et tailles d'images en fonction de l'URL paramètres. 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'imagerie offrent aussi des fonctionnalités plus avancées, comme la possibilité d'automatiser "recadrage intelligent" pour différentes tailles d'image et diffuser automatiquement des images WebP vers des navigateurs qui prennent en charge le format, au lieu des JPEG, sans modifier le fichier .

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

Dans ce cas, vous devez utiliser l'élément <picture> pour "art direction" : fournir une image ou un recadrage d'image différentes dans différentes tailles. Pour en savoir plus consultez l'atelier de programmation Direction artistique.

Qu'en est-il de la densité en pixels ?

Les appareils haut de gamme ont des pixels physiques plus petits (plus denses). Par exemple, un les téléphones haut de gamme peuvent comporter deux ou trois fois plus de pixels dans chaque rangée en tant qu'appareil moins cher.

Cela peut avoir une incidence sur la taille dont vous avez besoin pour enregistrer vos images. Nous n'entrerons pas dans le vif du sujet. plus de détails ici, mais vous pouvez en savoir plus grâce au 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 que srcset fonctionne encore mieux.

Sans elle, le navigateur utilise toute la largeur de la fenêtre d'affichage à partir d'un srcset. L'attribut sizes indique au navigateur la largeur s'affiche, de sorte que le navigateur puisse choisir la plus petite image fichier image, avant d'effectuer des calculs de mise en page.

Dans l'exemple ci-dessous, sizes="50vw" indique au navigateur que cette image sera qui s'affiche à 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 un exemple à l'adresse simpl.info/sizes et l'atelier de programmation Spécifier plusieurs largeurs d'emplacements.

Qu'en est-il de la compatibilité avec les navigateurs ?

srcset et sizes sont compatibles avec plus de 90% des dans le monde entier.

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

Cela permet d'améliorer progressivement 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 formation plus guidée vous pouvez essayer la version sans frais de "Responsive Images" proposé par Udacity.