¿Lossy o lossless: qué compresión usar para imágenes web?

Usa lossy (JPG, WebP, AVIF) para fotografías — el ojo humano apenas nota diferencia a calidad 80–85 y los archivos son 5–20× más pequeños. Usa lossless (PNG, WebP-lossless) para capturas, mockups, logos y cualquier imagen con bordes nítidos o texto — lossy genera artefactos feos alrededor de los bordes.

¿Lossy o lossless: qué compresión usar para imágenes web?

Usa lossy (JPG, WebP, AVIF) para fotografías — el ojo humano apenas nota diferencia a calidad 80–85 y los archivos son 5–20× más pequeños. Usa lossless (PNG, WebP-lossless) para capturas, mockups, logos y cualquier imagen con bordes nítidos o texto — lossy genera artefactos feos alrededor de los bordes.

Formato APNG: Imágenes PNG Animadas

APNG: Guía Completa del Formato PNG Animado

El GIF dominó la animación web durante 30 años a pesar de sus limitaciones significativas: solo 256 colores, compresión deficiente, sin transparencia parcial. En 2004, Stuart Parmenter y Vladimir Vukicevic de Mozilla crearon APNG (Animated Portable Network Graphics) como una extensión compatible con versiones anteriores del formato PNG, resolviendo estos problemas manteniendo total compatibilidad con visores PNG.

¿Qué es APNG?

APNG es una extensión del formato PNG que añade soporte de animación. Un archivo APNG:

Usa la extensión .apng o .png (la extensión PNG es común por compatibilidad)
Contiene una secuencia de fotogramas PNG con información de temporización
Muestra el primer fotograma como imagen estática en visores que no soportan APNG (compatible con versiones anteriores)
Admite color de 24 bits completo (16,7 millones de colores) — sin límite de paleta de 256 colores como GIF
Admite transparencia alfa completa (píxeles semitransparentes)

APNG vs GIF vs WebP Animado

Característica	GIF	APNG	WebP Animado
Colores máximos	256 (paleta 8 bits)	16,7 millones (24 bits)	16,7 millones
Transparencia alfa	1 bit (activado/desactivado)	Alfa completo de 8 bits	Alfa completo de 8 bits
Compresión sin pérdida	Sí	Sí	Sí
Compresión con pérdida	No	No	Sí
Compatibilidad con navegadores	Universal	97%+	97%+
Sin patentes	Desde 2004	Sí	Sí

Compatibilidad con Navegadores y Plataformas

Plataforma	Soporte APNG
Firefox	Desde la versión 3 (2007)
Safari / iOS Safari	Desde la versión 8 (2014)
Chrome	Desde la versión 59 (2017)
Edge	Desde la versión 18 (2018)
WhatsApp, iMessage	✅ (stickers usan APNG)
Discord	✅
Telegram	✅

APNG es particularmente dominante en el espacio de emoji y stickers:

Los emoji animados de Apple en iOS/macOS usan APNG
Los paquetes de stickers de iMessage usan APNG
Muchos stickers de Discord y Telegram son APNG

Crear Archivos APNG

Con APNGASM (Línea de Comandos)

# Instalar (macOS con Homebrew)
brew install apngasm

# Crear APNG a partir de archivos PNG numerados
apngasm salida.apng fotograma01.png fotograma02.png fotograma03.png -d 100 -l 0
# -d 100: 100ms de retraso por fotograma (10 fps)
# -l 0: bucle infinito

Con GIMP

Archivo → Exportar como → establece el nombre de archivo como .apng
En el cuadro de diálogo de exportación, selecciona "Guardar como animación"
Cada capa de GIMP se convierte en un fotograma de animación

Con FFmpeg

# Dividir vídeo en fotogramas PNG
ffmpeg -i entrada.mp4 -vf fps=10 fotograma%04d.png

# Crear APNG a partir de fotogramas PNG
ffmpeg -framerate 10 -i fotograma%04d.png salida.apng

Convertir APNG a Otros Formatos

APNG → GIF

# Usando ImageMagick
magick entrada.apng salida.gif

Advertencia: la conversión a GIF reduce la profundidad de color a 256 colores.

APNG → WebP (Animado)

# Usando ffmpeg
ffmpeg -i entrada.apng -c:v libwebp -loop 0 -lossless 1 salida.webp

GIF → APNG

# Usando ffmpeg
ffmpeg -i entrada.gif salida.apng

