Images adaptatives

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 bien plus grandes que leur affichage à l’écran sont signalées, ainsi que les données gaspillées par la résolution excédentaire.

Pourquoi c’est important

Cas fréquent : une photo de 4000 pixels est téléversée, et la page l’affiche à 400 pixels de large. Les visiteurs téléchargent le fichier en pleine résolution - potentiellement des mégaoctets - alors qu’un fichier bien plus petit donnerait le même rendu. Le gaspillage est pire sur les cellulaires, qui ont les plus petits écrans et souvent les connexions les plus lentes et les plus coûteuses. Des pages plus rapides retiennent davantage de visiteurs et contribuent au classement dans les moteurs de recherche grâce aux .

Comment corriger le problème

Fournissez chaque image en plusieurs tailles et laissez le navigateur choisir la bonne pour l’appareil :

<!-- Le navigateur ne télécharge que 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 à la livraison - l’un ou l’autre empêche que le problème se reproduise.
À tout le moins, redimensionnez les images ponctuelles à peu près à la taille à laquelle elles seront affichées avant de les téléverser.

Comment Silktide vérifie cela

Charger la page dans un vrai navigateur et relever la taille à laquelle chaque image est affichée, en tenant compte des écrans plus nets des appareils modernes.
Comparer cela aux dimensions du fichier image réellement téléchargé.
Signaler les images dont l’excédent est significatif, avec le nombre d’octets qu’une image à la bonne taille permettrait d’économiser, les plus importantes en premier.

Dépannage

En quoi cela diffère-t-il des autres vérifications d’images ?

Cette vérification porte sur les dimensions : servir une image physiquement plus grande que ce que la page affiche. La compression d’image et l’optimisation des images visent à réduire la taille du fichier à dimensions égales, et les formats d’images modernes couvrent la conversion en WebP ou AVIF. La même image peut apparaître dans plusieurs de ces vérifications - les correctifs 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 laisse supposer la taille affichée, et la mesure en tient compte. Les images ne sont signalées que lorsqu’elles dépassent ce qu’un écran haute résolution peut utiliser.