Dimensionner correctement vos images

Mesurez la largeur maximale à laquelle l'image s'affiche, doublez-la pour les écrans haute densité, et redimensionnez votre bibliothèque à cette valeur. Servir une photo de 4000 pixels dans un espace de 800 pixels signifie que le navigateur télécharge environ 25 fois plus de données de pixels qu'il ne peut en afficher, puis élimine le reste.

Sur une connexion mobile, le visiteur paie pour tout cela, en temps et en données. Le dimensionnement correct des images est généralement la réduction de poids de page la plus importante disponible pour un site, et cela prend un seul lot plutôt qu'une refonte complète.

Pourquoi les images surdimensionnées coûtent si cher

La taille du fichier évolue avec le nombre de pixels, donc diviser la largeur et la hauteur par deux supprime environ 75 pour cent des données. La relation est quadratique plutôt que linéaire, c'est pourquoi le gaspillage augmente rapidement.

La première ligne correspond au cas classique sur les sites où les éditeurs téléversent directement depuis un appareil photo. Le navigateur télécharge 4.2 MB, réduit l'échelle et affiche l'équivalent d'un fichier de 180 KB.

Comment mesurer la taille d'affichage réelle

Faites un clic droit sur l'image de votre page en ligne, choisissez Inspecter, et lisez les dimensions affichées plutôt que les dimensions intrinsèques. Les navigateurs indiquent les deux chiffres, et l'écart entre eux représente le gaspillage.

Vérifiez le cas le plus large plutôt que le cas typique. Une image à l'intérieur d'une colonne d'article peut s'afficher à 700 pixels sur ordinateur et à 380 sur un téléphone, donc 700 est le chiffre qui compte. Testez sur la fenêtre de navigateur la plus large que vos visiteurs utilisent de manière réaliste, car une bannière pleine largeur s'agrandit avec la zone d'affichage et nécessite un calcul différent.

La règle du doublement pour les écrans haute densité

Multipliez la largeur d'affichage par 2 et arrêtez-vous là, car les écrans au-delà de cette densité ne montrent aucune amélioration supplémentaire que l'on puisse remarquer. Une image affichée à 700 pixels doit être exportée à 1400.

Le triplement est parfois suggéré et rarement justifié. La différence entre une densité de 2 et 3 fois est indétectable à une distance de vision normale, alors que le fichier augmente de plus de la moitié. Compresser plus fortement à une densité de 2 fois produit un meilleur résultat que de compresser légèrement à 3 fois, car les pixels supplémentaires masquent la compression.

Largeurs d'affichage courantes pour le redimensionnement

• Image de corps d'article : s'affiche autour de 700 px, exporter à 1400 px.
• Bannière pleine largeur : s'affiche jusqu'à 1920 px, exporter à 1920 px et compresser plus fortement.
• Élément en demi-largeur : s'affiche autour de 600 px, exporter à 1200 px.
• Miniature de grille de produits : s'affiche autour de 300 px, exporter à 600 px.
• Photo d'auteur ou de profil : s'affiche autour de 80 px, exporter à 160 px.
• Logo dans un en-tête : s'affiche autour de 180 px, exporter à 360 px ou utiliser des graphiques vectoriels.

Pourquoi les images pleine largeur sont l'exception

Une bannière pleine largeur n'a pas de taille d'affichage fixe, limitez-la donc à 1920 pixels et compressez-la plus fortement plutôt que de la doubler. Doubler une image pleine largeur à 3840 pixels produit un fichier qu'aucune page ne peut justifier.

Les bannières sont généralement vues de loin et comportent moins de détails fins qu'une photo de produit, ce qui signifie qu'une compression agressive y est moins visible. Une bannière de 1920 pixels à une qualité de 70 en WebP pèse généralement moins de 200 KB et semble correcte sur tous les écrans, tandis que la version de 3840 pixels n'apporte aucun avantage visible pour un poids 4 fois supérieur.

Comment corriger une bibliothèque entière

Pour redimensionner correctement un site existant, suivez ces 6 étapes.

1. Listez les emplacements d'images dans votre design, ce qui représente généralement 4 à 6 tailles distinctes plutôt que des dizaines.
2. Mesurez la largeur d'affichage de chaque emplacement à l'aide de l'inspecteur de navigateur sur une page en ligne.
3. Doublez chaque largeur pour obtenir votre taille d'exportation.
4. Triez la bibliothèque dans des dossiers par emplacement, car un traitement par lot applique une seule taille à chaque fichier qu'il contient.
5. Redimensionnez chaque dossier à sa largeur cible, puis compressez et convertissez dans la même étape.
6. Remplacez les fichiers en conservant les mêmes noms afin que les pages existantes continuent de fonctionner.

