GIF sin .gif: las opciones de imagen y video más efectivas en este momento | trucos CSS

Si desea usar formatos de video más nuevos con respaldo para navegadores más antiguos, puede usar varios <source> elementos El orden de los elementos de origen importa Coloque la fuente ideal en la parte superior y la alternativa después de ella.

<video autoplay loop muted playsinline>
  <source src="https://css-tricks.com/gifs-without-the-gif-the-most-performant-image-and-video-options-right-now/cats.webm" type="video/webm"> <!-- ideal -->
  <source src="https://css-tricks.com/gifs-without-the-gif-the-most-performant-image-and-video-options-right-now/cats.mp4" type="video/mp4"> <!-- fallhack -->
</video>

Dado el código anterior, cats.webm se utilizará a menos que el navegador admita este formato, en cuyo caso se mostrará MP4 en su lugar.

¿Qué sucede si desea incluir varios archivos MP4, pero cada uno con un códec diferente? type puedes incluir un parámetro de códecsLa sintaxis es terriblemente complicada para cualquiera que no sea un fanático de los códecs, pero se ve así:

<video autoplay loop muted playsinline>
  <source src="https://css-tricks.com/gifs-without-the-gif-the-most-performant-image-and-video-options-right-now/cats.mp4" type="video/mp4; codecs=av01.0.05M.08" >
  <source src="https://css-tricks.com/gifs-without-the-gif-the-most-performant-image-and-video-options-right-now/cats.mp4" type="video/mp4" >
</video>

Usando el código anterior, el navegador elegirá AV1 si puede reproducir ese formato y, de lo contrario, recurrirá al H.264 compatible universalmente. Para AV1, codecs parámetro siempre comienza con av01El siguiente número es o 0 (para perfil básico), 1 (para perfil alto) o 2 (para perfil profesional). Sigue un número de nivel de dos dígitos. A esto le sigue la letra M (para el nivel básico) o H (para un nivel alto) Es difícil entender qué significan estas cosas, por lo que puede proporcionar su video AV1 en un contenedor WebM y evitar especificar el códec por completo.

La mayoría de los programas de edición de video no le permitirán exportar como AV1 o incluso como WebM. Si desea utilizar uno de estos formatos, deberá exportar su video como otra cosa, como .movy luego convertirlo usando la herramienta de línea de comando MPEG:

ffmpeg -i yourSourceFile.mov -map_metadata -1 -c:a libopus -c:v librav1e -qp 80 -tile-columns 2 -tile-rows 2 -pix_fmt yuv420p -movflags +faststart -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" videoTitle.mp4

Debe utilizar el archivo de salida de mayor resolución que pueda. Obviamente, una vez que se pierde la calidad de la imagen, no puede mejorarla convirtiendo a un mejor formato. .gif como un archivo de salida no es ideal porque el visual calidad de .gif no muy bien, pero aún se beneficiará de una gran reducción en el tamaño del archivo:

ffmpeg -i cats.gif -map_metadata -1 -an opus -c:v librav1e -qp 80 -tile-columns 2 -tile-rows 2 -pix_fmt yuv420p -movflags +faststart -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" cats.mp4

En Mac, puedes descargar FFmpeg usando Homebrew:

brew install ffmpeg

Aquí hay un buen ejemplo de video en diseño web con un diseño magistral. Sitio web de óxido:

Si desea usar el video como fondo y colocar otros elementos en él, trabaje con <video> es un poco más desafiante que CSS background-imagey requiere un código que se parece a esto:

.video-parent {
  position: relative;
  width: 100vw;
  height: 100vh;
} 

.video-parent video {
  object-fit: cover;
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
}

los <video> element es una excelente opción de reemplazo de GIF, pero tiene un efecto secundario desagradable: evita que la pantalla del usuario entre en modo de suspensión, como se explica en esta publicación por un ex gerente de producto del navegador Microsoft Edge.

Los beneficios de usar una imagen

Ya sea un WebP animado o un archivo AVIF animado, usar imágenes en lugar de video tiene algunas ventajas.

No estoy seguro de cuántas personas realmente quieren dirigir sus GIF, pero usar <picture> el artículo realmente abre algunas posibilidades que no se pueden lograr fácilmente <video>Puede configurar diferentes animaciones para el modo claro y oscuro, por ejemplo:

<picture>
  <source  media="(prefers-color-scheme: dark)">
  <img src="https://css-tricks.com/gifs-without-the-gif-the-most-performant-image-and-video-options-right-now/light-animation.avif" alt="">
</picture>

