Una sola foto sin comprimir recién salida de un móvil o una cámara puede pesar entre 5 y 12 MB. Pon unas cuantas en una página web y se arrastrará con datos móviles, y los visitantes se marcharán. La buena noticia: la mayoría de las imágenes pueden reducirse un 70-80 % sin diferencia visible. Esta guía explica cómo funciona la compresión y cómo hacerlo bien.
Por qué el tamaño de la imagen importa más de lo que crees
Las imágenes suelen ser lo más pesado de una página web, a menudo más que todo el texto, el código y las fuentes juntos. La velocidad de la página afecta a:
- La tasa de rebote. La gente abandona las páginas que tardan más de unos segundos en cargar.
- El posicionamiento en buscadores. Google usa el rendimiento de carga (Core Web Vitals) como señal de clasificación.
- Los costes de ancho de banda. Imágenes más pequeñas significan facturas de alojamiento más bajas y menos datos móviles para tus visitantes.
Reducir tus imágenes es una de las mejoras de mayor impacto y menor esfuerzo que puedes hacer en cualquier sitio.
Compresión con pérdida frente a sin pérdida
Hay dos maneras de reducir una imagen, y conocer la diferencia es la clave para comprimir bien.
La compresión sin pérdida reorganiza los datos para que ocupen menos espacio sin descartar nada. La imagen es matemáticamente idéntica al reabrirla. Es segura, pero solo reduce los archivos de forma modesta (a menudo entre un 10 % y un 30 %). PNG usa esto.
La compresión con pérdida elimina permanentemente los datos que el ojo humano tiene menos probabilidades de notar: gradientes de color sutiles, detalle fino de alta frecuencia. Reduce los archivos drásticamente (a menudo entre un 70 % y un 90 %). JPG, WebP y AVIF usan esto. El truco está en encontrar el punto en el que el archivo es diminuto pero la pérdida sigue siendo invisible.
Para fotografías en la web, la compresión con pérdida es casi siempre la elección correcta: el ahorro es enorme y, bien hecho, nadie puede ver la diferencia.
El ajuste de calidad: donde ocurre la magia
La mayoría de los formatos con pérdida te dejan elegir un valor de “calidad” de 0 a 100. Así puedes pensarlo:
- 90-100: Casi perfecto, pero los archivos son grandes. Excesivo para la web.
- 75-85: El punto dulce. Visualmente indistinguible del original en la mayoría de fotos, con un gran ahorro de tamaño.
- 60-75: Aún aceptable para fondos y miniaturas; puede que empieces a ver artefactos si miras de cerca.
- Por debajo de 60: Artefactos visibles en bloques. Solo para miniaturas diminutas o cuando el tamaño es crítico.
Empieza en 80 y ajusta. Con nuestro compresor de imágenes puedes arrastrar el control de calidad y previsualizar el resultado en tiempo real, para detenerte justo en el punto en el que sigue viéndose perfecto.
Un flujo de trabajo paso a paso
- Primero redimensiona, luego comprime. Si una imagen se mostrará a 800 píxeles de ancho, no sirvas un original de 4000 píxeles. Reducir su tamaño primero es el mayor ahorro que puedes lograr.
- Elige el formato adecuado. Usa WebP para la mejor relación tamaño-calidad, o JPG para compatibilidad universal. (Consulta nuestra guía de formatos.)
- Pon la calidad en ~80 y previsualiza.
- Revisa el resultado a tamaño completo. Fíjate sobre todo en zonas suaves como cielos y piel: ahí aparecen primero los artefactos.
- Compara el tamaño del archivo. Procura mantener la mayoría de fotos web por debajo de 200 KB y las imágenes de cabecera por debajo de 500 KB.
Errores habituales que debes evitar
- Servir archivos de cámara a resolución completa. Una foto de 12 megapíxeles tiene mucho más detalle del que necesita cualquier pantalla. Redimensiona antes de comprimir.
- Comprimir PNG que deberían ser JPG. Una foto guardada como PNG es enorme. Conviértela primero a JPG o WebP y luego comprímela.
- Recomprimir el mismo JPG una y otra vez. Cada guardado pierde un poco más de calidad. Comprime siempre desde el original de mayor calidad que tengas.
- Sobrecomprimir logotipos y texto. La compresión con pérdida destroza los bordes nítidos. Mantén los gráficos como PNG o WebP sin pérdida.
¿La compresión ocurre en un servidor?
No tiene por qué. Nuestra herramienta de compresión funciona enteramente en tu navegador usando WebAssembly: tus imágenes nunca se suben a ningún sitio. Eso es más rápido (sin ida y vuelta de subida y descarga), completamente privado y funciona incluso con lotes grandes de archivos.
¿Cómo de pequeñas deben ser mis imágenes?
Como objetivo aproximado para la web:
- Miniaturas: 10-30 KB
- Imágenes dentro de artículos: 50-150 KB
- Imágenes de cabecera a todo el ancho: 150-500 KB
- Imágenes de fondo: por debajo de 300 KB cuando sea posible
En resumen
La compresión es la forma más fácil de acelerar cualquier web. Redimensiona tus imágenes al tamaño en que realmente se mostrarán, elige un formato eficiente como WebP, pon la calidad en torno a 80 y previsualiza el resultado. Normalmente recortarás el tamaño en tres cuartas partes o más, y tus visitantes (y tu posicionamiento) te lo agradecerán.