Skip to content
Aprender Medir Blog Case studies About
Join and donate to 🇺🇦 DevFest for Ukraine, a charitable tech conference happening June 14–15 supported by Google Developers and Google Cloud.
En esta página
  • Por qué debería reemplazar los GIF animados con video
  • Crea videos MPEG
  • Crear videos WebM
  • Reemplazar la imagen GIF con un video
  • Utilizar un servicio que convierta GIF en videos HTML5
  • Orientación específica de la pila
    • AMP
  • Recursos

Usar formatos de video para contenido animado

May 2, 2019 — Actualizado Oct 4, 2019
Available in: Português, English
Appears in: Auditorías de rendimiento
En esta página
  • Por qué debería reemplazar los GIF animados con video
  • Crea videos MPEG
  • Crear videos WebM
  • Reemplazar la imagen GIF con un video
  • Utilizar un servicio que convierta GIF en videos HTML5
  • Orientación específica de la pila
    • AMP
  • Recursos

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'
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 #

  • Código fuente para la auditoría Usar formatos de video para contenido animado
  • Reemplazar los GIF animados con video para cargas de página más rápidas
  • Laboratorio de código para reemplazar GIF con video
Última actualización: Oct 4, 2019 — Mejorar el artículo
Return to all articles
Compartir
suscribir

Contribute

  • Presentar un error
  • Ver fuente

Contenido relevante

  • developer.chrome.com
  • Chrome Actualizaciones
  • Web Fundamentals
  • Case studies
  • Podcasts
  • Shows

Conectar

  • Twitter
  • YouTube
  • Google Developers
  • Chrome
  • Firebase
  • Google Cloud Platform
  • Todos los productos
  • Condiciones y privacidad
  • Principios de la Comunidad

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies.