Auditor de imágenes web

Qué analiza el auditor

Las imágenes suelen ser más de la mitad del peso de una página web y, en la mayoría de los casos, el elemento que determina el LCP (Largest Contentful Paint), la métrica de Core Web Vitals que más cuesta aprobar. Aun así, revisar una por una todas las imágenes de una página con las herramientas del navegador es tedioso.

Este auditor descarga el HTML de la URL que indiques, localiza todas las etiquetas <img> (incluidas las que usan <picture>, srcset o plugins de lazy loading con data-src), mide cada imagen y comprueba ocho problemas concretos:

1. Imagen LCP con loading="lazy": el error que más penaliza el LCP.
2. Imagen LCP sin prioridad: sin fetchpriority="high" ni <link rel="preload">.
3. Imágenes pesadas: más de 200 KB (y más de 500 KB como problema grave).
4. Formatos antiguos: JPEG o PNG de más de 100 KB sin alternativa WebP o AVIF.
5. Falta de width y height: causa saltos de contenido (CLS).
6. Sin srcset: el móvil descarga la misma imagen que el escritorio.
7. Imágenes fuera de pantalla sin lazy loading: compiten con la imagen principal.
8. Sin atributo alt: afecta a accesibilidad y al SEO de imágenes.

Con todo eso calcula una puntuación de 0 a 100 y una estimación del ahorro si las imágenes JPEG y PNG se sirvieran en formatos modernos.

Cómo usarlo

1. Escribe o pega la URL completa de la página, por ejemplo https://tuweb.com/producto/zapatillas. Analiza solo esa página, no todo el sitio, así que prueba también tus plantillas más importantes: portada, ficha de producto, artículo del blog.
2. Pulsa Analizar imágenes. El análisis tarda entre 3 y 10 segundos según el número de imágenes y la velocidad del servidor.
3. Revisa Qué mejorar: los problemas aparecen ordenados por gravedad, con una explicación y un enlace a la guía que explica cómo resolverlos.
4. Baja a Imágenes analizadas para ver el detalle de cada archivo: formato, peso, dimensiones declaradas y avisos.
5. Usa Copiar enlace al informe para compartirlo con tu equipo o cliente: el enlace vuelve a lanzar el análisis con la misma URL.

Cómo interpretar los resultados

La puntuación

Parte de 100 y resta puntos por cada problema, con un tope por tipo para que una sola categoría no hunda la nota. Una página con 90 o más tiene las imágenes bien resueltas; entre 50 y 89 hay mejoras claras y rápidas; por debajo de 50 las imágenes están lastrando el rendimiento de forma seria.

No es la puntuación de Lighthouse ni la sustituye: Lighthouse mide la carga real en un navegador simulado y este auditor revisa el marcado y los archivos. Son complementarios, y los problemas que detecta este auditor son de los que más suben la nota de Lighthouse cuando se corrigen.

La imagen "probable LCP"

El auditor marca como probable LCP la primera imagen de contenido del documento, descartando logotipos, iconos y SVG. En la mayoría de portadas, fichas de producto y artículos acierta, pero si tu imagen principal es un fondo CSS o la pinta JavaScript, no la verá. Para confirmarlo, abre las DevTools de Chrome, pestaña Performance, y busca el marcador LCP.

El ahorro estimado

Se calcula aplicando a cada imagen JPEG o PNG señalada los ahorros medios de WebP (≈30 %) y AVIF (≈50 %) con calidad visual equivalente. Es una referencia: una foto ya muy comprimida ahorrará menos, y un PNG exportado sin optimizar puede ahorrar más del 80 %. Para conocer la cifra exacta, pasa las imágenes por el optimizador de ImageZap y compara.

Cómo solucionar los problemas más comunes

La imagen LCP se carga en diferido. Es muy habitual en temas de WordPress y en componentes que aplican loading="lazy" a todas las imágenes. Quítalo de la imagen principal y añade prioridad:

<img src="/hero.avif" width="1600" height="900" alt="…" fetchpriority="high">

Formatos antiguos. Convierte las imágenes a AVIF con WebP y JPEG de respaldo y sírvelas con <picture>. El optimizador genera los tres formatos de una vez y te da el código; lo explicamos a fondo en la guía de <picture> y formatos de respaldo.

Sin width y height. Añade las dimensiones reales del archivo. No hace que la imagen deje de ser responsive si tu CSS tiene max-width: 100%; height: auto;, y permite al navegador reservar el hueco antes de descargarla.

Imágenes pesadas sin srcset. Genera variantes de 640, 1280 y 1920 px y declara srcset y sizes. En la guía de imágenes responsive tienes ejemplos para los diseños más comunes.

Limitaciones

• Solo HTML del servidor. No se ejecuta JavaScript. En webs hechas solo con React, Vue o Angular sin renderizado en servidor, las imágenes no están en el HTML y el auditor lo avisará.
• No analiza CSS. Las imágenes de fondo (background-image) no se incluyen.
• Hasta 40 imágenes por página. Las primeras del documento son las que más afectan a la carga.
• Webs que bloquean robots. Algunos cortafuegos (Cloudflare en modo estricto, por ejemplo) rechazan peticiones automáticas. En ese caso verás un error de conexión.

Privacidad y seguridad

Para analizar la página, nuestro servidor descarga su HTML público y consulta el tamaño de cada imagen, igual que haría un navegador. No guardamos la URL ni el resultado: el informe se calcula, se envía a tu navegador y se descarta (la red de distribución puede conservar la respuesta unos minutos en caché para no repetir el análisis). Solo se pueden analizar direcciones públicas: las IP privadas, locales o de intranet están bloqueadas.

Preguntas frecuentes

¿Es gratis? ¿Tiene límite?

Es gratis y sin registro. Para evitar abusos hay un límite de unos pocos análisis por minuto desde la misma conexión, más que suficiente para un uso normal.

¿Por qué el resultado es distinto al de PageSpeed Insights?

PageSpeed Insights carga la página en un navegador y mide tiempos reales (o datos de usuarios reales). Este auditor revisa el marcado y los archivos de imagen. Muchas recomendaciones coinciden, pero las puntuaciones no son comparables.

¿Puedo analizar una web en localhost o en mi intranet?

No. Por seguridad solo se aceptan direcciones públicas en los puertos 80 y 443. Para entornos locales, usa Lighthouse en las DevTools de Chrome.

¿Por qué aparece "tamaño desconocido" en algunas imágenes?

Porque el servidor de esa imagen no indica su tamaño en las cabeceras o ha rechazado la consulta. Ocurre con algunos CDN de imágenes y servidores con protección contra robots.

¿Detecta imágenes cargadas con JavaScript?

No, solo las presentes en el HTML que devuelve el servidor. Si tu web usa renderizado en servidor (Next.js, Nuxt, Astro, WordPress…), estarán todas.

¿Cómo optimizo las imágenes que señala?

Descárgalas, suéltalas en el optimizador y genera AVIF y WebP con el código <picture> incluido. Todo se procesa en tu navegador.