Seamos realistas: los GIF son un vestigio del pasado. Nacieron en los años oscuros de la prehistoria de Internet (siglo pasado) cuando reproducir vídeo en un navegador no era más que un sueño. Este formato permite únicamente secuencias de imágenes de 256 colores, con muy poca calidad. Pero este no es su mayor problema. El verdadero handicap que presentan es que ocupan un montón. Vete por ejemplo a Giphy y elige un GIF animado cualquiera que tenga imágenes reales. Si miras su información, verás que ocupan una barbaridad:
En el ejemplo del vídeo anterior, a pesar de ser tan aparentemente simple, con fondo neutro y todo, la animación ocupa casi 4MB.
Lo increíble es que este formato vuelve a estar de moda. De hecho, está más presente que nunca y vemos GIFs animados en casi todas partes: Twitter, programas móviles de mensajería, aplicaciones de chat... Se han convertido casi en un lenguaje de comunicación propio.
Sin embargo no todo lo que se llama GIF es un GIF en realidad.
Por ejemplo, en Giphy las animaciones que se muestran son realmente vídeos aunque en origen se tratase de un gráfico en formato .gif. Y si subes un GIF animado a Twitter verás que la aplicación lo convierte en MP4 por detrás y es lo que se usa. ¿Por qué? Pues porque el ancho de banda cuesta dinero y usar esas atrocidades directamente sería gastar mucho más. Además, para los usuarios no es lo mismo tampoco descargar un archivo de varios megas que uno mucho más pequeño. Cuanto más pequeño, antes descarga y mejor parece funcionar la página. Finalmente, el reproducir un GIF es más costoso para el navegador que reproducir el vídeo equivalente, que consume menos CPU y, en algunos casos, puede incuso hacer uso directo de la GPU para decodificar vídeo MP4.
En definitiva: usar GIFs directamente no se justifica más que en algunos pocos casos.
¿En qué casos? Pues por ejemplo si las animaciones representan acciones cortas en una pantalla. Sin ir más lejos, yo mismo cuando tengo que mostrar algo rápido (unos pocos segundos) en algún programa, grabando mi pantalla, utilizo el formato GIF, optimizándolo. El motivo es que las interfaces de la mayor parte de los programas de ordenador usan muy pocos colores (por regla general llega con 16) y además usan bordes muy bien definidos: justo lo que va bien con GIF y mal con vídeo muy comprimido. Si usas el programa adecuado en muchos casos puede ser más efectivo el GIF que un vídeo. Pero en la mayor parte de los casos, no será así. El mejor programa que conozco es para Windows y se llama ScreenToGif. Graba genial, te deja editar y optimiza las animaciones mucho. Y encima es gratis, pero ¡no dejes de donarles si lo usas mucho!
¿Cómo sustituir GIFs con vídeos de la manera óptima?
En la mayor parte de los casos, como digo, es más recomendable utilizar un vídeo que un GIF, ya que ocupará mucho menos. Pero la gracia de los GIF es que se reproducen automáticamente y entran en bucle, cosa que, por defecto, los vídeos no hacen ¿cierto?
La buena noticia es que es muy fácil emular este comportamiento con un vídeo en HTML5. Vamos a verlo.
1.- Convertir el GIF a vídeo MP4
Lo primero es obtener una versión en vídeo del GIF original.
Si es una animación de Giphy es algo directo, ya que en el apartado "Media" te ofrece directamente el enlace directo al vídeo:
En el caso del vídeo de la chica danzarina del ejemplo, el MP4 de la animación ocupa tan solo 334KB. Esto es un orden de magnitud menos que el GIF original. Será el que utilicemos.
En caso de que tengas acceso al archivo .gif original y necesites convertirlo a .mp4 tienes varias opciones. El programa Screen2Gif que mencioné arriba tiene esta capacidad pero necesitarás instalar la biblioteca ffmpeg, que entre otras cosas instala los drivers necesarios para hacer esta conversión. De hecho puedes usar directamente ffmpeg para hacer la conversión en cualquier plataforma (Windows, Mac o Linux) ya que funciona en todas ellas. Tan solo has de lanzar este comando desde un terminal:
ffmpeg -i miAnimacion.gif miAnimacion.mp4
Esta es la conversión básica, pero ffmpeg tiene cantidad de parámetros que puedes configurar, así que si quieres investigar en la documentación puedes hacer que comprima mucho más todavía que lo que lo hace por defecto, y dependiendo del vídeo le irán mejor unos parámetros u otros.
Yo, de todos modos, para no complicarme la vida muchas veces suelo utilizar el servicio online de conversión de archivos CloudConvert, que es capaz de convertir casi cualquier cosa que le eches, y además tiene una capa gratuita generosa que para conversiones esporádicas te saldrá gratis (si haces conversiones más a menudo es muy barato y funciona genial: totalmente recomendado).
El formato MP4-H264 está soportado por todos los navegadores del mercado. En ese enlace te explica cómo funciona y qué capacidades tiene.
Existen otros formatos más modernos, como WebM, auspiciado por Google que comprime aún un poco más que MP4 y está soportado por los principales navegadores (Chrome, Opera y Firefox), pero que todavía puede darte problemas con navegadores más antiguos o con Safari, que en Mac necesita usar Quicktime con un plugin para darle soporte. Hoy por hoy puede ser una segunda fuente de vídeo tras la principal en MP4, pero yo no me casaría con él del todo, utilizando MP4 como formato universal.
2.- Incluir el vídeo en la página de la manera adecuada
Para que nuestro vídeo sea totalmente equivalente a un GIF convencional tiene que cumplir tres cosas:
- Debe reproducirse automáticamente en cuanto cargue la página
- Debe reproducirse de forma continua, en bucle
- No se puede parar ni controlar, ni tampoco poner a pantalla completa.
En realidad hay una cuarta condición, pero que es consecuencia de la primera: no puede reproducir audio. Y digo que es consecuencia de la primera porque para que un vídeo pueda reproducirse de manera automática los navegadores modernos obligan a que sea de manera silenciosa, para no molestar a los usuarios. Por ello para que se cumpla la primera condición el vídeo debe estar mudo. Esto no es un problema ya que los GIF no soportan audio, así que en cualquier caso si queremos simularlo no deben tener sonidos.
Para conseguir esto con una etiqueta <video> de HTML5 lo único que tenemos que poner es esto:
<video muted autoplay loop playsinline></video>
Del nombre de los atributos es fácil deducir para qué sirven:
muted: hace que, aunque el vídeo tuviera audio, no se reproduzca. Es necesario ponerlo o el navegador no lo reproducirá automáticamente.autoplay: en cuanto el vídeo se carga, se empieza a reproducir. Solo funciona si el anterior está presente.loop: ejecuta el vídeo en bucle, empezando de nuevo cuando llega al final. Igualito que un GIF.playsinline: le indica al navegador que queremos que este vídeo se reproduzca siempre en la página, es decir, que no se pueda poner a pantalla completa.
Fíjate en que al no tener el atributo controls puesto lo que se consigue es que no se muestren los controles de reproducción, que están desactivados por defecto salvo que se le ponga este atributo.
Vale, solo queda ponerle la fuente de vídeo, que en este caso será la dirección pública en Internet en la que hayamos "colgado" el vídeo, para lo cual se usa el atributo src:
<video muted autoplay loop playsinline src="https://www.miservidor.com/media/miVideo.mp4">
</video>
En nuestro caso, el vídeo equivalente al GIF queda de la siguiente manera:
¿A que no se nota que es un vídeo en vez de un GIF?
La única forma de verlo (y de paso saltarse las restricciones) es pulsar con el botón secundario del ratón sobre éste, que muestra un menú que nos permite pararlo, activar los controles, etc...:
¡Espero que te resulte útil!
Fecha de publicación: