Cómo comprimir imágenes para la web sin perder calidad

Las imágenes suelen ser lo más pesado de una página web. Una sola foto sin optimizar, recién salida de la cámara del móvil, puede pesar varios megabytes — más que todo el texto, el código y los estilos de un sitio juntos. Comprimir imágenes es el cambio de mayor impacto que la mayoría puede hacer por la velocidad de la página, y bien hecho es invisible para las visitas. Esta guía cubre cómo funciona la compresión de imágenes y cómo reducir archivos sin una caída notable de calidad.

Por qué importa el tamaño de la imagen

Cada kilobyte de más son datos que el navegador de un visitante debe descargar antes de poder mostrar tu página. En una conexión de escritorio rápida quizá no se note, pero en redes móviles aumenta directamente el tiempo de carga, frustra a los usuarios y perjudica el posicionamiento — Google usa señales de experiencia de página como la velocidad de carga como factor de ranking. Imágenes más pequeñas significan páginas más rápidas, menos gasto de ancho de banda y visitantes más contentos.

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

Hay dos formas fundamentalmente distintas de hacer más pequeño un archivo de imagen.

Compresión sin pérdida

Los métodos sin pérdida empaquetan los datos de forma más eficiente sin desechar nada — al descomprimir recuperas una copia idéntica píxel a píxel del original. Es seguro, pero el ahorro es modesto, normalmente del 10–50 %. PNG usa compresión sin pérdida, por eso es genial para logos, capturas de pantalla y gráficos con bordes nítidos y colores planos.

Compresión con pérdida

Los métodos con pérdida descartan información que el ojo humano difícilmente notará — variaciones sutiles de color, detalle fino en zonas cargadas — para lograr ahorros mucho mayores, a menudo del 70–90 %. JPEG y WebP usan compresión con pérdida. El equilibrio se controla con un ajuste de calidad: menos calidad significa archivo más pequeño pero más artefactos visibles. Para fotografías, la compresión con pérdida en un nivel de calidad sensato es casi siempre la elección correcta.

Elegir el formato adecuado

El formato que elijas importa tanto como el nivel de compresión:

• JPEG — el caballo de batalla para fotografías. Muy compatible en todas partes. Buena compresión, pero sin transparencia.
• PNG — el mejor para gráficos con líneas nítidas, texto o transparencia (logos, iconos, capturas). Sin pérdida, así que las fotos salen grandes.
• WebP — un formato moderno que suele producir archivos un 25–35 % más pequeños que JPEG con la misma calidad visual, y admite transparencia como PNG. Compatible con todos los navegadores actuales. Para la mayoría de imágenes web de hoy, WebP es la mejor opción por defecto.
• SVG — no es en absoluto un formato de foto comprimida, pero para logos e iconos simples un SVG vectorial se mantiene nítido a cualquier tamaño y a menudo pesa solo unos pocos kilobytes.

¿Cuánta calidad puedes sacrificar?

Para los formatos con pérdida, la calidad suele expresarse en una escala de 0 a 100. Contra la intuición, la parte alta de ese rango es un desperdicio: la diferencia entre calidad 100 y calidad 80 suele ser imposible de ver, y sin embargo la calidad 80 puede ser la mitad del tamaño de archivo. Un punto de partida práctico:

• Calidad 75–85 — el punto óptimo para la mayoría de las fotos web. Gran ahorro, sin pérdida visible en la visualización típica.
• Calidad 60–75 — bien para imágenes de fondo grandes o miniaturas donde la nitidez absoluta no es crítica.
• Por debajo de 60 — el ahorro se estanca mientras los artefactos (cielos con bloques, halos en los bordes) se vuelven notorios. Normalmente no vale la pena.

El mejor enfoque es comparar, no adivinar. Comprime a una calidad dada, mira el resultado al tamaño en que realmente se mostrará y baja la calidad paso a paso hasta que apenas empieces a ver una diferencia — luego sube un nivel.

Redimensiona antes de comprimir

La compresión solo puede hacer tanto si la imagen es mucho mayor de lo necesario. Una foto de 4000 píxeles de ancho mostrada en una columna de 800 píxeles lleva cinco veces más píxeles de los que nadie verá. Redimensionar la imagen a aproximadamente las dimensiones a las que se muestra — y luego comprimir — suele ser, de todos, el mayor ahorro. Nuestro redimensionador de imágenes hace recorte, rotación y redimensionado de una sola pasada, por completo en tu navegador.

Un flujo de trabajo sencillo

1. Redimensiona la imagen al mayor tamaño en que se mostrará.
2. Elige WebP si puedes, JPEG para máxima compatibilidad, PNG para gráficos con transparencia.
3. Comprime a calidad ~80 y mira el resultado al tamaño de visualización.
4. Baja la calidad hasta que notes una diferencia, luego sube un paso.

Los últimos tres pasos los haces en segundos con nuestro compresor de imágenes: suelta una o muchas imágenes y se comprimen al instante en tu propio dispositivo — no se sube nada a un servidor, así que es seguro para fotos privadas. Compara los tamaños de antes y después, y descarga cuando estés conforme con el resultado.