Images responsives

Silktide charge vos pages dans un véritable navigateur et compare les dimensions réelles de chaque image à la taille à laquelle elle est affichée. Les images beaucoup plus grandes que leur apparence à l’écran sont signalées, ainsi que les données gaspillées par cette résolution supplémentaire.

Pourquoi est-ce important ?

Un cas courant : une photo de 4 000 pixels est téléversée, puis la page l’affiche avec une largeur de 400 pixels. Les visiteurs téléchargent le fichier en pleine résolution — potentiellement plusieurs mégaoctets — pour voir ce qu’un fichier bien plus petit afficherait à l’identique. Le gaspillage est plus important sur les téléphones, qui ont les plus petits écrans et souvent les connexions les plus lentes et les plus coûteuses. Des pages plus rapides fidélisent davantage de visiteurs et améliorent le classement dans les résultats de recherche grâce aux .

Comment résoudre ce problème

Proposez chaque image dans plusieurs tailles et laissez le navigateur choisir celle adaptée à l’appareil :

<!-- Le navigateur télécharge uniquement la taille dont il a besoin -->
<img src="flower-800.jpg"
     srcset="flower-400.jpg 400w, flower-800.jpg 800w, flower-1600.jpg 1600w"
     sizes="(max-width: 600px) 100vw, 50vw"
     alt="Étal de fleurs au marché">

Automatisez le redimensionnement. La plupart des génèrent plusieurs tailles lors du téléversement, et les peuvent redimensionner les images lors de leur diffusion : ces deux solutions empêchent le problème de se reproduire.
Au minimum, redimensionnez les images uniques à peu près à la taille à laquelle elles sont affichées avant de les téléverser.

Comment Silktide effectue cette vérification

Charge la page dans un véritable navigateur et enregistre la taille à laquelle chaque image est affichée, en tenant compte des écrans plus nets des appareils modernes.
Compare cette taille avec les dimensions du fichier image réellement téléchargé.
Signale les images pour lesquelles l’excédent est significatif, en indiquant les octets qu’une image de taille appropriée permettrait d’économiser, de la plus importante à la moins importante.

Dépannage

En quoi cette vérification diffère-t-elle des autres vérifications d’images ?

Cette vérification concerne les dimensions : servir une image physiquement plus grande que celle affichée par la page. La compression d’images et l’optimisation d’images permettent de réduire la taille du fichier en conservant les mêmes dimensions, tandis que les formats d’image modernes concernent la conversion au format WebP ou AVIF. Une même image peut être concernée par plusieurs vérifications : les corrections sont complémentaires.

L’image paraît nette grâce aux écrans haute résolution

Les écrans modernes ont effectivement besoin de plus de pixels que ne le suggère la taille d’affichage, et la mesure en tient compte. Les images ne sont signalées que lorsqu’elles dépassent ce que même un écran haute résolution peut utiliser.