En este codelab, mejorarás el rendimiento reemplazando un GIF animado por un video.
Mide primero
Primero, mide el rendimiento del sitio web:
- Para obtener una vista previa del sitio, presiona Ver app. Luego, presiona Pantalla completa .
- Presiona "Control + Mayúsculas + J" (o "Comando + Opción + J" en Mac) para abrir DevTools.
- Haz clic en la pestaña Lighthouse.
- Asegúrate de que la casilla de verificación Rendimiento esté seleccionada en la lista Categorías.
- Haz clic en el botón Generate report.
Cuando termines, deberías ver que Lighthouse marcó el GIF como un problema en su auditoría "Usa formatos de video para contenido animado".
Obtén FFmpeg
Existen varias formas de convertir GIFs a video. En esta guía, se usa FFmpeg. Ya está instalada en la VM de Glitch y, si lo deseas, también puedes seguir estas instrucciones para instalarla en tu máquina local.
Abre la consola
Vuelve a verificar que FFmpeg esté instalado y en funcionamiento:
- Haz clic en Remix para editar para que el proyecto sea editable.
- Haz clic en Terminal (nota: si no aparece el botón Terminal, es posible que debas usar la opción Pantalla completa).
- En la consola, ejecuta el siguiente comando:
which ffmpeg
Deberías obtener una ruta de acceso al archivo:
/usr/bin/ffmpeg
Cómo cambiar un 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, representada por la marca -i
, de cat-herd.gif y la convierta en un video llamado cat-herd.mp4. Esto debería tardar un segundo en ejecutarse. Cuando el comando finalice, deberías poder volver a escribir ls
y ver dos archivos:
$ ls
cat-herd.gif cat-herd.mp4
Cómo crear videos WebM
Si bien el MP4 existe desde 1999, WebM es un formato relativamente nuevo, ya que se lanzó por primera vez en 2010. Los videos WebM pueden ser mucho más pequeños que los MP4, por lo que tiene sentido generar ambos. Por suerte, el elemento <video>
te permitirá
añadir varias fuentes, de modo 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 verificar los tamaños de los archivos, 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
Ten en cuenta que el GIF original es de 3.7 M, mientras que la versión MP4 es de 551 K y la versión WebM es de solo 341 K. Eso es un gran ahorro.
Actualiza el código HTML para volver a crear el efecto de 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 el bucle).
- Son silenciosos.
Por suerte, puedes recrear estos comportamientos con el elemento <video>
.
- En el archivo
index.html
, reemplaza la línea con el<img>
por lo siguiente:
<img src="/images/cat-herd.gif" alt="Cowboys herding cats.">
<video autoplay loop muted playsinline></video>
Un elemento <video>
que usa estos atributos se reproducirá automáticamente, se repetirá indefinidamente, no reproducirá audio y se reproducirá de forma intercalada (es decir, no en pantalla completa) todos los comportamientos esperados de los GIF animados. 🎉
Especifica tus fuentes
Solo queda especificar tus fuentes de video. El elemento <video>
requiere uno o más elementos secundarios <source>
que apunten a diferentes archivos de video entre los que el navegador puede elegir, según la compatibilidad de formato.
Actualiza el <video>
con elementos <source>
que vinculen a tus videos de grupos 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.
La experiencia debería ser la misma. Todo bien por ahora.
Verifica con Lighthouse
Con el sitio publicado, haz lo siguiente abierto:
- Presiona "Control + Mayúsculas + J" (o "Comando + Opción + J" en Mac) para abrir DevTools.
- Haz clic en la pestaña Lighthouse.
- Asegúrate de que la casilla de verificación Rendimiento esté seleccionada en la lista Categorías.
- Haz clic en el botón Generate report.
Deberías ver que ahora se aprobó la auditoría "Usa formatos de video para contenido animado". ¡Muy bien! 💪