GIFs Without the .gif: The Most Performant Image and Video Options Right Now

Say goodbye to the GIF era! Best practices for efficient web animation

Still using outdated GIF animations? In fact, there are more efficient and better performance alternatives nowadays! This article will explore in-depth how to achieve smooth looping video animations with more modern techniques, taking into account browser compatibility and user experience.

Using HTML <video></video> Element

Use the <video></video> elements of HTML to easily reproduce the GIF animation effect:

<video autoplay="" loop="" muted="" playsinline="" src="cats.mp4"></video>

This code implements automatic playback, loop playback, mute and inline playback (avoid full screen playback). However, the compatibility issues of video formats cannot be ignored.

Video files are composed of containers and video codecs (including audio, and audio codecs are also included). Common video container formats are MP4 and WebM. The browser needs to support both containers and codecs to play videos.

The browser supports video formats in a variety of complex and diverse way, which is one of the reasons why YouTube embedded videos are so popular. Let's see what video formats are worth considering:

Container format:

• MP4: Since its release in 2001, it has been supported by almost all browsers.
• WebM: Released in 2010, except for iOS Safari, and other browsers support it.

Codecode:

• H.264: All browsers support it.
• HEVC/H.265: The successor of H.264, supported by Safari, Edge and Chrome (version 105 and above).
• VP9: The successor of VP8, supported by all browsers that support WebM.
• AV1: Chrome has been supported since 2018, Firefox has been supported since 2019, and Edge and Safari have not yet been supported.

MP4 files with H.264 encoding have the best compatibility, but the quality and file size are not the best. Although the compatibility of AV1 is not yet perfect, as the latest codec, its efficiency and quality are extremely high. Platforms such as Netflix, YouTube and Vimeo are already used in some videos.

In order to take into account the old and new browsers, you can use multiple <source></source> elements, prioritize the designation of the ideal source file, and then add alternatives in turn:

<video autoplay="" loop="" muted="" playsinline="">
  <source src="cats.webm" type="video/webm; codecs='vp9'">
  <source src="cats.mp4" type="video/mp4; codecs='avc1.42E01E'">
</source></source></video>

If you need to use multiple MP4 files with different codecs, you need to use complex codecs parameters.

Most video editing software does not support direct export of AV1 or WebM formats, and requires the conversion using tools such as FFmpeg:

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

Convert GIF to MP4:

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

Using the video as the background and superimposing other elements requires CSS positioning:

.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%;
}

One disadvantage of

<video></video> elements is that they prevent the screen from hibernating.

The advantages of pictures: WebP and AVIF

Using animated WebP or AVIF image formats has the following advantages:

• Different animation images can be used for different screen sizes or theme modes (such as dark mode).
• Native support for lazy loading: <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/?x-oss-process=image/resize,p_40" class="lazy" alt="GIFs Without the .gif: The Most Performant Image and Video Options Right Now ">
• Easier to use as background image: background-image: url("coolbackground.webp");

It can be used<img src="/static/imghwm/default1.png" data-src="https://img.php.cn/?x-oss-process=image/resize,p_40" class="lazy" alt="GIFs Without the .gif: The Most Performant Image and Video Options Right Now ">

(The form is omitted, the same as the original form)

Using animation AVIF

AVIF format (released in 2019) is one of the best image formats at present, converting GIF to AVIF can reduce the number of bytes by more than 90%:

<video autoplay="" loop="" muted="" playsinline="" src="cats.mp4"></video>

AVIF is based on AV1 video codec and supports static and animation images.

(The form is omitted, the same as the original form)

Using<img src="/static/imghwm/default1.png" data-src="https://img.php.cn/?x-oss-process=image/resize,p_40" class="lazy" alt="GIFs Without the .gif: The Most Performant Image and Video Options Right Now "> This can achieve effects such as video background or border images in Safari:

<video autoplay="" loop="" muted="" playsinline="">
  <source src="cats.webm" type="video/webm; codecs='vp9'">
  <source src="cats.mp4" type="video/mp4; codecs='avc1.42E01E'">
</source></source></video>

Safari claims this feature has performance advantages, but Chrome has made it clear that it will not support it.

Respect user preferences

Video elements automatically respect the user's autoplay settings and "reduce animation" settings.

Check progressive enhancement

Support for AVIF and WebP formats can be turned off using Chrome DevTools' "Rendering" tab to test code compatibility.

Lottie animation library

Lottie is an open source animation library that exports animation data (JSON files) from After Effects and renders it to a web page. It supports multiple platforms and provides flexible control options such as playback, pause, reverse playback, etc.

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

Lottie's performance depends on the library size and JSON file size and the number of DOM elements generated.

Conclusion: There is no absolute best solution, and the choice needs to be weighed based on specific needs and project conditions.

The above is the detailed content of GIFs Without the .gif: The Most Performant Image and Video Options Right Now. For more information, please follow other related articles on the PHP Chinese website!