Reemplace los GIF animados con video para cargas de página más rápidas
¿Alguna vez ha visto un GIF animado en un servicio como Imgur o Gfycat, lo inspeccionó en sus herramientas de desarrollo y descubrió que el GIF era realmente un video? Hay una buena razón para ello. Los GIF animados pueden ser francamente enormes.
Afortunadamente, esta es una de esas áreas del rendimiento de carga en las que hacer un trabajo relativamente pequeño brinda grandes ganancias. Al convertir GIF grandes en videos, puede ahorrarle mucho ancho de banda a los usuarios.
Mida primero #
Use Lighthouse para verificar su sitio en busca de GIFs que se puedan convertir en videos. En DevTools, haga clic en la pestaña Auditorías y marque la casilla de verificación Rendimiento. Luego, ejecute Lighthouse y verifique el informe. Si tiene algún GIF que se pueda convertir, debería ver una sugerencia para "Usar formatos de video para contenido animado":
Cree videos MPEG #
Hay varias formas de convertir GIF a video; FFmpeg es la herramienta utilizada en esta guía. Para usar FFmpeg para convertir el GIF, my-animation.gif en un video MP4, ejecute el siguiente comando en su consola:
ffmpeg -i my-animation.gif -b:v 0 -crf 25 -f mp4 -vcodec libx264 -pix_fmt yuv420p my-animation.mp4Esto le dice a FFmpeg que tome my-animation.gif como entrada, indicada por la bandera -i 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, puede 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.mp4Cree videos WebM #
Mientras 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 videos MP4, pero no todos los navegadores son compatibles con ellos, por lo que tiene sentido generar ambos.
Para usar FFmpeg para convertir my-animation.gif en un video WebM, ejecute el siguiente comando en su consola:
ffmpeg -i my-animation.gif -c vp9 -b:v 0 -crf 41 my-animation.webmCompare 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 tiene 551 KB, y la versión WebM, ¡que solo tiene 341 KB!
Reemplace la imagen GIF con un video #
Los GIF animados tienen tres características clave que un video debe recrear:
- Se reproducen automáticamente.
- Se repiten continuamente (normalmente, pero es posible evitarlo).
- No tienen sonido.
Afortunadamente, puede recrear estos comportamientos usando el elemento <video>
<video autoplay loop muted playsinline></video>Un elemento <video> con estos atributos se reproduce automáticamente, se repite sin cesar, no reproduce audio y se reproduce en línea (es decir, no en pantalla completa), ¡todos los comportamientos característicos que se esperan de los GIF animados! 🎉
Finalmente, el elemento <video> requiere uno o más elementos hijo <source> apuntando a diferentes archivos de video entre los que el navegador puede elegir, dependiendo del formato de soporte del navegador. Ofrezca 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>