GIF, MP4 o WebM: el mismo clip en cada formato

El GIF es de 1987. Se diseñó para gráficos sencillos en módems lentos, ganó la animación dos años después y sigue siendo la forma en que la mayoría de la gente comparte un bucle corto. Para ver cuánto cuesta eso, convertimos dos clips de 10 segundos en GIF, MP4 y WebM al mismo tamaño y comparamos los archivos.

La prueba

Creamos dos clips, cada uno de 10 segundos de video Full HD a 30 fotogramas por segundo, dibujados por código para poder volver a dibujar después cada fotograma original y comparar:

• Un clip de cámara: un paneo lento sobre la foto de un lago de montaña, con un poco de grano añadido, como las imágenes de un teléfono.
• Una grabación de pantalla: la ventana de una app con texto que se escribe, un gráfico que crece y un puntero de ratón que se mueve.

Cada uno se convirtió a 480 × 270, un tamaño típico de GIF, con los mismos codificadores que nuestras herramientas: el conversor de video a GIF con sus valores por defecto de 12 fotogramas por segundo y 128 colores (y una vez a 24 fotogramas por segundo), y el conversor de video para MP4 con H.264 y WebM con VP9, ambos a 231 kilobits por segundo. Después comparamos ocho fotogramas de cada archivo con los fotogramas originales usando SSIM, una puntuación de cuánto se parecen dos imágenes, donde 1 significa idénticas.

Resultados

En el clip de cámara la diferencia es enorme. El GIF pesó 16 veces más que el MP4, mostró menos de la mitad de los fotogramas y aun así puntuó más bajo. Duplicar su cadencia a 24 duplicó el archivo hasta 10,5 MB, más de 30 veces el MP4, y no mejoró la imagen.

La grabación de pantalla es más amable con el GIF, ya que los colores planos y el texto nítido encajan con su límite de 256 colores. Puntuó 0,988, cerca de los videos, pero el archivo aún pesó casi 5 veces más que el MP4.

Cómo se ve la diferencia

GIF, 5,3 MBMP4, 336 KB

El GIF solo puede usar 256 colores por fotograma, y nuestro conversor usa 128 salvo que pidas más. Una foto tiene cientos de miles, así que el codificador elige una paleta para cada fotograma y sustituye cada píxel por el color más cercano de ella. Las zonas suaves como el agua se rompen en bandas, el grano fino de las imágenes se convierte en motas duras y, como cada fotograma recibe su propia paleta, las zonas quietas parpadean un poco.

Por qué el GIF pesa tanto más

La razón principal es que un GIF guarda cada fotograma como una imagen propia. Comprime cada uno sin pérdida, pero no tiene forma de decir «este fotograma es el anterior, movido un poco a la izquierda». Algunas herramientas de GIF guardan solo la parte de cada fotograma que cambió, lo que ayuda en grabaciones de pantalla con fondo fijo, pero cualquier movimiento de cámara cambia cada píxel.

Los códecs de video se basan en esa idea. H.264 y VP9 predicen cada fotograma a partir de los anteriores, guardan solo lo que la predicción no acertó y descartan el detalle que el ojo no echará de menos. Por eso 30 fotogramas por segundo de video pesan menos que 12 fotogramas por segundo de GIF.

¿MP4 o WebM?

Con la misma tasa de bits, VP9 en un archivo WebM pesó un 13 % menos que H.264 en un MP4 con el clip de cámara, con una puntuación algo más alta. En la grabación de pantalla fue al revés: el codificador H.264 usó menos de su presupuesto en las partes quietas y salió más ligero, ambos con una calidad casi perfecta. La diferencia más grande es la compatibilidad:

• MP4 con H.264 se reproduce en todas partes: todos los navegadores, teléfonos, televisores, apps de mensajería y editores de video. Es la opción segura por defecto.
• WebM con VP9 se reproduce en todos los navegadores actuales y es común en la web, pero algunas apps y dispositivos Apple antiguos lo manejan mal.

Para una página que tú controlas, WebM es una buena opción. Para todo lo que envías a otras personas, usa MP4.

Cuándo sigue teniendo sentido un GIF

• El correo. La mayoría de las apps de correo muestran GIF y no reproducen video. Un GIF corto y pequeño sigue siendo la forma de poner movimiento en un boletín.
• Lugares que solo aceptan imágenes, como algunos foros, herramientas de chat y sistemas de documentación.
• Bucles diminutos con pocos colores: un indicador de carga, una captura corta de un botón, un sticker.

Muchos sitios que muestran «GIF», incluidos los grandes buscadores de GIF y las redes sociales, en realidad los entregan como video por detrás, justamente por las razones anteriores. En tu propia página web puedes hacer lo mismo: un elemento de video con autoplay, muted, loop y playsinline se comporta como un GIF, se reproduce en los teléfonos y cuesta una fracción de los datos.

<video src="loop.mp4" autoplay muted loop playsinline></video>

Si de todos modos haces un GIF

• Que sea corto. El peso crece con cada fotograma. De dos a cuatro segundos suelen bastar para un bucle.
• Que sea pequeño. 480 píxeles de ancho sobran para la mayoría de los usos; cada vez que duplicas el ancho, el peso se multiplica más o menos por cuatro.
• Usa de 10 a 15 fotogramas por segundo. Más fotogramas cuestan más de lo que aportan.
• Evita las imágenes de cámara cuando puedas. Las grabaciones de pantalla y las animaciones se comprimen mucho mejor.

El conversor de video a GIF te deja elegir la parte del video, el ancho, la cadencia y el número de colores, y muestra el número de fotogramas previsto antes de empezar. Para convertir en cambio un clip tipo GIF en un video mucho más ligero, usa el conversor de video. Ambos funcionan en tu navegador.