Comparación de formatos de imagen animada - GIF, APNG, WebP y AVIF

Visión general de los formatos de imagen animada

Para mostrar en la web animaciones cortas que se reproducen en bucle, existen dos métodos: usar archivos de video (MP4, WebM) o usar formatos de imagen animada. Los formatos de imagen animada se pueden incrustar con la etiqueta <img>, por lo que su implementación es sencilla, y tienen la ventaja de que la reproducción automática / en bucle está garantizada como comportamiento predeterminado.

Casos en los que conviene una imagen animada:

• Microinteracciones de la interfaz (indicadores de carga, respuesta visual de los botones)
• Demostraciones cortas (explicación de pasos de uso, Before/After)
• GIF de reacción, stickers y emojis animados
• Anuncios de banner y materiales promocionales
• Explicaciones de uso en documentación técnica

Casos en los que conviene un video:

• Contenido de larga duración (de varias decenas de segundos o más)
• Cuando se necesita audio
• Cuando se necesitan controles de reproducción (pausa, búsqueda)
• Cuando se exige alta resolución / alta tasa de fotogramas

Los principales formatos de imagen animada disponibles hoy son 4: GIF, APNG, Animated WebP y Animated AVIF. Cada uno se desarrolló en una época distinta y con un propósito distinto, y difieren mucho en calidad de imagen, tamaño de archivo y compatibilidad con los navegadores.

GIF - El formato de animación más extendido

GIF (Graphics Interchange Format) es un formato de imagen que desarrolló CompuServe en 1987, y la función de animación se añadió con la especificación GIF89a de 1989. Con más de 30 años de historia, es prácticamente sinónimo de "imagen animada".

Especificaciones técnicas:

• Número de colores: hasta 256 colores (color indexado de 8 bits). Se puede usar una paleta distinta en cada fotograma
• Compresión: compresión sin pérdida LZW (Lempel-Ziv-Welch)
• Transparencia: se puede designar 1 color como color transparente (no admite semitransparencia, solo transparencia total)
• Control de fotogramas: se puede indicar el tiempo de visualización de cada fotograma (en unidades de 1/100 de segundo) y el número de repeticiones del bucle
• Técnicas de optimización: diferencias entre fotogramas (solo se actualiza la parte que cambió) y tablas de color locales

Ventajas de GIF:

• Se puede mostrar en todos los navegadores, todos los dispositivos y todas las apps de mensajería. Su compatibilidad es la más alta
• Es fácil compartirlo en redes sociales y apps de chat (la función "enviar GIF" viene integrada de serie)
• Hay muchas herramientas de creación, y se puede crear sin conocimientos técnicos

Desventajas de GIF:

• Por el límite de 256 colores, la representación de fotos y degradados es notablemente peor (aparece banding)
• El tamaño de archivo es muy grande. De 5 a 20 veces más que un video (MP4) de calidad equivalente
• No admite semitransparencia (canal alfa)
• La eficiencia de compresión es baja y no es adecuado para animaciones a todo color

APNG - La extensión animada de PNG

APNG (Animated Portable Network Graphics) es una especificación de extensión que añade la función de animación al formato PNG. Mozilla la propuso en 2004, y en 2017 pasó a ser compatible con todos los navegadores principales.

Especificaciones técnicas:

• Número de colores: color completo (RGB de 24 bits + alfa de 8 bits = RGBA de 32 bits)
• Compresión: DEFLATE (la misma compresión sin pérdida que PNG)
• Transparencia: compatibilidad completa con canal alfa (semitransparencia de 256 niveles)
• Compatibilidad con versiones anteriores: en los entornos que no admiten APNG, el primer fotograma se muestra como imagen fija PNG
• Control de fotogramas: se pueden controlar con detalle el tiempo de visualización, el modo de fusión y el modo de descarte de cada fotograma

Ventajas de APNG:

• Elimina por completo el límite de 256 colores de GIF. Permite animaciones a todo color y con semitransparencia
• Como usa la misma compresión sin pérdida que PNG, los bordes quedan nítidos en animaciones de texto y logotipos
• Degradación elegante: se muestra como imagen fija incluso en entornos no compatibles
• Compatibilidad con navegadores: Chrome, Firefox, Safari y Edge lo admiten todos (en 2026)

Desventajas de APNG:

• Como la compresión es sin pérdida, en animaciones basadas en fotos el tamaño de archivo se vuelve enorme
• Hay menos herramientas de creación que para GIF
• Su compatibilidad en redes sociales y apps de mensajería no está tan extendida como la de GIF
• Como no tiene compresión entre fotogramas (compresión en la dirección del tiempo, como la de los códecs de video), su eficiencia es baja

APNG, como "versión superior compatible de GIF", es ideal para usos en los que importan la transparencia y la precisión del color, como animaciones de logotipos, indicadores de carga de la interfaz y stickers.

Animated WebP - La animación de próxima generación de Google

Animated WebP es la función de animación del formato WebP desarrollado por Google. Aprovecha la tecnología del códec de video VP8 y logra una gran reducción del tamaño de archivo frente a GIF.

Especificaciones técnicas:

• Número de colores: color completo (RGB de 24 bits + alfa de 8 bits)
• Compresión: aprovecha la predicción entre fotogramas de VP8 (con pérdida) o VP8L (sin pérdida)
• Transparencia: compatibilidad completa con canal alfa
• Compresión entre fotogramas: compresión eficiente que codifica solo las diferencias con el fotograma anterior
• Metadatos: admite incrustar EXIF, XMP y perfiles ICC

Ventajas de Animated WebP:

• Un tamaño de archivo un 64% menor que GIF (benchmark oficial de Google)
• Admite color completo + semitransparencia, lo que elimina el límite de colores de GIF
• En el modo de compresión con pérdida, el tamaño de archivo es práctico incluso en animaciones basadas en fotos
• Compatibilidad con navegadores: compatible con todos los navegadores modernos (Chrome, Firefox, Safari, Edge)
• Gracias a la predicción entre fotogramas, la eficiencia de compresión es especialmente alta en animaciones con poco movimiento

Desventajas de Animated WebP:

• La velocidad de codificación es más lenta que la de GIF
• Algunos programas de edición de imágenes no permiten editar Animated WebP
• Su compatibilidad en las plataformas de redes sociales no está tan extendida como la de GIF (X lo admite, LINE no lo admite, etc.)
• En el modo sin pérdida, la ventaja en tasa de compresión frente a APNG puede ser pequeña

Para mostrar animaciones en sitios web, Animated WebP es por ahora la opción más equilibrada. Demuestra su fuerza en las situaciones en las que se exige compaginar tamaño de archivo y calidad de imagen.

Animated AVIF - El formato de alta eficiencia más reciente

Animated AVIF es la función de animación del formato AVIF, basado en el códec de video AV1. Su compatibilidad con los navegadores avanzó a partir de 2020, y presume de la mayor eficiencia de compresión.

Especificaciones técnicas:

• Número de colores: profundidad de color de hasta 12 bits, compatibilidad con HDR y gama de colores amplia (BT.2020)
• Compresión: predicción entre fotogramas + compresión intrafotograma mediante el códec AV1
• Transparencia: compatibilidad completa con canal alfa
• Funciones avanzadas: síntesis de grano de película y escalabilidad espacial
• Contenedor: basado en HEIF (High Efficiency Image File Format)

Ventajas de Animated AVIF:

• La mayor eficiencia de compresión de todos los formatos. En algunos casos permite reducir el tamaño más de un 90% frente a GIF
• La calidad de imagen con tasas de bits bajas es especialmente buena. Hay pocos artefactos con compresión alta
• Gracias a la compatibilidad con HDR y gama de colores amplia, también admite las tecnologías de pantalla futuras
• Gracias a la avanzada predicción entre fotogramas del códec AV1, es eficiente incluso en animaciones con mucho movimiento

Desventajas de Animated AVIF:

• La velocidad de codificación es muy lenta (de varias veces a varias decenas de veces la de WebP)
• La carga de decodificación es alta, y en dispositivos de bajas prestaciones la reproducción puede ir a tirones
• Compatibilidad con navegadores: Chrome 93+, Firefox 93+, Safari 16.1+ (IE y las versiones antiguas de Safari no lo admiten)
• Las herramientas de creación son limitadas. Lo principal es trabajar por línea de comandos con avifenc o ffmpeg
• Existen implementaciones con límites en la resolución máxima o en el número de fotogramas

Animated AVIF es ideal para las situaciones en las que "se necesita la máxima eficiencia de compresión y se puede tolerar el tiempo de codificación". Teniendo en cuenta la compatibilidad con los navegadores, lo realista es usarlo combinado con un respaldo en WebP.

Criterios para elegir el formato y patrones de implementación

A partir de las características de los 4 formatos, explicamos la elección óptima según el uso y patrones reales de implementación web.

Formato recomendado por uso:

• Compartir en redes sociales / chat: GIF (la compatibilidad es lo primero; se cede en tamaño de archivo)
• Animaciones de la interfaz de un sitio web: Animated WebP (el mejor equilibrio) + respaldo en GIF
• Animaciones de logotipos / iconos: APNG (transparencia + bordes nítidos)
• Demos / promociones de alta calidad: Animated AVIF (la máxima calidad de imagen) + respaldo en WebP
• Animaciones dentro de correos electrónicos: GIF (en muchos casos los clientes de correo solo admiten GIF)

Implementación de respaldo con el elemento picture:

<picture>
 <source srcset="animation.avif" type="image/avif">
 <source srcset="animation.webp" type="image/webp">
 <img src="animation.gif" alt="Demostración de uso" loading="lazy">
</picture>

Con esta implementación, los navegadores compatibles con AVIF muestran el AVIF de máxima eficiencia, los navegadores compatibles con WebP muestran el WebP y los demás muestran el GIF.

Herramientas de conversión:

• ffmpeg: ffmpeg -i input.gif -c:v libwebp -loop 0 output.webp (GIF → WebP)
• gif2apng: herramienta específica para convertir de GIF a APNG
• sharp (Node.js): admite la generación de Animated WebP

Consideraciones de rendimiento:

• A las imágenes animadas ponles siempre loading="lazy" para que no se carguen fuera del viewport
• Para las animaciones grandes, plantéate sustituirlas por la etiqueta <video> + MP4 (cuando el tamaño de archivo supera 1MB)
• También es importante tener la consideración de mostrar una imagen fija a los usuarios que han activado la reducción de movimiento, con la media query prefers-reduced-motion