Es posible que queramos que un video móvil tenga una relación de aspecto diferente a la de un video de escritorio. Podríamos simplemente recortar partes de la imagen con CSS, pero eso parece una pérdida de bytes y algo aleatorio. Usando una consulta de medios, podemos mostrar una animación de archivo de imagen diferente según el tamaño de la pantalla o la orientación:

<picture>
  <source type="image/avif"  media="(orientation: landscape)"">
  <img src="https://css-tricks.com/gifs-without-the-gif-the-most-performant-image-and-video-options-right-now/typeloop-portrait.avif" alt="">
</picture>

Eso es todo posible con video, puede usar matchMedia para realizar cualquier solicitud de medios en JavaScript y modificar mediante programación el src de un <video> elemento:

const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
if (mediaQuery.matches) {
  document.querySelector("video").src = "https://css-tricks.com/gifs-without-the-gif-the-most-performant-image-and-video-options-right-now/dark-animation.mp4";
}

Creo que siempre que haya una forma de hacer algo con marcado, debería preferirse a hacerlo con JavaScript.

Puede utilizar imágenes de mapa de bits dentro de SVG usando <image> elemento.Esto incluye formatos de imagen animada. No hay mucho que pueda hacer con una imagen en SVG que no pueda hacer con CSS, pero si agrupa una imagen con elementos vectoriales en SVG, obtendrá la ventaja de que se mueven diferentes elementos. y escalar juntos.

los <img> El elemento tiene el beneficio de la carga diferida nativa:

<img loading="lazy" src="https://css-tricks.com/gifs-without-the-gif-the-most-performant-image-and-video-options-right-now/cats.avif" alt="cats">

Si desea un video de fondo que ocupe toda la pantalla, es un poco más fácil colocar un background-image que HTML <video> elemento:

.background-video {
  background-image: url("coolbackground.webp");
  background-repeat: no-repeat;
  background-size: cover;
  height: 100vh;
  width: 100vh;
} 

Si desea admitir navegadores más antiguos, puede utilizar <picture> elemento con un respaldo WebP animado o, solo para Safari, un img con vídeo srco si está interesado en navegadores antiguos, tal vez APNG (PNG animado) o GIF. El uso de múltiples formatos de imagen de esta manera puede ser poco práctico si está optimizando las imágenes manualmente; pero es relativamente trivial si está utilizando un servicio como Cloud.

<picture>
  <source type="image/avif" >
  <img src="https://css-tricks.com/gifs-without-the-gif-the-most-performant-image-and-video-options-right-now/cats.webp">
</picture>

