Cómo usar formatos de video para contenido animado

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:

Captura de pantalla de Lighthouse Use formatos de video para la auditoría de contenido animado

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.

Recursos