Clicky

Conversión de GIF animado a vídeo mp4 con FFmpeg

Conversión de GIF animado a vídeo mp4 con FFmpeg

Optimización de GIF animados en más de un 90% con la conversión a Vídeo HTML5

El problema no es encontrar formas de optimizar unos 3, 4 o 5 MB de un clip de vídeo GIF animado. El problema son los 3, 4 o 5 MB del GIF animado! En este artículo os mostraremos la optimización que Twitter, Facebook y otros ya saben, que les permite entregar sus vídeo GIFs un 95% más pequeños mediante la conversión a vídeo HTML5.

Vídeo GIF animados: un terrible hackeo de conveniencia

Los GIF animados nunca fueron diseñados para almacenar vídeo. De hecho, los GIFs no fueron realmente diseñados para la animación. He aquí una cita de la especificación GIF89a real:

El Graphics Interchange Format no pretende ser una plataforma para la animación, a pesar de que se puede hacer de una manera limitada.

De hecho, GIF fue diseñado para contener múltiples imágenes dentro de un solo archivo como una manera de reducir la sobrecarga mediante la combinación de la información redundante como cabeceras comunes o datos de color de cada imagen. Piensa en algo más parecido a "un archivo ZIP de imágenes" en lugar de un formato de animación. No fue sino hasta 6 años después de que se inventaron los GIFs que Netscape 2.0 añadió una extensión de aplicación, permitiendo los GIFs animados como los conocemos.

Por desgracia, todo esto significa que los GIFs animados son quizás el peor formato posible para archivos de vídeo. Tenemos décadas de investigación sobre cómo comprimir vídeo digital, y se han producido enormes avances como submuestreo de croma, transformación discreta de coseno, o compensación de movimiento. A diferencia de los archivos de vídeo real, GIF no utiliza ninguna de estas técnicas, es decir, unos segundos de contenido puede ser megabytes de tamaño. Gran tamaño, velocidades lentas, y otras limitaciones de GIF, como una paleta de 256 colores, significan que hay un montón de problemas de rendimiento utilizando GIFs para videoclips.

A pesar de que los GIFs animados son enormes, lentos y no se ven tan bien como el vídeo tradicional, todavía hay varios beneficios:

•  Soporte universal para la reproducción de archivos GIF animados en todas las plataformas.
•  No hay patentes o licencias, preocupaciones que se aplican a los códecs de vídeo comunes.
•  Herramientas para crear GIFs sencillas y ampliamente disponibles.

Estas ventajas superan a lo negativo lo suficiente para desarrollar una cultura a alrededor de la creación y el intercambio de divertidos GIFs animados. Pero ¿y si hubiera otra cosa que se desempeñase en todas partes, no tuviese preocupaciones de licencia, fácil de crear, súper rápida y mucho más pequeña que los archivos GIF? Por suerte algo existe, y que es el vídeo HTML5.

Vídeo HTML5 y la estandarización en MP4

Vídeo HTML5 es un término general para definir la capacidad de los navegadores para reproducir contenido de vídeo a través de la etiqueta <video> sin necesidad de utilizar plug-ins como Flash.

Cuando en 2009 se estandarizó por primera vez el vídeo HTML5, se produjo una gran confusión y lucha sobre qué formatos de vídeo debían ser almacenados y cómo codificarlos. Había algunas preocupaciones sobre patentes que cubrían diversas formas de comprimir vídeos, así como lo que, en su caso, podrían aparecer costos de licencias. La mayor parte de esto fue sólo un argumento de proxy para las disputas filosóficas y comerciales más profundas entre los fabricantes de navegadores, algo así como cuando dos personas están teniendo una discusión sobre la limpieza de la cocina cuando en realidad están discutiendo sobre algo más. Como resultado, durante los primeros años varias cosas fueron caóticas con diferentes navegadores soportando diferentes tipos de vídeo, lo que obligó a los creadores de contenidos a hacer mucho trabajo haciendo varias versiones de los vídeos y haciendo trucos extraños con HTML para evitar errores y asegurarse de que los navegadores mostraran los formatos de vídeo adecuados.

Afortunadamente todo eso está en el pasado. Por una variedad de razones, el vídeo codificado en H.264 que se almacena en un archivo contenedor MP4 (que para este artículo simplemente voy a llamar vídeo MP4) emergió como el ganador. Los navegadores dejaron de discutir y todos adoptaron soporte para vídeo MP4. Se resolvieron las preocupaciones legales y licencias. Como resultado, hoy más del 90% de los navegadores de escritorio admite vídeo MP4, como se muestra a continuación: Para los modernos dispositivos móviles, el soporte está cercano al 100%.

soporte MP4 en navegadores

Vídeo MP4 en lugar de GIFs

Dado que los vídeos MP4 son archivos de vídeo digitales reales, en lugar de un videoclip GIF animado, se ven mucho mejor y son sustancialmente más pequeños. ¿Cuánto más pequeños?