Optimizar el Tamaño de Archivo APNG

Optimiza los fotogramas individuales con pngquant o pngcrush antes de ensamblarlos
Usa fotogramas delta: almacena solo los píxeles cambiados entre fotogramas
Reduce el número de fotogramas: 10 fps suele ser indistinguible de 24 fps para animaciones en bucle
Considera WebP animado en su lugar: la animación WebP con pérdida puede ser un 60-80% más pequeña que APNG con una pérdida de calidad apenas visible

APNG llena el nicho exacto entre GIF (universal pero baja calidad) y formatos de vídeo (alta calidad pero pesados) — perfecto para emoji, stickers, animaciones de logotipos y animaciones decorativas cortas que necesitan color completo y transparencia alfa sin la sobrecarga de los códecs de vídeo.

Conversiones relacionadas

Lo más habitual al trabajar con imágenes son estas direcciones de conversión:

Preguntas frecuentes

APNG admite 16,7 millones de colores (color verdadero de 24 bits) mientras que GIF está limitado a 256 colores (paleta de 8 bits). APNG admite transparencia alfa completa de 8 bits (píxeles semitransparentes) mientras que GIF solo tiene transparencia binaria (totalmente transparente o totalmente opaco). APNG generalmente logra tamaños de archivo más pequeños que GIF para una calidad de animación equivalente. Para nuevas animaciones web, APNG es la mejor opción; GIF se mantiene para máxima compatibilidad con plataformas antiguas.

Usa <strong>lossy</strong> (JPG, WebP, AVIF) para fotografías — el ojo humano apenas nota diferencia a calidad 80–85 y los archivos son 5–20× más pequeños. Usa <strong>lossless</strong> (PNG, WebP-lossless) para capturas, mockups, logos y cualquier imagen con bordes nítidos o texto — lossy genera artefactos feos alrededor de los bordes.

Varias herramientas gratuitas crean APNG: ezgif.com (online, gratuito — sube fotogramas o convierte GIF a APNG), GIMP (Archivo → Exportar como → .apng), apngasm (línea de comandos, la herramienta de referencia: `apngasm salida.apng fotograma01.png fotograma02.png -d 100 -l 0`). Para vídeo a APNG: `ffmpeg -i entrada.mp4 -vf fps=10 salida.apng`.

Para proyectos nuevos en 2026, WebP es soportado por todos los navegadores modernos (95%+ del tráfico) y ahorra 25–35% sobre JPG a misma calidad visual. AVIF es aún más eficiente (40–50% menos) pero la codificación es más lenta y el soporte en Safari es reciente. Usa WebP por defecto y AVIF como mejora progresiva con <code><picture></code> y fallback JPG.

APNG tiene un soporte del 97%+ en los navegadores a partir de 2025. Firefox lo soporta desde la versión 3 (2007), Safari desde la versión 8 (2014), Chrome desde la versión 59 (2017) y Edge desde la versión 18 (2018). La única excepción importante es Internet Explorer, que prácticamente está muerto. Si un navegador no soporta APNG, muestra el primer fotograma como PNG estático — por lo que APNG degrada de forma elegante.

Depende de la herramienta: ImageMagick y FFmpeg copian EXIF por defecto; cwebp los descarta a menos que pases <code>-metadata all</code>. KaijuConverter elimina los metadatos en servidor tras la conversión para proteger tu privacidad — si necesitas mantener datos de cámara o GPS, usa una herramienta de escritorio bajo tu control.

WebP animado es más pequeño: la animación WebP con pérdida es típicamente un 60-80% más pequeña que APNG con una pérdida de calidad apenas perceptible. APNG es mejor para: casos que requieren calidad sin pérdida (animaciones perfectas a nivel de píxel, logotipos), emoji y stickers (las plataformas esperan APNG), y situaciones donde necesitas compatibilidad total con PNG. Para animaciones web generales donde el tamaño del archivo importa más que la calidad perfecta a nivel de píxel, usa WebP animado. Para emoji, stickers y animaciones críticas de calidad, usa APNG.

Tres causas habituales: (1) los perfiles ICC perdidos durante la conversión desplazan ligeramente los colores; (2) el chroma subsampling (4:2:0) reduce precisión de color en JPG/WebP lossy; (3) el formato destino puede no soportar funciones del original (p.ej. PNG → JPG pierde la transparencia, queda fondo blanco). Para resultados pixel-perfect usa formatos lossless y preserva el perfil de color explícitamente.