CEA "Delia Tetreault"
Web para aplicar en Prácticas de Ofimática II - 2026
Auditor de peso de imagen
Audita tus archivos antes de subir a producción
100% local — sin servidor
Arrastra imágenes aquí o haz clic para seleccionar
Múltiples archivos simultáneos · Análisis 100% en el navegador
PNGJPGWebP GIFSVGAVIFBMP
Resumen del análisis
Total
0
Críticas
0
Advertencias
0
Sin problemas
0
Resultados por imagen
Guía de optimización web
Conceptos y argumentos detrás de cada sugerencia
¿Por qué el peso de una imagen importa tanto?
El peso de las imágenes es el
principal factor de lentitud en la web:
representan entre el 50–70% del peso total de una página típica.
El indicador LCP (Largest Contentful Paint) de Google
mide cuánto tarda en aparecer el elemento visual más grande de la
pantalla. Una imagen de
más de 500 KB en la zona visible casi garantiza
un LCP superior a 2.5 segundos, lo que Google penaliza
directamente en el ranking de búsqueda (Core Web Vitals). El
umbral crítico de 500 KB y la advertencia de 200 KB reflejan los
estándares de la industria para mantener un LCP por debajo de 2.5
segundos en conexiones 4G estándar.
Formatos de imagen: cuándo usar cada uno
No existe un formato universal. La elección correcta depende del
tipo de contenido (foto, ilustración, icono), la
necesidad de transparencia y el
soporte de los navegadores de tu audiencia.
| Formato | Ideal para | Transparencia | Soporte |
|---|---|---|---|
| AVIF | Fotos y arte digital | Sí | ~92% |
| WebP | Todo uso general | Sí | ~97% |
| JPEG XL | Fotos de alta calidad | Sí | ~50% |
| JPEG | Fotografía sin alpha | No | 100% |
| PNG | UI, iconos con alpha | Sí | 100% |
| SVG | Íconos, logos | Sí | ~98% |
Canal alpha: cuándo realmente lo necesitas
El canal alpha es el cuarto canal de datos de una imagen (RGBA)
que almacena la
información de transparencia píxel a píxel. Usar
PNG con alpha cuando no hay transparencia es uno de los errores
más comunes: un PNG típico pesa entre 2–5× más que un JPEG o WebP
equivalente. Regla práctica:
usa PNG o WebP solo si el fondo de la imagen necesita ser
transparente. Logos sobre fondo blanco, banners y fotografías nunca necesitan
alpha. La detección automática de esta herramienta escanea el
canal A de la imagen para confirmarlo.
Dimensiones intrínsecas vs. dimensiones de visualización
Una imagen de 3000 × 2000 px mostrada en un
contenedor de 600 px desperdicia el 90% de sus
datos: el navegador descarga todos los píxeles aunque solo muestre
una fracción. El ancho máximo recomendado de
1920 px cubre pantallas Full HD. Para imágenes de
contenido (artículos, cards), 1200 px es suficiente. Usa el
atributo
srcset de HTML para servir tamaños
diferentes según el dispositivo, combinando con imágenes
dimensionadas correctamente desde el origen.
GIF animado: el peor formato moderno
El GIF fue creado en 1987 y su compresión es extremadamente
ineficiente para animaciones. Un video
MP4 (H.264)
equivalente pesa típicamente entre
5× y 20× menos que el GIF, con mejor calidad y
sin limite de paleta de colores (GIF solo soporta 256 colores). La
solución es reemplazarlo con un elemento
<video autoplay loop muted playsinline> en
HTML, que los navegadores modernos tratan exactamente como un GIF.
AVIF animado y WebP animado son alternativas más modernas que
también superan al GIF.
SVG: potente pero necesita limpieza
Los archivos SVG exportados desde
Figma, Illustrator o Affinity Designer suelen
incluir metadatos innecesarios: IDs generados, capas ocultas,
comentarios de la aplicación y definiciones sin usar. SVGO (SVG
Optimizer) puede eliminar estos datos y reducir el peso entre un
40–60% sin afectar la apariencia visual. Para
usar en producción: instala SVGO con
npm install -g svgo y ejecuta
svgo archivo.svg. También puedes usar el servicio web
svgomg.net sin instalación.
Comparativa de ahorro por conversión de formato
Los porcentajes de ahorro son promedios basados en benchmarks de
Google, Cloudinary y Squoosh. El ahorro real varía según el
contenido de la imagen (fotografía vs. ilustración, paleta de
colores, detalle).
| Conversión | Ahorro típico | Calidad visual | Transparencia | Recomendación |
|---|---|---|---|---|
| PNG → WebP | 25–50% | Sin pérdida perceptible | Sí (WebP) | Primera opción |
| PNG → AVIF | 35–60% | Sin pérdida perceptible | Sí (AVIF) | Si soporte ~92% es aceptable |
| JPEG → WebP | 25–35% | Similar o mejor | No aplica | Primera opción |
| JPEG → AVIF | 35–55% | Similar o mejor | No aplica | Si soporte ~92% es aceptable |
| GIF → MP4 | 80–95% | Muy superior | No (MP4) | Siempre recomendado |
| GIF → WebP anim. | 40–70% | Superior | Sí | Si necesitas transparencia |
| PNG → JPEG | 30–70% | Leve pérdida | No (JPEG) | Solo si no hay transparencia |