CSS

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

Entonces, ¿quieres un video en bucle de reproducción automática sin sonido? En el lenguaje popular, este es el significado mismo de la palabra GIFLa palabra ha sobrevivido, pero el formato de la imagen en sí es antiguo y obsoleto. Twitter, por ejemplo, tiene un botón «GIF» que en realidad incrusta <video> Elemento MP4 en tu tweet — no .gif Hay una cantidad asombrosa de formas de lograr el mismo resultado, pero una cosa está clara: realmente no hay una buena razón para usar las voluminosas. .gif formato de archivo ya.

Usar HTML <video> elemento

Es fácil recrear el comportamiento de un GIF usando el elemento de video HTML.

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

Con este código, el video se reproducirá automáticamente en un bucle continuo sin sonido. playsinline significa que los navegadores móviles reproducirán el video donde se encuentra en la página en lugar de abrirlo en pantalla completa.

Aunque el elemento de video HTML en sí ha sido compatible durante muchos años, no se puede decir lo mismo de la amplia variedad de formatos de video.

Los videos constan de dos partes: un contenedor y un códec de video. (Si su video contiene audio, consta de tres partes, la tercera es el códec de audio). Los contenedores pueden almacenar video, audio, subtítulos y metainformación. Los dos contenedores de video más comunes en la web son MP4 y WebM. El contenedor es el mismo que el tipo de archivo, si el archivo termina con .mp4 extensión, lo que significa que utiliza un contenedor MP4. Sin embargo, la extensión del archivo no le indica el códec. Los ejemplos de códecs de video comúnmente utilizados en la web incluyen VP8, VP9, ​​​​H.264 y HEVC (H.265). para reproducir su video en línea, el navegador debe admitir tanto el contenedor de video como el códec.

El soporte de video del navegador es un lío laberíntico, que es parte de la razón por la cual las incrustaciones de YouTube son omnipresentes, pero no funcionó para nuestro caso de uso. Echemos un vistazo a los formatos de video que vale la pena revisar.

Contenedores

  • MP4 se lanzó originalmente en 2001. Es compatible con todos los navegadores web y lo ha sido durante bastante tiempo.
  • WebM fue lanzado en 2010. Funciona en todos los navegadores excepto iOS Safari.

Códecs

  • El códec H.264 funciona en todos los navegadores.
  • HEVC/H.265, el sucesor de H.264, es compatible con Safari, Edge y Chrome (a partir de la versión 105).
  • VP9 es el sucesor del códec VP8. VP9 es compatible con todos los navegadores compatibles con WebM.
  • El códec AV1 es compatible con Chrome a partir de 2018 y con Firefox a partir de 2019. Tiene No enviado en Edge o Safari.

Un archivo MP4 que utilice el códec H.264 funcionará en cualquier lugar, pero no proporciona la mejor calidad ni el tamaño de archivo más pequeño.

AV1 aún no es compatible con varios navegadores, pero lanzado en 2018, es el códec más avanzado del mercado. Ya se usa, al menos para algunos videos y plataformas, por netflixyoutube y Vimeo. AV1 es un códec de video gratuito diseñado específicamente para Internet. AV1 fue creado por Alliance for Open Media (AOM), un grupo fundado por Google, Mozilla, Cisco, Microsoft, Netflix, Amazon e Intel. Apple ahora también es miembro, por lo que es seguro asumir que todos los navegadores admitirán AV1 eventualmente. Borde, final «todavía evaluando las opciones de soporte de AVIF y AV1».

El sitio web recientemente rediseñado de la consultora de desarrollo Evil Martians es un testimonio de la reducción del tamaño de archivo que AV1 es capaz de hacer.

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 &quot;scale=trunc(iw/2)*2:trunc(ih/2)*2&quot; 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 &quot;scale=trunc(iw/2)*2:trunc(ih/2)*2&quot; 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"));
}

Desktop

Chrome Firefox IE Edge Safari
108* 89 No 105* TP

Mobile / Tablet

Android Chrome Android Firefox Android iOS Safari
105* 104 105* 16.1

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">

Desktop

Chrome Firefox IE Edge Safari
32 65 No 18 16.0

Mobile / Tablet

Android Chrome Android Firefox Android iOS Safari
105 104 4.2-4.3 14.0-14.4

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.

An error in Figma that says files failed to import.

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:

La configuración de inicio automático de Firefox se abre en modo modal.

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.

Menú contextual de vídeo.

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.

Ventana Configuración de accesibilidad de pantalla de macOS con Movimiento editado marcado.

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.

Chrome DevTools con opciones de panel de procesamiento abiertas para deshabilitar imágenes AVIF y WebP.

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.

Una insignia circular que dice Coincidencia aceptada con un resaltado de progreso azul animado a su alrededor.
Este es un ejemplo divertido del uso de video de interfaz de usuario desde 2017 para Sitio web de League of Legends.

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…

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Botón volver arriba