¿Alguna vez viste un GIF animado en un servicio como Imgur o Gfycat, lo inspeccionaste en tus herramientas para desarrolladores y descubriste que en realidad era un video? Hay una buena razón para eso. Los GIFs animados pueden ser enormes.
Afortunadamente, esta es una de las áreas de rendimiento de carga en las que puedes hacer relativamente poco trabajo para obtener grandes ganancias. Si conviertes GIFs grandes en videos, puedes ahorrar mucho ancho de banda de los usuarios.
Mide primero
Usa Lighthouse para verificar tu sitio en busca de GIFs que se puedan convertir 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 verifica el informe. Si tienes GIFs que se puedan convertir, deberías ver una sugerencia para "Usar formatos de video para contenido animado":
Crea videos MPEG
Existen varias formas de convertir GIFs en videos.
FFmpeg es la herramienta que se usa en esta guía.
Para 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 la entrada, indicada por la
-i marca, y que la convierta en un video llamado my-animation.mp4.
El codificador libx264 solo funciona con archivos que tienen dimensiones pares, como 320 px por 240 px. Si el GIF de entrada tiene dimensiones impares, 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 WebM
Si bien MP4 existe desde 1999, WebM es un formato de archivo relativamente nuevo que se lanzó inicialmente en 2010. Los videos WebM son mucho más pequeños que los videos MP4, pero no todos los navegadores admiten WebM, por lo que tiene sentido generar ambos.
Para usar FFmpeg para convertir my-animation.gif en un video WebM, ejecuta el siguiente comando en la 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.
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 GIF por un video
Los GIFs animados tienen tres características clave que un video debe replicar:
- Se reproducen automáticamente.
- Se repiten continuamente (por lo general, pero es posible evitar la repetición).
- 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 sin fin,
no reproduce audio y se reproduce en línea (es decir, no en pantalla completa), todos los comportamientos distintivos
que se esperan de los GIFs 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 Largest Contentful Paint (LCP)
Cabe destacar que, si bien los elementos <img> son candidatos para LCP, los elementos <video> sin una imagen poster no son candidatos para LCP. La solución en el caso de la emulación de GIFs animados no es agregar el atributo poster a tus elementos <video>, ya que esa imagen no se usará.
¿Qué significa esto para tu sitio web? La recomendación es seguir usando un <video> en lugar de un GIF animado, pero con el entendimiento de 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, por lo tanto, más lentos para descargar, es probable que cambiar a un candidato de LCP diferente mejore el LCP del sitio.