Usar formatos de video para contenido animado
Published on • Updated on
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:
See the Lighthouse performance scoring post to learn how your page's overall performance score is calculated.
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
Updated on • Improve article