Gratis · en tu navegador

Analizador de dimensiones de imágenes

Comprueba que cada imagen declara sus dimensiones y sus versiones responsivas, y compara si quieres el tamaño real del archivo con el mostrado en la página.

Código HTML

Funciona en tu navegador. Nada de lo que escribes se envía a nuestros servidores.

Privacidad y coste

Esta herramienta funciona en tu navegador. Lo que escribes o pegas no se envía a nuestros servidores y usarla es gratis.

Cómo funciona

Pega el HTML de tu página; los elementos <img> se leen en tu navegador.
La herramienta señala la falta de width/height, valores no numéricos, srcset sin sizes, ausencia de srcset y los formatos detectados (incluido <picture>).
Opcional: pulsa «Cargar imágenes y medir». Tu navegador descarga las N primeras imágenes (20 por defecto, 50 como máximo) para leer su tamaño natural y compararlo con los atributos.
Se marcan las imágenes más de dos veces demasiado grandes, estiradas o con proporción errónea; exporta todo a CSV.

Ejemplo

Cuatro imágenes: hero.jpg (1200×600) tiene un srcset con descriptores w sin sizes; product.webp no tiene width, height ni srcset; logo.svg (120×32) es correcto; banner.jpg está en un <picture> con una fuente AVIF y un sizes. Resultado: 3 de 4 imágenes declaran sus dimensiones (75 %), 1 srcset sin sizes, 2 imágenes con srcset o <picture>.

Qué significa el resultado

Sin width y height (o aspect-ratio) el navegador no puede reservar espacio antes de que llegue el archivo, así que la página salta y el CLS empeora. El tamaño natural solo se puede medir en el navegador; la regla de «más de 2x» admite las pantallas de alta densidad y es una convención propia de esta herramienta. Los tamaños definidos en una hoja de estilos externa no se ven solo con el HTML.

Problemas habituales que ayuda a resolver

Imágenes sin dimensiones que empujan el contenido al cargar y perjudican el CLS.
Un srcset con descriptores w pero sin atributo sizes, que hace que el navegador suponga 100vw.
Fotos de 4000 px descargadas para mostrarse a 400 px, sobre todo en móvil.
Valores en porcentaje o «auto» en los atributos, que no reservan nada.

Preguntas frecuentes

¿Por qué width y height si el CSS controla el tamaño?

Los navegadores usan esos dos atributos para calcular la proporción antes de que cargue el archivo. Tu CSS puede después redimensionar la imagen (por ejemplo max-width: 100%; height: auto) sin perder ese espacio reservado.

¿Las imágenes se cargan a través de vuestros servidores?

No. Tu propio navegador descarga las imágenes desde sus servidores, igual que en la página original. Algunos alojamientos bloquean el acceso desde otros sitios y entonces la imagen aparece como «no se pudo cargar».

¿Por qué se acepta un archivo el doble de grande?

En pantallas de alta densidad, una imagen mostrada a 300 px se ve nítida con un archivo de unos 600 px. Por encima, la herramienta supone que se descargan píxeles inútiles.

¿Cuándo usar srcset?

Cuando una imagen supera unos 300 px de ancho y se sirve a pantallas variadas. srcset deja que el navegador elija la versión adecuada y sizes le indica qué ancho ocupará la imagen.