Analizador de compresión de imágenes
Respuesta breve
Comprueba el peso, los formatos y el ahorro por compresión de las imágenes, además del marcado responsive: srcset, ancho y alto, y carga diferida.
Qué hace
Comprueba hasta 15 imágenes de una página en cuanto a formato y tamaño de archivo, marca las que aún se sirven como JPEG o PNG en lugar de WebP o AVIF, y estima los bytes que ahorrarías al convertirlas a WebP. Una segunda parte comprueba cada `<img>` en busca de marcado responsivo: un `srcset`, atributos `width` y `height` que evitan el desplazamiento del diseño, carga diferida para las imágenes fuera de pantalla y formatos modernos.
Por qué importa
Las imágenes suelen ser la parte más pesada de una página y a menudo su elemento de Largest Contentful Paint. Enviar JPEG a tamaño completo a los teléfonos desperdicia datos y ralentiza ese pintado, y las imágenes sin width y height hacen que el diseño salte al cargarse, lo que perjudica el Cumulative Layout Shift.
Cómo funciona
-
Introduce la URL de una página
-
Enumeramos las imágenes de la página y comprobamos el formato y el tamaño de hasta 15
-
Estimamos el ahorro con WebP y luego comprobamos cada `<img>` en busca de srcset, dimensiones y carga diferida
-
Devolvemos un resultado por cada parte, con las imágenes más pesadas y las que carecen de marcado responsivo
Ejemplo de entrada y salida
url: https://rankproof.eu/tools
Peso y formatos de imagen imágenes comprobadas: 15 formato moderno (WebP/AVIF): 11 / 15 warn peso total de imágenes: 890 KB OK (menos de 1 MB) ahorro estimado con WebP: 64 KB más pesada: /images/hero-banner.jpg — 210 KB Imágenes responsivas: 18 con srcset: 18 OK width y height configurados: 18 OK (sin desplazamiento del diseño) las imágenes fuera de pantalla cargan de forma diferida OK 1 de 2 áreas están bien
Quién lo usa
-
Responsable de e-commerce
Comprueba las páginas de categoría y de producto en busca de imágenes que aún se sirven como JPEG o PNG a tamaño completo de cámara.
-
Responsable de contenido
Detecta subidas que se saltaron el redimensionado, y páginas donde las imágenes carecen de srcset o dimensiones.
-
Ingeniero/a de rendimiento
Estima cuánto ahorraría una conversión a WebP antes de elegir un flujo de trabajo de imágenes.
Preguntas frecuentes
¿Cuánto puedo ahorrar?
El informe estima los bytes ahorrados al convertir a WebP cada imagen que no está en un formato moderno. El ahorro real depende de la imagen y del ajuste de calidad que elijas.
¿Perjudica la compresión la calidad de la imagen?
Con ajustes de calidad razonables, los formatos modernos se ven igual para la mayoría de las personas. Compara el antes y el después al tamaño en el que se muestra la imagen.
¿Qué hace que una imagen sea responsiva?
Un `srcset` (o un elemento `<picture>`) para que el navegador pueda elegir un archivo más pequeño en pantallas pequeñas, más `width` y `height` para reservar el espacio antes de que cargue la imagen.
¿Deberían las imágenes cargarse de forma diferida?
Las imágenes fuera de pantalla, sí: añade `loading="lazy"`. No cargues de forma diferida la imagen principal de la parte superior de la página; suele ser el elemento de Largest Contentful Paint.
¿Debería eliminar los metadatos EXIF?
Para mostrarla en la web, normalmente sí: ahorra bytes y elimina detalles como la ubicación GPS.