En la sección Oportunidades de tu informe de Lighthouse, se enumeran todos los GIF animados, junto con el ahorro estimado en segundos que se puede lograr convirtiendo estos GIF en video:
Por qué debes reemplazar los GIF animados por videos
Los GIFs grandes no son eficientes para mostrar contenido animado. Si conviertes GIFs grandes en videos, puedes ahorrar mucho en el ancho de banda de los usuarios. Considera usar videos MPEG4/WebM para animaciones y formatos PNG/WebP para imágenes estáticas en lugar de GIF para ahorrar bytes de la red.
Cómo crear videos en formato MPEG
Existen varias formas de convertir archivos GIF en videos.
FFmpeg es la herramienta que se usa en esta guía.
Si quieres usar FFmpeg para convertir el GIF, my-animation.gif en un video 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 (indicado por la marca -i) y que lo convierta en un video llamado my-animation.mp4.
Crea videos de WebM
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
Cómo 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 repitan).
- Están en silencio.
Afortunadamente, 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>
Utilizar un servicio que convierte de GIF a 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 mostrará un video HTML5.
Orientación específica para pilas
AMP
En el caso de contenido animado, usa amp-anim para minimizar el uso de CPU cuando el contenido esté fuera de la pantalla.