Reemplazar GIF por video

Rob Dodson

En este codelab, reemplaza un GIF animado por un video para mejorar el rendimiento.

Mide primero

Primero, mide el rendimiento del sitio web:

  1. Para obtener una vista previa del sitio, presiona Ver app. Luego, presiona Pantalla completa pantalla completa.
  2. Presiona "Control + Mayús + J" (o bien "Comando + Opción + J" en Mac) para abrir Herramientas para desarrolladores.
  3. Haz clic en la pestaña Lighthouse.
  4. Asegúrate de que la casilla de verificación Rendimiento esté seleccionada en la lista Categorías.
  5. Haz clic en el botón Generar informe.

Cuando hayas terminado, deberías ver que Lighthouse marcó el GIF como un problema en su auditoría "Usa formatos de video para contenido animado".

Obtener FFmpeg

Existen varias formas de convertir GIFs en videos. En esta guía, se usa FFmpeg. Ya está instalada en la VM de Glitch y, si lo deseas, puedes seguir estas instrucciones para instalarla en tu máquina local.

Abre la consola

Vuelve a verificar que FFmpeg esté instalado y en funcionamiento:

  1. Haz clic en Remix to Edit para que el proyecto sea editable.
  2. Haz clic en Terminal. (Nota: Si no aparece el botón Terminal, es posible que debas usar la opción Pantalla completa).
  3. En la consola, ejecuta el siguiente comando:
which ffmpeg

Deberías obtener una ruta de acceso al archivo:

/usr/bin/ffmpeg

Cambiar GIF a video

  • En la consola, ejecuta cd images para ingresar al directorio de imágenes.
  • Ejecuta ls para ver el contenido.

Deberías ver algo como esto:

$ ls
cat-herd.gif
  • En la consola, ejecuta el siguiente comando:
ffmpeg -i cat-herd.gif -b:v 0 -crf 25 -f mp4 -vcodec libx264 -pix_fmt yuv420p cat-herd.mp4

Esto le indica a FFmpeg que tome la entrada, representada por la marca -i, de Cat-herd.gif y que la convierta en un video llamado cat-herd.mp4. Este proceso debería tardar un segundo en ejecutarse. Cuando finalice el comando, deberías poder volver a escribir ls y ver dos archivos:

$ ls
cat-herd.gif  cat-herd.mp4

Crea videos de WebM

Si bien el MP4 existe desde 1999, WebM es un principiante relativamente recién lanzado en 2010. Los videos WebM pueden ser mucho más pequeños que los MP4, por lo que tiene sentido generar ambos. Afortunadamente, el elemento <video> te permitirá agregar varias fuentes, por lo que, si un navegador no admite WebM, puede recurrir a MP4.

  • En la consola, ejecuta el siguiente comando:
ffmpeg -i cat-herd.gif -c vp9 -b:v 0 -crf 41 cat-herd.webm
  • Para comprobar los tamaños de los archivos, ejecuta lo siguiente:
ls -lh

Debes tener un GIF y dos videos:

$ ls -lh
total 4.5M
-rw-r--r-- 1 app app 3.7M May 26 00:02 cat-herd.gif
-rw-r--r-- 1 app app 551K May 31 17:45 cat-herd.mp4
-rw-r--r-- 1 app app 341K May 31 17:44 cat-herd.webm

Ten en cuenta que el GIF original es de 3.7 M, mientras que la versión MP4 es de 551K y la versión de WebM es solo de 341K. Eso significa un gran ahorro.

Actualiza el código HTML para recrear el efecto GIF

Los GIF animados tienen tres características clave que los videos deben replicar:

  • Se reproducen automáticamente.
  • Se repiten de forma continua (por lo general, pero es posible evitar que se repitan).
  • Son silenciosos.

Afortunadamente, puedes recrear estos comportamientos con el elemento <video>.

  • En el archivo index.html, reemplaza la línea por <img> con lo siguiente:
<img src="/images/cat-herd.gif" alt="Cowboys herding cats.">
<video autoplay loop muted playsinline></video>

Un elemento <video> que use estos atributos se reproducirá automáticamente, se repetirá indefinidamente, no reproducirá audio y se reproducirá intercalado (es decir, no en pantalla completa), con todos los comportamientos que se esperan de los GIF animados. 🎉

Especifica tus fuentes

Lo único que queda por hacer es especificar las fuentes de los videos. El elemento <video> requiere uno o más elementos secundarios <source> que apunten a diferentes archivos de video que el navegador puede elegir, según la compatibilidad del formato. Actualiza <video> con elementos <source> que se vinculen a tus videos de pastores de gatos:

<video autoplay loop muted playsinline>
  <source src="/images/cat-herd.webm" type="video/webm">
  <source src="/images/cat-herd.mp4" type="video/mp4">
</video>

Vista previa

  • Para obtener una vista previa del sitio, presiona Ver app. Luego, presiona Pantalla completa pantalla completa.

La experiencia debería ser la misma. Todo bien por ahora.

Verificar con Lighthouse

Con el sitio en vivo abierto, haz lo siguiente:

  1. Presiona "Control + Mayús + J" (o bien "Comando + Opción + J" en Mac) para abrir Herramientas para desarrolladores.
  2. Haz clic en la pestaña Lighthouse.
  3. Asegúrate de que la casilla de verificación Rendimiento esté seleccionada en la lista Categorías.
  4. Haz clic en el botón Generar informe.

Deberías ver que ahora se aprobó la auditoría "Usa formatos de video para contenido animado". ¡Muy bien! 💪