Gratuit · dans votre navigateur

Analyseur de dimensions d'images

Vérifiez que chaque image déclare ses dimensions et ses versions responsives, et comparez au besoin la taille réelle du fichier à celle affichée.

Code source HTML

Fonctionne dans votre navigateur. Rien de ce que vous saisissez n'est envoyé à nos serveurs.

Confidentialité et coût

Cet outil fonctionne dans votre navigateur. Ce que vous saisissez ou collez n'est pas envoyé à nos serveurs et l'utilisation est gratuite.

Comment ça marche

Collez le HTML de votre page ; les balises <img> sont lues dans votre navigateur.
L'outil signale l'absence de width/height, les valeurs non numériques, srcset sans sizes, l'absence de srcset et les formats détectés (avec <picture>).
Facultatif : cliquez sur « Charger les images et mesurer ». Votre navigateur télécharge les N premières images (20 par défaut, 50 au maximum) pour lire leur taille naturelle et la comparer aux attributs.
Les images plus de deux fois trop grandes, étirées ou au ratio faux sont signalées ; exportez le tout en CSV.

Exemple

Quatre images : hero.jpg (1200×600) a un srcset en descripteurs w sans sizes ; product.webp n'a ni width ni height et pas de srcset ; logo.svg (120×32) est correct ; banner.jpg est dans un <picture> avec une source AVIF et un sizes. Résultat : 3 images sur 4 déclarent leurs dimensions (75 %), 1 srcset sans sizes, 2 images avec srcset ou <picture>.

Ce que signifie le résultat

Sans width et height (ou aspect-ratio), le navigateur ne peut pas réserver la place avant l'arrivée du fichier : la page saute, ce qui dégrade le CLS. La taille réelle ne se mesure que dans le navigateur ; la règle « plus de 2x » tient compte des écrans haute densité, c'est une convention de cet outil. Les tailles définies dans une feuille de style externe ne sont pas visibles depuis le HTML seul.

Problèmes courants que cet outil aide à résoudre

Des images sans dimensions qui font sauter le contenu au chargement et pénalisent le CLS.
Un srcset avec descripteurs w mais sans attribut sizes, qui pousse le navigateur à supposer 100vw.
Des photos de 4000 px téléchargées pour s'afficher à 400 px, surtout sur mobile.
Des dimensions en pourcentage ou en « auto » dans les attributs, qui ne réservent rien.

Questions fréquentes

Pourquoi width et height alors que le CSS gère la taille ?

Les navigateurs utilisent ces deux attributs pour calculer le ratio d'aspect avant le chargement du fichier. Votre CSS peut ensuite adapter la taille (par exemple max-width: 100%; height: auto) sans perdre cette réservation.

Le chargement des images passe-t-il par vos serveurs ?

Non. C'est votre navigateur qui télécharge les images depuis leurs propres serveurs, comme sur la page d'origine. Certains hébergeurs bloquent l'accès depuis un autre site : l'image est alors marquée « chargement impossible ».

Pourquoi un fichier 2x plus grand est-il accepté ?

Sur les écrans haute densité, une image affichée à 300 px se voit nette avec un fichier d'environ 600 px. Au-delà, l'outil considère que des pixels sont téléchargés pour rien.

Quand utiliser srcset ?

Quand une image est plus large qu'environ 300 px et servie à des écrans variés. srcset permet au navigateur de choisir la bonne version selon l'écran, sizes lui dit quelle largeur l'image occupera.