StarWars GIF sin optimizar

Este GIF de arriba tiene 3,081 MB de tamaño. Es un tamaño enorme para lo que equivale a sólo un segundo o dos de vídeo. Aquí, he convertido ese GIF a un vídeo MP4:

Este archivo MP4 sólo tiene 415 KB! Eso es un 80% más pequeño que el GIF animado! ¡Eso es increíble! Nuestra investigación ha encontrado que los GIF animados son generalmente de 5 a 10 veces más grandes que un vídeo MP4 debidamente codificado. Esta diferencia significa que los GIF no sólo están perdiendo grandes cantidades de ancho de banda, sino que se cargan más lentamente y crean una mala experiencia del usuario.

De hecho, la conversión de archivos GIF animados a vídeo MP4 es una optimización tan impresionante que es exactamente lo que hacen los sitios como Twitter, Facebook y Imgur al no cargar un archivo GIF animado. En silencio lo convierten en un vídeo MP4 y lo muestran en su lugar. (Leer más: aquí y aquí).

Conversión de archivos GIF animados a MP4 

Los videos MP4 tienen apoyo casi universal. Son más pequeños y mejor que los GIF animados desde una perspectiva de rendimiento. Pero ¿es fácil crear y compartir vídeos MP4 en línea? Afortunadamente la respuesta es muy fácil!

Podemos usar FFmpeg, una herramienta gratuita de código abierto desde la línea de comandos que convierte un GIF animado en un vídeo MP4. Asegúrate de descargar un paquete pre-construido a menos que seas lo suficientemente experimentado para construirlo desde la fuente.

Para instalar FFmpeg en CentOS desde Virtualmin sigue este artículo: Install FFMPEG and FFMPEG-PHP in CentOS 6 with Virtualmin.

En el siguiente ejemplo se utiliza FFmpeg para convertir el archivo animated.gif en un vídeo MP4 llamado video.mp4.

ffmpeg -i animated.gif -movflags faststart -pix_fmt yuv420p -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" video.mp4

Sé que parece intimidante, pero no te preocupes. Esas opciones adicionales asegurarán que tenemos un bonito y rápido archivo de vídeo compatible que podemos poner en cualquier lugar. Esto es lo que hacen:

•  movflags - Esta opción optimiza la estructura del archivo MP4 por lo que el navegador pueda cargar lo más rápido posible.
•  pix_fmt - Los vídeos MP4 almacenan los píxeles en diferentes formatos. Incluimos esta opción para especificar un formato específico que tiene la máxima compatibilidad con todos los navegadores. (Esto es en realidad el submuestreo de croma que hemos mencionado anteriormente).
•  vf - Los videos MP4 utilizando H.264 necesitan tener una dimensiones que son divisibles por 2. Esta opción garantiza que es el caso. No te preocupes, todavía podemos ver el vídeo en cualquier dimensión que desees.

Ahora que tenemos un archivo de vídeo en lugar de una imagen, hay que cambiar nuestro marcado HTML. Nuestro marco original para incluir un GIF animado se veía así:

<img height="300" src="/video.gif" width="400" />

Para utilizar nuestro nuevo vídeo, tenemos que reemplazarlo que con esto:

<video width=400 height=300 autoplay loop>
<source src="/video.mp4" type="video/mp4">
<img src="/video.gif" width="400" height="300">
</video>

Esto iniciará automáticamente el vídeo y el bucle, sin mostrar ningún tipo de control de vídeo. Esto dará la misma experiencia que el GIF animado pero es más rápido y más pequeño. Ten en cuenta que todavía tenemos un <img> señalando el GIF animado original dentro de la etiqueta <video>. De esta manera, en el improbable caso de que el navegador de un visitante no soporte videos MP4, todavía se mostrará el GIF animado y la experiencia del usuario mejorará en el contenido.

Conclusiones

Hemos visto que los GIFs animados eran históricamente la forma más fácil y más compatible para compartir videos cortos en la web. Sin embargo los GIFs son un terrible tecnología para el almacenamiento de vídeo y crean una experiencia del usuario lenta. El vídeo HTML5, aunque inicialmente un lío de política y luchas internas, ha madurado y el soporte se ha unido en torno a vídeo MP4. Con el fragmento de HTML anterior, puedes convertir archivos GIF a vídeo MP4, ahorroandode más del 95%, y aún así conseguir que todos los usuarios vean el contenido del vídeo.

Si tienes un montón de GIFs animados en tu sitio debes considerar su optimización mediante la conversión a vídeo MP4. Puedes hacer esto con FFmpeg como se mencionó anteriormente, o en diversos sitios que pueden convertir GIF a MP4 para ti. Te recomiendo lo informes en tu CMS, para que cuando un usuario suba un archivo GIF animado, convierta el archivo. En futuras entradas del blog voy a explorar maneras de automatizar esto.

También te puede interesar: Fondo de página con vídeo HTML5 a pantalla completa

Jesus_Caceres