Todavía no existe una forma bien admitida de especificar imágenes de respaldo para fondos CSS. image-set es equivalente a <picture> elemento, [but for background-image. Unfortunately, only Firefox currently supports the type attribute of image-set.

.box {
  background-image: image-set(
    url("https://css-tricks.com/gifs-without-the-gif-the-most-performant-image-and-video-options-right-now/cats.avif") type("image/avif"),
    url("https://css-tricks.com/gifs-without-the-gif-the-most-performant-image-and-video-options-right-now/cats.webp") type("image/webp"));
}

Use animated WebP

The WebP image format was introduced by Google in 2010. WebP, including animated WebP, has broad browser support.

<img src="https://css-tricks.com/gifs-without-the-gif-the-most-performant-image-and-video-options-right-now/nyancat.webp" alt="A cat flying through space leaving a rainbow trail">

Use animated AVIF

WebP is now twelve years old. The more modern AV1 Image File Format (AVIF), released in 2019, is the best image format for most use cases on the web. Converting a .gif file to AVIF can reduce bytes by over 90%.

<img src="https://css-tricks.com/gifs-without-the-gif-the-most-performant-image-and-video-options-right-now/nyancat.avif" alt="A cat flying through space leaving a rainbow trail">

As its name suggests, AVIF is based on the the AV1 video codec. Like WebP, AVIF can be used for both still images and animation. There’s not much difference between an animated AVIF file and an AV1 video in an MP4 container.

You can put a shadow on AVIF animation, e.g.:

filter: drop-shadow(2px 4px 6px black);

AVIF is already supported by Safari, Firefox, Samsung Internet, and Chrome. Firefox only shipped support for still images, not animated AVIF. Safari supports animation as of version 16.1. Unfortunately, because Firefox does support AVIF, just not animated AVIF, it’s impossible to successfully use the <picture> element to display AVIF only to browsers that support animation. Given the following code, Firefox would display the AVIF, but as a static image, rather than showing the animated WebP version:

<picture>
  <source  type="image/avif">
  <img src="https://fonts.gstatic.com/s/e/notoemoji/latest/1f4a9/512.webp" alt="💩" width="32" height="32">
</picture>

Tooling for AVIF is still improving. Video editing software does not enable you to export footage as animated AVIF or animated WebP. You’ll need to export it in some other format and then convert it. On the website ezgif.com you can upload a video file or a .gif and convert it to AVIF or WebP. You could also use FFmpeg. Using Cloudinary you can upload a video file or an old .gif and convert it to pretty much any format you want — including animated WebP and animated AVIF. As of time of writing, Squoosh, an image conversion app, doesn’t support animated AVIF.

Adoption remains lacking in design software. When viewing a prototype, Figma will play any animated GIFs included in the design. For AVIF, by contrast, you can’t even import or export a still image.

Use a video with an <img> element

In 2018, Safari 11.1 gave developers the ability to use a video file as the source of the HTML <img> element. This works in Safari:

<img src="https://css-tricks.com/gifs-without-the-gif-the-most-performant-image-and-video-options-right-now/cat.mp4" alt="A Siamese cat walking in a circle">

All the same codecs that Safari supports for <video> are supported by <img>. This means you can use MP4, H.264, and HEVC.

In Safari, video files will also work anyplace in CSS where you could use an image, like background-image or border-image:

.video-border {  
  border: 40px solid transparent;
  border-image: url(abstract_bg_animation.mp4) 100 round;
}

One strange consequence of this feature in Safari is that the poster image of a <video> element can also be a video. The poster will autoplay even if you have blocked video’s from auto-playing. Safari claimed this feature came with performance benefits, not just over using .gif files but also over using the <video> element. According to Apple:

By placing your videos in <img> elements, the content loads faster, uses less battery power, and gets better performance.

Colin Bendell, co-author of O‘Reilly’s High Performance Images, wrote about the shortcomings of the <video> tag for our use case:

Unlike <img> tags, browsers do not preload <video> content. Generally preloaders only preload JavaScript, CSS, and image resources because they are critical for the page layout. Since <video> content can be any length – from micro-form to long-form – <video> tags are skipped until the main thread is ready to parse its content. This delays the loading of <video> content by many hundreds of milliseconds.

[…]

Peor aún, muchos navegadores aceptan esto <video> las etiquetas contienen contenido de formato largo. En lugar de descargar todo el archivo de video a la vez, lo que desperdiciaría su plan de datos móviles en los casos en que no termine viendo el video completo, el navegador primero realizará una solicitud de 1 byte para verificar si el servidor admite Solicitudes de rango HTTP. Luego, esto será seguido por múltiples solicitudes de alcance en varios tamaños de fragmentos para garantizar que el video esté adecuadamente (pero no en exceso) almacenado en el búfer. La consecuencia son múltiples viajes de ida y vuelta de TCP antes de que el navegador comience a decodificar el contenido, y retrasos significativos antes de que el usuario vea algo.En conexiones celulares de alta latencia, estos viajes de ida y vuelta pueden retrasar las cargas de video en cientos o miles de milisegundos.

Chrome marca esto como "No se arreglará" - lo que significa que no tienen la intención de admitir esta función, por varias razonesSin embargo, hay uno problema abierto en GitHub para agregarlo a la especificación HTML, lo que forzaría la mano de Google.

Respeto a las preferencias del usuario

El video tiene la ventaja de respetar automáticamente las preferencias del usuario. Firefox y Safari permiten a los usuarios bloquear videos de reproducción automáticaaunque no tengan audio. Por ejemplo, aquí están las configuraciones en Firefox:

El usuario aún puede decidir ver un video en particular haciendo clic derecho y presionando reproducir en el menú, o habilitar la reproducción automática para todos los videos en un sitio web en particular.

Para usuarios que no han deshabilitado el automático reproducción, es bueno tener la opción de pausar una animación si la encuentra molesta o distrae (el usuario aún puede hacer clic derecho para que aparezca la opción de pausa en el menú cuando no se muestran los controles de video) Criterio para bueno suerte 2.2.2 Pausa, Detener, Ocultar de las pautas de accesibilidad de las WCAG establece:

Para cualquier información en movimiento, parpadeante o desplazable que (1) comience automáticamente, (2) dure más de cinco segundos y (3) se presente junto con otro contenido, existe un mecanismo para que el usuario pause, detenga u oculte a menos que el movimiento, el parpadeo o el desplazamiento es parte de una actividad donde es imprescindible.

S <video> elemento, logrará este criterio sin más desarrollo.

También hay una configuración personalizada de "reducción de movimiento" que los desarrolladores pueden respetar al reducir o eliminar las animaciones web CSS y JavaScript.

También puede usarlo para mostrar una imagen fija en lugar de una animación. código adicional para la implementación, y debe alojar una imagen fija además de su imagen animada.

<picture>
  <source
    
    type="image/avif"
    media="(prefers-reduced-motion: no-preference)"
  />
  <img src="https://css-tricks.com/gifs-without-the-gif-the-most-performant-image-and-video-options-right-now/nyancat.png" alt="Nyan cat" width="250" height="250" />
</picture>

Hay otro inconveniente <picture> elemento, por lo que si el usuario ha marcado "reducir movimiento", no hay forma de ver la animación. Simplemente porque el usuario prefiere menos animación, no significa que nunca quieran cualquier tipo — es posible que todavía quieran poder sintonizar y ver a alguien de vez en cuando <video> elemento, mostrar una imagen fija elimina esta selección.

Comprobar la mejora progresiva

Si desea comprobar si su <picture> el código funciona correctamente y se muestran imágenes de respaldo, puede usar Representación pestaña en Chrome DevTools para desactivar la compatibilidad con los formatos de imagen AVIF y WebP. Dado que todos los navegadores ahora son compatibles con WebP, esta es una función bastante útil.

Si bien suele ser la mejor opción para crear animaciones con CSS, JavaScript, elementos DOM, lienzo y SVG, dado que los nuevos formatos de imagen y video ofrecen archivos más pequeños de lo que era posible antes, se están convirtiendo en una opción útil para la animación de la interfaz de usuario (en lugar de solo bucles nyancat). Para animaciones únicas, un archivo AVIF probablemente sea más eficiente que importar un archivo completo. biblioteca de animación.

lotería

Despues de los efectos es una popular herramienta de animación de Adobe. Usando una extensión llamada cuerpo en movimientopuede exportar datos de animación de After Effects como un archivo JSON.

Entonces hay loteríauna biblioteca de animación de código abierto de Airbnb que puede tomar ese archivo JSON y representarlo como una animación en todas las plataformas. La biblioteca está disponible para aplicaciones nativas de iOS, Android y React Native, así como para la web. Puedes ver ejemplos ejemplos de Google Home, Target y Walgreens, entre otros.

Después de incluir la dependencia, debe escribir una pequeña cantidad de código JavaScript para iniciar la animación:

<div id="lottie"></div>

const animation = bodymovin.loadAnimation({
  container: document.getElementById('lottie'),
  path: 'myAnimation.json',
  renderer: 'svg',
  loop: true,
  autoplay: true,
})

Opcionalmente, puede cambiar esta configuración para jugar solo después de un evento:

const lottieContainer = document.getElementById('lottie');
const animation = bodymovin.loadAnimation({
  container: lottieContainer, 
  path: 'myAnimation.json',
  renderer: 'svg',
  loop: true,
  autoplay: false,
  })
// Play the animation on hover
lottieContainer.addEventListener('mouseover', () => {
  animation.play();
});
// Stop the animation after playing once
animation.addEventListener('loopComplete', function() {
  animation.stop();
});

Aquí un dulce ejemplo de un gato escribiendo en un teclado que tomé prestado lottiefiles.com (el sitio web es útil para obtener una vista previa de sus propias animaciones de archivos JSON de Lottie en lugar de tener que instalar After Effects, y también para encontrar animaciones de otras creatividades):

También puede reproducir una animación hacia atrás mediante programación y cambiar la velocidad de reproducción.

Si elige usar Lottie, hay Complemento de Figma para Lottie pero todo lo que hace es convertir archivos JSON a .gif para que puedan visualizarse en modo prototipo.

¿Qué hay de la actuación de Lottie? tamaño de la biblioteca — 254,6 KB (63,8 comprimidos con gzip) — y el tamaño del archivo JSON a tener en cuenta. También está la cantidad de elementos DOM que se crean para las partes SVG. Si encuentra este problema, Lottie tiene la opción de renderizar a HTML <canvas>pero necesitará usar una versión diferente de la biblioteca de JavaScript.

const animation = bodymovin.loadAnimation({
  container: document.getElementById('lottie'), 
  path: 'myAnimation.json',
  renderer: 'canvas',
})

Lottie no es un reemplazo completo para los gifs. Si bien After Effects se usa a menudo con videos, Lottie puede renderizar a HTML <canvas>y el lienzo puede reproducir videos, no usaría un archivo Lottie para ese propósito. Lottie es para animaciones 2D avanzadas, no tanto para video. Hay otras herramientas para crear webs complejas. animaciones GUI como SVGator y Rivpero no los he probado yo mismo. 🤷‍♂️

desearía que hubiera TL; Dr para este artículo Al menos por ahora, no hay un claro ganador...