Usar formatos de video para contenido animado

— Actualizado
Available in: English y Português
Appears in: Auditorías de rendimiento
En esta página

La sección Oportunidades de su informe Lighthouse enumera todos los GIF animados, junto con los ahorros estimados de segundos obtenidos al convertir estos GIF en video:

Una captura de pantalla de la auditoría de Lighthouse 'Usar formatos de video para contenido animado'

Por qué debería reemplazar los GIF animados con video #

Los GIF grandes son ineficaces para entregar contenido animado. Al convertir GIF grandes en videos, puede ahorrar mucho en el ancho de banda de los usuarios. Considere usar videos MPEG4/WebM para animaciones y PNG/WebP para imágenes estáticas en lugar de GIF para ahorrar bytes de red.

Crea videos MPEG #

Hay varias formas de convertir GIF en video. FFmpeg es la herramienta utilizada en esta guía. Para convertir el GIF, my-animation.gif en un video MP4 mediante FFmpeg, ejecute el siguiente comando en su consola:

ffmpeg -i my-animation.gif my-animation.mp4

Esto le dice a FFmpeg que tome my-animation.gif como una entrada, indicada por la -i, y que la convierta en un video llamado my-animation.mp4.

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 convertir my-animation.gif en un video WebM mediante FFmpeg, ejecute el siguiente comando en su consola:

ffmpeg -i my-animation.gif -c vp9 -b:v 0 -crf 41 my-animation.webm

Reemplazar la imagen GIF con un video #

Los GIF animados tienen tres características clave que un video debe imitar:

  • Se reproducen automáticamente.
  • Se repiten de forma continua (normalmente, pero es posible evitarlo).
  • Están en silencio.

Afortunadamente, puede recrear estos comportamientos usando 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 convierta GIF en videos HTML5 #

Muchas CDN de imágenes admiten la conversión de video GIF a HTML5. Se sube un GIF a la CDN de imágenes, y esta devuelve un video HTML5.

Orientación específica de la pila #

AMP #

Para contenido animado, use amp-anim para minimizar el uso del CPU cuando el contenido esté fuera de la pantalla.

Recursos #

Última actualización: — Mejorar el artículo
Return to all articles
Compartir