En la sección Oportunidades de tu informe de Lighthouse, se enumeran todos los GIFs animados, junto con los ahorros estimados en segundos que se logran cuando se convierten en videos:
Por qué debes reemplazar los GIF animados por videos
Los GIF de gran tamaño 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 red.
Crea videos MPEG
Hay varias formas de convertir GIFs en videos.
FFmpeg es la herramienta que se usa en esta guía.
Para usar FFmpeg y convertir el GIF, my-animation.gif
, a un video MP4, ejecuta el siguiente comando en la consola:
ffmpeg -i my-animation.gif my-animation.mp4
Esto le indica a FFmpeg que tome my-animation.gif
como entrada, que se indica con la marca -i
, y que la convierta en un video llamado my-animation.mp4
.
Cómo crear videos 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, ejecuta el siguiente comando en la consola:
ffmpeg -i my-animation.gif -c vp9 -b:v 0 -crf 41 my-animation.webm
Reemplaza la imagen del 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 el bucle).
- Son silenciosos.
Afortunadamente, puedes volver a crear 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.
Drupal
Considera subir tu GIF a un servicio que pueda insertarlo como un video.