Reemplazar GIF por video

Rob Dodson

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

Medir 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úsculas + J` (o `Command + Option + 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 Generate report.

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

Obtener FFmpeg

Existen varias formas de convertir GIFs en videos: en esta guía se utiliza FFmpeg. Ya está instalada en la VM de Glitch y, si lo deseas, puedes seguir estas instrucciones para instalarla en tu locales automático a tus conjuntos de datos.

Abre la consola.

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

  1. Haz clic en Remix para editar para que el proyecto se pueda editar.
  2. Haz clic en Terminal. Nota: Si no ves el botón de la terminal, es posible que debas usar la opción de 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ía 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, que significa la marca -i, de cat-herd.gif y convertirlo en un video llamado cat-herd.mp4. Esto debería llevar un segundo en ejecutarse. Cuando finalice el comando, deberías poder volver a escribir ls y verás dos archivos:

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

Crear videos de WebM

Si bien el formato MP4 existe desde 1999, WebM es un principiante relativamente nuevo lanzado inicialmente en 2010. Los videos WebM pueden ser mucho más pequeños que los videos MP4, así que tiene sentido generar ambos. Afortunadamente, el elemento <video> te permitirá agregar varias fuentes, así 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 archivo, ejecuta lo siguiente:
ls -lh

Deberías 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

Observa que el GIF original es de 3.7 millones, mientras que la versión MP4 es de 551K, y La versión de WebM es solo 341K. Eso es un gran ahorro.

Actualiza 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 produzcan bucles).
  • Son silenciosos.

Por suerte, 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>

Se reproducirá automáticamente un elemento <video> que use estos atributos. sin fin, no reproducir audio y reproducir en línea (es decir, no en pantalla completa), todos los el comportamiento esperado de los GIF animados. 🎉

Especifica tus fuentes

Lo único que queda por hacer es especificar las fuentes de tus videos. El elemento <video> requiere uno o más elementos secundarios <source> que apuntan a diferentes archivos de video navegador puede elegir según el formato compatible. Actualiza <video> con elementos <source> que se vinculen a tus videos 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 verse igual. Todo bien por ahora.

Verificar con Lighthouse

Con el sitio publicado, haz lo siguiente abierto:

  1. Presiona `Control + Mayúsculas + J` (o `Command + Option + 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 Generate report.

Deberías ver que la opción "Usa formatos de video para el contenido animado" la auditoría ahora es ¡pasando! ¡Muy bien! 💪