Reemplazar los GIF animados por videos para que las páginas se carguen más rápido

¿Alguna vez viste un GIF animado en un servicio como Imgur o Gfycat, lo inspeccionaste en tus herramientas para desarrolladores y luego te diste cuenta de que ese GIF era realmente un video? Hay una buena razón para eso. Los GIF animados pueden ser totalmente enormes.

Panel de red de Herramientas para desarrolladores que muestra un GIF de 13.7 MB.

Afortunadamente, esta es una de esas áreas del rendimiento de carga en las que puedes hacer relativamente poco trabajo para obtener grandes ganancias. Si conviertes GIFs grandes en videos, podrás ahorrar mucho ancho de banda de los usuarios.

Mide primero

Usa Lighthouse para revisar tu sitio en busca de GIFs que puedan convertirse en videos. En Herramientas para desarrolladores, haz clic en la pestaña Auditorías y marca la casilla de verificación Rendimiento. Luego, ejecuta Lighthouse y revisa el informe. Si tienes GIFs que se pueden convertir, verás la sugerencia "Usa formatos de video para contenido animado":

Una auditoría de Lighthouse fallida, usar formatos de video para el contenido animado.

Cómo crear videos en formato MPEG

Existen varias formas de convertir GIFs en video. En esta guía, se usa FFmpeg. Si quieres usar FFmpeg para convertir el GIF, my-animation.gif a un video MP4, ejecuta el siguiente comando en la consola:

ffmpeg -i my-animation.gif -b:v 0 -crf 25 -f mp4 -vcodec libx264 -pix_fmt yuv420p my-animation.mp4

Esto le indica a FFmpeg que tome my-animation.gif como entrada, representada por la marca -i, y que lo convierta en un video llamado my-animation.mp4.

El codificador libx264 solo funciona con archivos que tienen dimensiones par, como 320 px por 240 px. Si el GIF de entrada tiene dimensiones extrañas, puedes incluir un filtro de recorte para evitar que FFmpeg arroje un error de "altura/ancho no divisible por 2":

ffmpeg -i my-animation.gif -vf "crop=trunc(iw/2)*2:trunc(ih/2)*2" -b:v 0 -crf 25 -f mp4 -vcodec libx264 -pix_fmt yuv420p my-animation.mp4

Crea videos de WebM

Si bien el formato MP4 existe desde 1999, WebM es un formato de archivo relativamente nuevo que se lanzó inicialmente en 2010. Los videos de WebM son mucho más pequeños que los MP4, pero no todos los navegadores admiten WebM, por lo que tiene sentido generar ambos.

Si quieres usar FFmpeg para convertir my-animation.gif en un video WebM, ejecuta el siguiente comando en tu consola:

ffmpeg -i my-animation.gif -c vp9 -b:v 0 -crf 41 my-animation.webm

Compara la diferencia

El ahorro de costos entre un GIF y un video puede ser bastante significativo.

Comparación del tamaño de archivo que muestra 3.7 MB para el GIF, 551 KB para el archivo mp4 y 341 KB para Webm.

En este ejemplo, el GIF inicial es de 3.7 MB, en comparación con la versión MP4, que es de 551 KB, y la versión WebM, que es de solo 341 KB.

Reemplaza la imagen del GIF con un video.

Los GIF animados tienen tres características clave que un video debe replicar:

  • Se reproducen automáticamente.
  • Se repiten de forma continua (por lo general, pero es posible evitar que se repitan).
  • Son silenciosos.

Afortunadamente, puedes recrear estos comportamientos con el elemento <video>.

<video autoplay loop muted playsinline></video>

Un elemento <video> con estos atributos se reproduce automáticamente, se repite indefinidamente, no reproduce audio y lo reproduce intercalado (es decir, no en pantalla completa), todos los comportamientos de sello discográfico que se esperan de los GIF animados. 🎉

Por último, el elemento <video> requiere uno o más elementos secundarios <source> que apunten a diferentes archivos de video que el navegador puede elegir, según la compatibilidad de formato del navegador. Proporciona WebM y MP4, de modo que, si un navegador no admite WebM, pueda recurrir a MP4.

<video autoplay loop muted playsinline>
  <source src="my-animation.webm" type="video/webm">
  <source src="my-animation.mp4" type="video/mp4">
</video>

Efecto en el Largest Contentful Paint (LCP)

Ten en cuenta que, si bien los elementos <img> son candidatos para el LCP, los elementos <video> sin una imagen poster no lo son candidatos para LCP. En el caso de emular GIF animados, la solución es no agregar el atributo poster a tus elementos <video>, ya que esa imagen no se usará.

¿Qué significa esto para tu sitio web? Te recomendamos que sigas usando un objeto <video> en lugar de un GIF animado, pero ten en cuenta que ese contenido multimedia no será candidato para LCP y, en su lugar, se usará el siguiente candidato más grande. Como los GIFs y los <video> suelen ser más grandes y se descargan más lento, es probable que cambiar a un candidato de LCP diferente mejore incluso el LCP del sitio.