¿Alguna vez viste un GIF animado en un servicio como Imgur o Gfycat, inspeccionado en las herramientas para desarrolladores y descubriste que el GIF era en realidad un video. Hay un una buena razón para eso. Los GIFs animados pueden ser directamente enormes.
Por suerte, esta es una de esas áreas del rendimiento de carga en las que puedes y relativamente poco para obtener grandes ganancias. Si conviertes GIFs grandes en en los videos, puedes ahorrar mucho en términos ancho de banda.
Medir primero
Usa Lighthouse para comprobar si hay GIFs que se puedan convertir en videos en tu sitio. En Herramientas para desarrolladores, haz clic en la pestaña Audits y marca la casilla de verificación Rendimiento. Luego, ejecuta Lighthouse y revisar el informe. Si tienes GIFs que se pueden convertir, verás la sugerencia "Usar formatos de video para contenido animado":
Cómo crear videos MPEG
Hay varias formas de convertir GIFs en videos
FFmpeg es la herramienta que se utiliza en esta guía.
Si quieres usar FFmpeg para convertir el GIF, my-animation.gif en un video MP4, ejecuta el siguiente comando:
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, que indica el valor
-i y para convertirlo en un video llamado my-animation.mp4.
El codificador libx264 solo funciona con archivos que tienen dimensiones uniformes, como 320 px. por 240 píxeles. Si el GIF de entrada tiene dimensiones extrañas, puedes incluir un filtro de recorte para Evita que FFmpeg arroje una “altura/ancho no divisible por 2” error:
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
Crear videos de WebM
Aunque el formato MP4 existe desde 1999, WebM es un formato de archivo relativamente nuevo. lanzado inicialmente en 2010. Los videos 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 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 de WebM, que solo tiene 341 KB.
Reemplazar 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 produzcan bucles).
- Son silenciosos.
Por suerte, 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 se reproduce en línea (es decir, no en pantalla completa).
el comportamiento esperado de los GIF animados. 🎉
Por último, el elemento <video> requiere uno o más elementos secundarios <source>
que apuntan a distintos archivos de video que el navegador puede elegir, según
la compatibilidad de formatos del navegador. Proporciona WebM y MP4, de modo que si un navegador
no es compatible con WebM, puede 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 Procesamiento de imagen con contenido más grande (LCP)
Ten en cuenta que, si bien los elementos <img> son candidatos para el LCP, los elementos <video> sin una imagen poster no son candidatos al LCP. La solución en la emulación de GIF animados es no 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 que sigas usando un <video> en lugar de un GIF animado, pero con el entendimiento de que ese contenido multimedia no será candidato para LCP y que, en su lugar, se usará el siguiente candidato más grande. Como los GIF y <video> suelen ser más grandes y más lentos de descargar, es probable que cambiar a un candidato de LCP diferente incluso mejore el LCP del sitio.