Le tri dans des dossiers est l'étape qui transforme cela en un travail par lot. La plupart des sites utilisent beaucoup moins de tailles d'images distinctes qu'ils ne le pensent, et le regroupement par emplacement élimine le besoin de traiter les fichiers individuellement.

Images réactives et l'attribut srcset

Utilisez srcset pour proposer plusieurs tailles et laisser le navigateur choisir celle qui convient à chaque appareil. Un téléphone télécharge alors un fichier de 400 pixels tandis qu'un ordinateur télécharge un fichier de 1400 pixels à partir du même code.

Générez 3 largeurs par image, généralement 400, 800 et 1600 pixels, et listez-les avec leurs largeurs en pixels pour que le navigateur puisse choisir. La plupart des systèmes de gestion de contenu produisent cela automatiquement lors du téléversement, vérifiez donc ce que fait déjà votre plateforme. Là où c'est le cas, téléverser un original correctement dimensionné améliore tout de même chaque variante générée.

Redimensionnez avant de compresser, toujours

Redimensionner d'abord signifie que la compression a moins de travail à faire, de sorte que la qualité peut rester élevée tout en gardant le fichier léger. Compresser d'abord et redimensionner ensuite élimine des détails que vous jetez ensuite à nouveau.

L'ordre affecte également l'aspect du résultat. Une image compressée à sa taille réelle présente des artefacts qui deviennent plus visibles lorsque l'image est réduite, car les artefacts sont réduits avec elle. Redimensionner d'abord produit une source plus propre pour l'encodeur et un résultat nettement meilleur pour la même taille de fichier.

Ce que cela fait à la vitesse de la page

Un dimensionnement correct des images supprime généralement 60 à 90 pour cent du poids des images sur un site qui ne l'a jamais fait. L'amélioration est plus importante que n'importe quel changement de format et généralement plus grande que toutes les autres optimisations combinées.

L'effet se concentre sur les visiteurs mobiles, où les connexions sont plus lentes et les données coûtent cher. Le Largest Contentful Paint s'améliore directement, car cette mesure est normalement déterminée par une seule grande image. Résoudre l'audit de dimensionnement correct des images dans Lighthouse élimine fréquemment 2 ou 3 avertissements connexes en même temps.

N'agrandissez jamais une image pour l'adapter

L'agrandissement ajoute des pixels que l'appareil photo n'a jamais capturés, le résultat est donc flou et le fichier grossit sans aucun avantage. Réduire la taille est toujours sûr, tandis que l'agrandir est la seule opération qui donne systématiquement un résultat moins bon.

Lorsqu'une image source est plus petite que l'emplacement qu'elle doit remplir, les options honnêtes consistent à l'utiliser à sa taille naturelle, à adapter la mise en page autour d'elle ou à remplacer l'image. Agrandir une photo de 600 pixels à 1600 pixels produit un fichier flou 4 fois plus lourd que l'original, ce qui échoue à la fois sur la qualité et sur la vitesse.

Vérifier une page pour les images surdimensionnées

Ouvrez les outils de développement, allez sur l'onglet Réseau, filtrez par images et rechargez la page. La liste affiche chaque image avec sa taille transférée, triée de la plus grande à la plus petite.

Toute image individuelle de plus de 500 KB mérite d'être examinée, et toute page où les images totalisent plus de 2 MB présente un problème. Survolez une image dans le panneau Éléments pour voir ses tailles intrinsèque et affichée côte à côte. Un grand écart entre les 2 chiffres est la définition même d'une image mal dimensionnée, et cela se repère en quelques secondes.

Redimensionner une bibliothèque en un seul lot

Définissez la largeur cible une seule fois et appliquez-la à chaque fichier d'un dossier, plutôt que de redimensionner les images individuellement. Une bibliothèque de plusieurs centaines d'images se redimensionne en quelques minutes lorsque le travail est traité par lot.

Déposez jusqu'à 500 fichiers à la fois, ou glissez directement une archive ZIP, puis définissez la largeur, le format et la cible de compression pour l'ensemble. Tout s'exécute dans votre navigateur sur votre propre processeur, de sorte que les sites clients, les ressources de préproduction et les galeries non publiées n'atteignent jamais un serveur. Rien n'est téléversé, ce qui signifie qu'un redimensionnement complet de bibliothèque se produit sans qu'un seul fichier ne traverse le réseau.