Cómo comprimir imágenes para la web — Guía completa

Por qué el tamaño de las imágenes importa en la web

Las imágenes representan aproximadamente el 50% del peso total de una página web promedio. Una sola fotografía sin optimizar puede pesar entre 3 y 8 MB — más que el resto de la página combinado. Las consecuencias son tiempos de carga más lentos, tasas de rebote más altas, peores posicionamientos en buscadores y mayores costos de alojamiento.

Los Core Web Vitals de Google miden explícitamente el Largest Contentful Paint (LCP), que suele ser una imagen. Las páginas que cargan su imagen principal en menos de 2,5 segundos se posicionan mejor; las que tardan más de 4 segundos reciben penalizaciones. La compresión de imágenes es una de las optimizaciones de SEO y rendimiento con mayor impacto que puedes realizar.

Compresión con pérdida vs. sin pérdida

Son dos enfoques fundamentalmente distintos:

• Compresión con pérdida descarta información visual que el ojo humano difícilmente notará. JPEG y WebP (modo con pérdida) utilizan este enfoque. Al 80–85% de calidad, la diferencia respecto al original es prácticamente invisible, pero el archivo puede ser un 60–80% más pequeño.
• Compresión sin pérdida reduce el tamaño del archivo sin perder ningún dato. PNG y WebP (modo sin pérdida) utilizan este enfoque. El ahorro es menor — típicamente un 10–30% — pero la imagen es bit a bit idéntica al decodificarla.

Para fotografías en la web, la compresión con pérdida es casi siempre la elección correcta. Para assets de UI con bordes nítidos y transparencia (logotipos, íconos), la compresión sin pérdida es más segura.

Métodos prácticos de compresión

1. Compresor en el navegador

FileKit Compresor de Imágenes te permite soltar imágenes, ajustar la calidad, redimensionar opcionalmente y convertir a un formato más eficiente (WebP) — todo en tu navegador. Ves el tamaño del archivo antes y después, para que puedas encontrar el equilibrio exacto que buscas.

2. Optimización en tiempo de compilación

Para sitios web y aplicaciones, comprime las imágenes durante el paso de compilación:

• Sharp (Node.js) — rápido, admite JPEG/PNG/WebP/AVIF, muy usado en proyectos Next.js y Astro.
• Squoosh CLI — la herramienta de compresión de Google con excelentes parámetros predeterminados y soporte de formatos.
• imagemin — basado en plugins, funciona con webpack, Rollup y Vite.

3. Optimización a nivel de CDN

Servicios como Cloudflare Image Resizing, Imgix y Cloudinary pueden redimensionar, comprimir y convertir el formato de las imágenes al vuelo en el borde de la CDN. El navegador envía un encabezado Accept declarando soporte para WebP/AVIF, y la CDN sirve el formato óptimo automáticamente.

Cómo elegir el nivel de calidad adecuado

Redimensiona antes de comprimir

La compresión y el redimensionamiento son operaciones complementarias pero diferentes. Si tu imagen fuente es de 4000 × 3000 píxeles pero se muestra a 800 × 600 en pantalla, estás enviando 25 veces más píxeles de los necesarios. Redimensiona primero a las dimensiones de visualización (o 2× para pantallas Retina) y luego comprime. Solo esto puede reducir el tamaño del archivo más de un 80%.

Guía rápida de selección de formato

• Fotografía, navegadores modernos: WebP al 80%. Si puedes permitirte la codificación lenta, AVIF al 70% es aún más pequeño.
• Fotografía, máxima compatibilidad: JPEG al 85%.
• Captura de pantalla o UI: PNG (sin pérdida, maneja texto y bordes nítidos perfectamente).
• Gráfico simple o ícono: SVG (vectorial, escalable infinitamente, tamaño de archivo mínimo).
• Contenido animado: WebP o MP4 — evita GIF, que es enorme.

Lista de verificación de rendimiento

• Todas las imágenes tienen atributos explícitos de width y height (evita el desplazamiento de maquetación).
• La imagen hero usa fetchpriority="high" y loading="eager".
• Las imágenes debajo del pliegue usan loading="lazy".
• Las imágenes se sirven en WebP o AVIF cuando el navegador lo admite.
• Ninguna imagen es más ancha que 2× su tamaño de visualización renderizado.
• El peso total de imágenes por página es inferior a 500 KB para la mayoría de las páginas de contenido.