It's time to replace GIF with AV1 video

It is now the year 2019, and it’s time for us to make a decision on the GIF GIFs take up a huge amount of space (usually several megabytes in size!) Which, if you are a web developer, completely contradicts your desires! As a web developer, you want to minimize the things that users need to download in order for the site to load quickly. For the same reason, you minimize JavaScript, optimize PNG, JPEG, and sometimes convert JPEG to WebP . But what to do with the old man GIF?

Where we go, we will not need GIFs!

If your goal is to improve the download speed of the site, then you need to get rid of GIF! But how then do animated pictures? The answer is video. And in most cases, you will get better quality and space savings of 50-90%! In life, most things have their pros and cons. When you replace the GIF with video, you will most often not find the minuses.

Down with all gifs!

Fortunately, replacing the GIF with video has been commonplace in recent years, so all the necessary tools are already running. In this post, I will not reinvent the wheel, but only slightly improve the existing solutions. So, here's the gist:

1. Take a GIF and convert it to video
2. Encode video using H.264 or VP9, ​​i.e. compress it and pack it into an MP4 or WebM container
3. Replace <img> with animated GIF with <video> with movie
4. Turn on silent autoplay and loop to achieve the GIF effect.

Google has good documentation describing the process.

It is now 2019

It's 2019 now. Progress is moving forward, and we must keep up with it. So far, we have had two codec options, which are widely supported in all browsers and video encoding tools:

1. H.264 - Introduced in 2003 and most widely used today.
2. VP9 - appeared in 2013 and achieved an improvement in compression by almost 50% compared to H.264, although as they say here, not everything and not always so rosy

Note: Although the H.265 standard is the next version of H.264 and is able to compete with VP9, ​​I do not consider it due to weak browser support, as shown at https://caniuse.com/#feat=hevc . Licensing costs are the main reason why H.265 did not become as common as H.264 and for which the Alliance of Open Media consortium works with a codec without deductions - from AV1.

Remember that our goal is to reduce huge GIFs to the smallest possible size in order to speed up the download. It would have been a strange year in 2019 if we didn’t have a new standard for video compression in our arsenal. But it is called AV1. With AV1, you can achieve an approximately 30% improvement in compression over VP9 . Lepote! :)

AV1 at your service since 2019!

On desktops

Recently, support for decoding AV1 video has been added to desktop versions of Google Chrome 70 and Mozilla Firefox 65 . Right now, support in Firefox is buggy and can cause disruptions, but things should change with the addition of the decoder dav1d already in Firefox 67 ( already out, and support has appeared - note transl.) . For details about the new version read - dav1d 0.3.0 release: even faster!

On smartphones

For smartphones, hardware support is currently lacking due to the lack of appropriate decoders. You can do software decoding, although this will lead to an increase in battery consumption. The first mobile SOC with support for hardware decoding AV1 will appear in 2020.

And then the readers of the article are “so if the mobiles do not support normally, then why use AV1?”

AV1 is a fairly new codec, and we are at the very beginning of its adaptation. Think of this article as a stage “as long as you are cooking, people are catching up.” Support on desktops in itself will already speed up websites for a part of the audience. And the old codecs can be used as a fallback script when AV1 is not supported on the target device. But as users move to devices with AV1 support, everything will be ready. To achieve this, we need to create a video tag, as shown below, which will allow the browser to choose the preferred format - AV1 - >> VP9 - >> H.264 . Well, if the user has a completely old device or a navigator that does not support video at all (which is unlikely to steal from H264) , then he will simply see the GIF

 <video style="display:block; margin: 0 auto;" autoplay loop muted playsinline poster="RollingCredits.jpg"> <source src="media/RollingCredits.av1.mp4" type="video/mp4"> <source src="media/RollingCredits.vp9.webm" type="video/webm"> <source src="media/RollingCredits.x264.mp4" type="video/mp4"> <img src="media/RollingCredits.gif"> </video> 

Create AV1

