La sección Oportunidades de tu informe de Lighthouse enumera todos los GIF animados, junto con el ahorro estimado en segundos Se logra convirtiendo estos GIF en video:
Por qué deberías reemplazar los GIF animados por videos
Los GIF de gran tamaño no son eficaces para mostrar contenido animado. Si conviertes GIFs grandes en videos, puedes ahorrar mucho en el ancho de banda de los usuarios. En su lugar, te recomendamos utilizar formatos de video MPEG4/WebM para animaciones y formatos PNG/WebP para imágenes estáticas a fin de ahorrar bytes de la red.
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, usa my-animation.gif en un video en formato MP4.
Ejecuta el siguiente comando en tu consola:
ffmpeg -i my-animation.gif my-animation.mp4
Esto le indica a FFmpeg que tome my-animation.gif como entrada
que se representa con la marca -i,
y convertirlo en un video llamado my-animation.mp4.
Crear videos de WebM
Los videos WebM son mucho más pequeños que los videos MP4, pero no todos los navegadores son compatibles con WebM, por lo que tiene sentido generar ambos.
Para usar FFmpeg y convertir my-animation.gif en un video WebM, sigue estos pasos:
Ejecuta el siguiente comando en tu consola:
ffmpeg -i my-animation.gif -c vp9 -b:v 0 -crf 41 my-animation.webm
Reemplazar la imagen GIF por 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>
<source src="my-animation.webm" type="video/webm" />
<source src="my-animation.mp4" type="video/mp4" />
</video>
Usar un servicio que convierta GIF en videos HTML5
Muchas CDN de imágenes admiten la conversión de GIF a video HTML5. Subes un GIF a la CDN de imágenes, y esta muestra un video HTML5.
Orientación específica de la pila
AMP
En el caso de contenido animado, usa amp-anim para minimizar el uso de CPU cuando el contenido no aparezca en pantalla.