It's 2019 now, and it's time for us to make a decision regarding GIFs ( — this is about pronunciation in English, which is not relevant for us — translator's note.). GIFs take up a huge amount of space (usually several megabytes!), which, if you're a web developer, completely contradicts your intentions! As a web developer, you want to minimize the things users need to download for the website to load quickly. For the same reason, you minimize JavaScript, optimize PNGs, JPEGs, and sometimes convert . But what to do with the old GIF?
Where we're heading, GIFs won't be needed!
If your goal is to improve website loading speed, then you need to get rid of GIFs! But how do you create animated images then? The answer is video. And in most cases, you will achieve better quality and save 50-90% of space! In life, most things have their pros and cons. When you replace GIFs with videos, you often won't find many downsides.
Out with all GIFs!
Fortunately, replacing GIFs with videos has been common practice in recent years, so all the necessary tools are already available. In this post, I won't reinvent the wheel, but will just slightly improve the existing solutions. So here's the essence:
- Take a GIF and convert it to video
- Encode the video using H.264 or VP9, that is, compress it and package it in MP4 or WebM container
- Replace
<img>the animated GIF witha video - Enable autoplay without sound and loop it to achieve the GIF effect
It's 2019 now
It's 2019 now. Progress is moving forward, and we must not lag behind. Until now, we have had two codec options that are widely supported across all browsers and video encoding tools:
- H.264 — introduced in 2003 and most widely used today
- VP9, which is supported by about ¾ of the browser market (including mobile devices). — introduced in 2013 and has achieved nearly 50% better compression compared to H.264, although not everything is as rosy as it seems
Note: even though H.265 standard is the next version of H.264 and can compete with VP9, I won't consider it due to poor browser support, as shown on the page Licensing expenses are the main reason why H.265 hasn't become as widespread as H.264 and why the Alliance of Open Media consortium is working with a royalty-free codec — AV1.
Remember, our goal is to reduce huge GIFs to the smallest possible size to speed up loading. It would be a strange 2019 if we didn't have a new standard for video compression in our arsenal. But we do, and it’s called AV1. With AV1, we can Beautiful! 🙂
AV1 has been available since 2019!
On desktops,
recently, AV1 video decoding support was added to the desktop versions of and Right now, Firefox's support is buggy and may cause crashes, but things should change with the addition of already available in Firefox 67. ( - translator's note)For details on the new version, read —
On smartphones,
hardware support for smartphones is currently lacking due to the absence of appropriate decoders. Software decoding can be done, but this will increase battery consumption. The first mobile SOCs with hardware support for AV1 will appear in 2020.
And here readers might wonder, "If mobile devices don't support it well yet, why use AV1 at all?"
AV1 is a relatively new codec, and we are at the beginning of its adoption. Think of this article as a stage of "while you're preparing, the crowd is gathering." Desktop support will already speed up sites for part of the audience. Older codecs can serve as fallback scenarios when AV1 is not supported on the target device. However, as users transition to devices supporting AV1, everything will be ready. To achieve this, we need to create a video tag, as shown below, that will allow the browser to choose the preferred format — AV1 ->> VP9, which is supported by about ¾ of the browser market (including mobile devices). ->> H.264If a user has a really old device or a browser that doesn't support video at all, (which is quite unlikely with H.264), they will simply see a 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>Creating AV1
Creating video in AV1 is not difficult. and use the commands below. We use 2 passes to achieve the target bitrate. For this, we will run ffmpeg twice. The first time we will write the output to a non-existent file. This will create a log that we will need for the second ffmpeg run.
# 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.mp4Here’s a breakdown of the parameters:
-i - Input file.
-pix_fmt - Use format 4:2:0 to select color information in the video. There are many other possible formats, but 4:2:0 is the most compatible.
-c:v - Which codec to use, in our case - AV1.<br />
-b:v – Average bitrate that we want to achieve.
-filter:v scale - The ffmpeg scaling filter is used to reduce video resolution. We set X:-1 which tells ffmpeg to reduce the width to X while maintaining the aspect ratio.
-strict experimental - This needs to be specified, as AV1 is a fairly new codec.
-cpu-used - Awfully named parameter that is actually used to select the video quality level. Possible values are 0-4. The lower the value, the better the quality and, correspondingly, the longer the encoding time.
-tile-columns - For using multiple threads. It tells AV1 to break the video into separate columns that can be re-encoded independently for better CPU utilization.
-row-mt – Similar to the previous parameter, but also breaks down into rows within columns.
-threads - Number of threads.
-pass - Which pass is currently being performed.
-f - Used only during the first pass. Specifies the format of the output file, i.e., MP4 in our case.
-movflags faststart - Enables fast start for the video by moving part of the data to the beginning of the file. This allows playback to start before the complete file is fully loaded.
Creating GIF
To create the GIF, I used the command shown below. To reduce the size, I scaled the GIF to 720px in width and 12 fps instead of the original video’s 24 fps.
./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.gifTest results
It's better to see something once than to read about it a hundred times, isn't it? Let's make sure that AV1 is the right choice for our purposes. I took the free video Tears Of Steel, available here , and converted it using approximately the same bitrate for the AV1, VP9, and H.264 codecs. The results are below, so you can compare them yourself.
Note 1: If the file below won’t load for you, it's time to upgrade your browser. I would recommend a Chromium-based browser such as Chrome, Vivaldi, Brave, or Opera. Here’s the latest information on AV1 support
Note 2: For Firefox 66 on Linux, you will need to enable the flag media.av1.enabled to true downward API support (simultaneously with this in about:config
Note 3: I decided not to include the regular GIFs below due to their large size and the amount of data that would be required to load this page! (Which would be ironic since this page is about reducing page data :)). But you can view the final GIFs here
Translator's note: Habr does not allow enabling autoplay and looping for the file, so quality can only be assessed. You can see how the 'animated images' will look live in .
Scene 1 @ 200 Kbps
There's a lot of movement here, which is especially noticeable at low bitrates. H.264 looks particularly bad at this bitrate, showing obvious squares. VP9 improves the situation a bit, but squares are still visible. AV1 clearly wins, delivering a much better picture.
H.264
VP9, which is supported by about ¾ of the browser market (including mobile devices).
AV1
Scene 2 @ 200 Kbps
There is a lot of semi-transparent CGI content here. The results are not as different as before, but overall AV1 looks better.
H.264
VP9, which is supported by about ¾ of the browser market (including mobile devices).
AV1
Scene 3 @ 100 Kbps
In this scene, we reduce the bitrate down to 100 Kbps, and the results reflect that. AV1 maintains its lead even at low bitrates!
H.264
VP9, which is supported by about ¾ of the browser market (including mobile devices).
AV1
The cherry on top
To conclude the article, feeling the amount of traffic saved compared to GIF — the total size of all videos above… 1.62 MB!! Exactly. A staggering 1,708,032 bytes! For comparison, here are the sizes of GIF and AV1 videos for each scene.
GIF
AV1
Scene 1
11.7 MB
0.33 MB
Scene 2
7.27 MB
0.18 MB
Scene 3
5.62 MB
0.088 MB
Simply astonishing! Isn't it?
Note: The file sizes for VP9 and H264 are not listed, as they are virtually identical to AV1 due to using the same bitrate. It would be redundant to add two more columns with the same sizes just to emphasize that these codecs deliver much better quality than GIF at significantly smaller file sizes.
Source: habr.com
