ToolBox Image — Cómo funciona realmente la compresión de imágenes (en 5 minutos)

La compresión de imágenes es un problema resuelto en principio, pero elegir el formato o la calidad incorrecta puede desperdiciar ancho de banda, ralentizar tu sitio o producir artefactos visibles. Aquí tienes una guía práctica de cómo funcionan los principales formatos y cuándo usar cada uno.

Con pérdida vs sin pérdida

Todo formato de imagen pertenece a una de dos categorías. Los formatos sin pérdida conservan cada píxel del original — la imagen decodificada es idéntica bit por bit a la fuente. Los formatos con pérdida descartan información a la que el ojo humano es menos sensible, logrando tamaños de archivo mucho más pequeños a costa de algo de fidelidad.

Cuál elegir depende del caso de uso. Las fotografías y los degradados toleran bien la compresión con pérdida porque los artefactos son difíciles de detectar en tamaños de visualización normales. Las capturas de pantalla, el texto, los logotipos y los gráficos con bordes nítidos necesitan codificación sin pérdida para mantenerse nítidos.

JPEG: el estándar universal

JPEG ha sido el formato de imagen dominante en la web durante tres décadas. Utiliza un algoritmo de compresión con pérdida basado en la transformada discreta del coseno — la misma técnica utilizada en los códecs de video. El codificador divide la imagen en bloques de 8x8 píxeles, transforma cada bloque en el espacio de frecuencia y descarta la información de alta frecuencia que el ojo humano percibe con menos agudeza.

Fortalezas: Soporte universal en navegadores, excelente compresión para fotografías, calidad ajustable.

Debilidades: Sin soporte de transparencia, artefactos de bloque visibles en baja calidad, mala compresión para texto y gráficos.

Mejor para: Fotografías, degradados complejos, imágenes de redes sociales, cualquier situación donde la compatibilidad universal importe más que el tamaño del archivo.

PNG: precisión y transparencia

PNG fue diseñado como un reemplazo libre de patentes para GIF. Utiliza compresión Deflate sin pérdida — el mismo algoritmo detrás de los archivos ZIP — con un paso de preprocesamiento que filtra cada fila de píxeles para hacerla más comprimible. PNG soporta transparencia de canal alfa completa, corrección gamma y perfiles de color incrustados.

Fortalezas: Sin pérdida, soporte de transparencia, excelente para texto y gráficos, ampliamente compatible.

Debilidades: Tamaños de archivo grandes para fotografías, sin soporte de múltiples imágenes o animación (use APNG o GIF en su lugar).

Mejor para: Logotipos, capturas de pantalla, elementos de UI, imágenes con texto, gráficos con transparencia.

WebP: el formato moderno de Google

WebP fue desarrollado por Google como un reemplazo para JPEG y PNG enfocado en la web. Soporta compresión con pérdida (basada en la predicción del códec de video VP8) y compresión sin pérdida (usando un algoritmo diferente con predicción espacial y caché de color). En promedio, WebP con pérdida es 25-35% más pequeño que JPEG al mismo nivel de calidad.

Fortalezas: Más pequeño que JPEG y PNG, soporta transparencia y animación, soporte casi universal en navegadores (97%+).

Debilidades: Ligeramente más lento de codificar que JPEG, no compatible con algunas herramientas heredadas y plataformas CMS.

Mejor para: Imágenes web donde el tamaño del archivo importa más que la compatibilidad universal.

AVIF: la próxima generación

AVIF utiliza el códec AV1 desarrollado por la Alliance for Open Media — el mismo códec que Netflix y YouTube usan para streaming de video. Logra una compresión 30-50% mejor que WebP al mismo nivel de calidad, especialmente para contenido fotográfico. AVIF también soporta HDR, gamut de color amplio, profundidad de 10/12 bits y compresión sin pérdida.

Fortalezas: Mejores ratios de compresión, soporte HDR, estándar abierto y gratuito, soporte de transparencia.

Debilidades: Codificación más lenta (especialmente en ajustes de alta calidad), menor soporte en navegadores (~92%), mayor complejidad del decodificador.

Mejor para: Fotografías donde el tamaño del archivo es crítico, contenido HDR, preparación para el futuro de tu pipeline de imágenes.

Cómo elegir

Aquí tienes un árbol de decisión simple: si necesitas transparencia, usa PNG (o WebP con respaldo). Si la imagen es una fotografía, usa JPEG, WebP o AVIF — en orden de tamaño de archivo decreciente y tiempo de codificación creciente. Si la imagen tiene bordes nítidos o texto, quédate con PNG. Para máxima compatibilidad, sirve WebP con respaldo JPEG usando el elemento <picture>.

Más importante: no optimices manualmente cada imagen. Usa el modo Auto de nuestro compresor, que elige el formato y la calidad adecuados para cada archivo individualmente.