Create a video in AV1 is easy. Download the latest ffmpeg build for your system from here and use the commands below. We use 2 passes to reach the target bitrate. For this, we will run ffmpeg twice. The first time we write the result in a non-existent file. This will create the log that is needed for the second run of ffmpeg.

 # Linux or Mac ##  1 ffmpeg -i input.mp4 -c:v libaom-av1 -b:v 200k -filter:v scale=720:-1 -strict experimental -cpu-used 1 -tile-columns 2 -row-mt 1 -threads 8 -pass 1 -f mp4 /dev/null && \ ##  2 ffmpeg -i input.mp4 -pix_fmt yuv420p -movflags faststart -c:v libaom-av1 -b:v 200k -filter:v scale=720:-1 -strict experimental -cpu-used 1 -tile-columns 2 -row-mt 1 -threads 8 -pass 2 output.mp4 # Windows ##  1 ffmpeg.exe -i input.mp4 -c:v libaom-av1 -b:v 200k -filter:v scale=720:-1 -strict experimental -cpu-used 1 -tile-columns 2 -row-mt 1 -threads 8 -pass 1 -f mp4 NUL && ^ ##  2 ffmpeg.exe -i input.mp4 -pix_fmt yuv420p -movflags faststart -c:v libaom-av1 -b:v 200k -filter:v scale=720:-1 -strict experimental -cpu-used 1 -tile-columns 2 -row-mt 1 -threads 8 -pass 2 output.mp4 

Here is the decoding of the parameters:

 -i -  . -pix_fmt -   4:2:0       .     ,  4:2:0  . -c:v -   ,    - AV1.<br /> -b:v –  ,    . -filter:v scale -   ffmpeg     .   X:-1   ffmpeg    X,   . -strict experimental -  , .. AV1   . -cpu-used -   ,          .   0-4.   ,    , ,  ,   . -tile-columns -    .  AV1     ,         . -row-mt – ,    ,        . -threads -  . -pass -    . -f -     .    , .. MP4   . -movflags faststart -    ,      .         . 

Creating a GIF

To create a GIF, I used the command below. To reduce the size, I scaled the GIF to 720px in width and 12 fps instead of the original 24 fps video.

 ./ffmpeg -i /mnt/c/Users/kasing/Desktop/ToS.mov -ss 00:08:08 -t 12 -filter_complex "[0:v] fps=12,scale=720:-1" -y scene2.gif 

Test results

Better to see once than read a hundred times, right? Let's make sure AV1 is the right choice for our purposes. I took the free Tears Of Steel video, available here https://mango.blender.org/ , and converted it using about the same bit rate for AV1, VP9, ​​H.264 codecs. The results are below, so you can compare them yourself.

Note 1: If the file below does not load, it may be time for you to upgrade your browser. I would recommend Chromium-based browser, for example, Chrome, Vivaldi, Brave or Opera. Here is the latest information on AV1 support https://caniuse.com/#feat=av1

Note 2: For Firefox 66 in Linux, you will need to set the media.av1.enabled flag to true in about:config

Note 3: I decided not to include the usual GIFs below because of their large size and the amount of data that might be required to load this page! (What would be ironic, because this page is about reducing the amount of data on the page :)). But you can see the final GIFs here https://github.com/singhkays/its-time-replace-gifs-with-av1-video/blob/master/GIFs

Translator's note: Habr does not allow you to enable autoplay and loop the file, so only the quality will be evaluated. You can see how live animated images will look like in the original article .

Scene 1 @ 200 Kbps

There is a lot of movement, which is especially sensitive at low bitrates. Immediately you can see how bad H.264 on this bitrate squares are immediately visible. VP9 improves the situation a bit, but the squares are still visible. AV1 clearly wins, delivering an apparently better picture.

H.264

VP9

AV1

Scene 2 @ 200 Kbps

There are a lot of translucent CGI content. The results do not differ as much as last time, but in general AV1 looks better.

H.264

VP9

AV1

Scene 3 @ 100 Kbps

In this scene, we twist the bitrate down to 100 Kbps and the results are consistent. AV1 keeps leadership at low bitrates!

H.264

VP9

AV1

Cherry on the cake

To finish the article, having felt the amount of saved traffic compared to GIF - the total size of all videos is higher ... 1.62 MB !! Right. Some fucking 1,708,032 bytes! For comparison, here is the size of the video GIF and AV1 for each of the scenes.

Just amazing! Is not it?

Note: The sizes of the VP9 and H264 files are not given, since they practically do not differ from AV1 due to the use of the same bit rate. It would be redundant to add two more columns with the same size, only to emphasize that these codecs provide much better quality than GIF with much smaller file sizes.