Cómo usar video HTML5 para crear gifs animados en tamaños de archivo más pequeños

Por qué debería considerar usar video HTML5 en lugar de GIF regulares

En teoría, los GIF y los videos HTML5 no podrían ser más diferentes. El primero es un formato que le permite mostrar imágenes tanto estáticas como animadas, mientras que el segundo le ofrece una forma de mostrar videos incrustados en un sitio web. Anteriormente, la única forma de hacer esto era usar un software de terceros como Flash , ya que los GIF largos serían demasiado pesados ​​en la mayoría de los casos.

Ahí es donde el video HTML5 viene al rescate. Toma el mayor problema cuando se trata de GIF (archivos de gran tamaño) y lo resuelve gracias a una mejor optimización desde cero. Sin embargo, eso no es todo:

1. Los tamaños de archivo más bajos conducen a tiempos de carga más rápidos. Asegurarse de que su sitio se cargue rápidamente es fundamental para proporcionar una buena experiencia de usuario.
2. Mejores opciones de personalización. Los GIF pueden ser útiles, pero crearlos y modificarlos a menudo requiere un software personalizado. Por otro lado, puede personalizar los atributos de sus videos HTML5 utilizando unas pocas líneas de código simples.

Como puede ver, el video HTML5 ofrece muchos beneficios. Sin embargo, usarlo como sustituto de los GIF no es ideal para todos. Por ejemplo, muchos navegadores móviles desactivan la reproducción automática debido al impacto que puede tener la reproducción gratuita de medios en las asignaciones de datos, lo que lleva a una degradación de la experiencia del usuario.

Además, debido a que HTML5 aún es un estándar emergente, algunos navegadores implementan el video de manera diferente a otros. Por lo tanto, si está buscando entregar sus medios de manera consistente a tantos dispositivos y navegadores como sea posible, es posible que los GIF aún deban ser parte de su arsenal. Sin embargo, si está interesado en implementar video HTML5 por los motivos enumerados anteriormente, ¡siga leyendo para descubrir cómo!

Cómo convertir tus GIF en video HTML5

Antes de seguir adelante, vale la pena señalar que el video HTML5 no es un formato en sí mismo (mientras que el GIF sí lo es). En cambio, es un elemento que admite formatos de video, incluidos MP4, WebM y OGG.

En la mayoría de los casos, utilizará archivos MP4 o WebM, ya que tienden a ser más populares que OGG. El problema es que los GIF tienen un tipo de comportamiento muy particular. Por lo general, comienzan a reproducirse tan pronto como se cargan, repiten una y otra vez y no tienen sonido.

Ahí es donde entran los atributos de HTML5. Con unas pocas líneas de código simples, podemos modificar nuestros videos para que se comporten como GIF. Tome esta breve animación, por ejemplo:

A primera vista, puede parecer un GIF normal, pero en realidad es un video WebM silenciado que se configuró para reproducirse automáticamente en un bucle. Para llegar allí, convertimos un GIF usando el servicio CloudConvert y lo incrustamos usando el siguiente fragmento de código:

Puede parecer demasiado complicado, pero dejamos de lado la mejor parte. Mientras que el GIF original tenía un poco más de 1 MB, su contraparte de WebM tiene solo 95 KB. Esa es una gran diferencia, e incluso si la misma proporción no se mantiene en todos los casos, es probable que vea mejoras notables en el tamaño del archivo al optar por el video HTML5.

Ahora, volvamos al fragmento de código que nos ocupa. Notarás que usamos las etiquetas <video> para incrustar nuestro elemento. Además de eso, agregamos tres atributos particulares para simular el comportamiento de un GIF: reproducción automática, bucle y póster . Los dos primeros se explican por sí mismos, mientras que el tercero especifica una imagen que aparecerá como marcador de posición mientras se carga el video (lo que no debería ser un problema para los archivos pequeños).

Después de especificar qué atributos usar, querrá indicar qué tipo de video insertará usando uno de los siguientes códigos:

1. webm 
2. mp4
3. ogg

HTML5 solo admite esos tres tipos de video, por lo que es una lista fácil de recordar.

Luego, deberá especificar la ubicación de su archivo de video, usando su carpeta raíz  como referencia. Por ejemplo, si carga su video en su biblioteca de medios, su ubicación se vería así:

Continuando, hay algunos atributos más que quizás desee usar para sus videos HTML5. Por ejemplo, silenciar puede ser útil si su video tiene sonido, y la altura y el ancho pueden ser necesarios si desea modificar el tamaño del elemento. Si desea incluirlos, todo lo que tiene que hacer es agregarlos dentro de su etiqueta de apertura  <video>  , así:

En el ejemplo anterior, nuestro video WebM se reproduciría en un bucle sin sonido y con valores estrictos de ancho y alto. Así es como se vería:

¡Eso es todo en pocas palabras! Si está familiarizado con HTML, entonces el proceso debería ser muy sencillo para usted. En resumen, todo lo que necesita hacer es convertir su video o GIF a uno de los formatos compatibles con HTML5 y luego incrustarlo con los atributos que desee.

Naturalmente, WordPress facilita la integración de HTML5 gracias a su editor de código integrado, al igual que Divi . El módulo de video del tema admite videos MP4 y WebM, y puede asignarles los atributos que desee a través de la sección CSS personalizado . Sin embargo, tenga cuidado: el video HTML5 incrustado con el módulo de video de Divi aparece con controles de forma predeterminada. Eso significa que no se verán como GIF.

Para emular GIF lo más fielmente posible, querrá pegar el código HTML5 requerido utilizando el  módulo Código e ingresando los atributos que desea manualmente. De cualquier manera, ¡tienes muchas opciones a tu disposición!

Qué hacer si no puede usar video HTML5

La mayoría de los navegadores modernos admiten video HTML5, pero si prefiere no cambiar a este método por una razón u otra, todavía hay otras opciones.

Hay muchas herramientas que te permiten optimizar tus GIF para que ocupen menos espacio. Uno de nuestros favoritos es  FileOptimizer , que le permite optimizar docenas de tipos de archivos, incluidos los GIF:

El software es gratuito y muy fácil de usar. Todo lo que tiene que hacer es elegir qué archivos optimizar y dejar que haga su magia. Naturalmente, el nivel de optimización variará según el archivo que elija, pero generalmente verá buenos resultados con los GIF.

Si prefiere utilizar un servicio en línea, le recomendamos que consulte ImageOptim . Esta es una herramienta premium que se puede configurar automáticamente para optimizar todas sus imágenes y GIF, para que sus páginas se carguen más rápido:

Si todavía está indeciso sobre qué opción elegir cuando se trata de la optimización de GIF, consulte esta pieza de comparación que publicamos hace un tiempo en la que echamos un vistazo a varias otras opciones de primer nivel.

Conclusión

En la mayoría de los casos, tiene sentido usar video HTML5 sobre GIFS. Después de todo, siempre debe hacer un esfuerzo para optimizar sus páginas para obtener los mejores tiempos de carga y rendimiento posibles. Además, siempre vale la pena estar por delante de la curva tecnológica, y HTML5 ofrece muchas posibilidades interesantes.

Si está de acuerdo con esta idea, esto es lo que necesita saber para comenzar:

1. Convierta sus GIF a archivos MP4, WebM u OGG utilizando un servicio como CloudConvert .
2. Incruste sus archivos de video usando el elemento HTML5 <video> .
3. Modifique su video HTML5 usando uno de los muchos atributos disponibles, como la reproducción automática y el bucle .

¿Crees que el video HTML5 tomará el lugar de los GIF en un futuro cercano? ¡Comparta sus pensamientos con nosotros en la sección de comentarios a continuación!

Imagen en miniatura del artículo de Eloku / shutterstock.com