It's 2019 and it's time for us to make a decision about the GIF ( - here we are talking about pronunciation in English, for us this is not relevant - approx. transl.). GIFs take up a huge amount of space (usually several megabytes!) which, if you are a web developer, is completely against your desires! As a web developer, you want to minimize the things users need to download in order for the site to load quickly. For the same reason, you minify JavaScript, optimize PNG, JPEG, and sometimes convert . But what to do with the old GIF?
Where we're going, we won't need GIFs!
If your goal is to improve your site loading speed, then you need to get rid of GIFs! But how then to make animated pictures? The answer is video. And in most cases, you will get better quality and space savings of 50-90%! Most things in life have their pros and cons. When you replace a GIF with a video, you will most often not find any cons.
Down with all GIFs!
Luckily, replacing GIFs with videos has been commonplace in recent years, so all the tools you need are in place. In this post, I will not reinvent the wheel, but will only slightly improve the existing solutions. So here's the gist:
- Take GIF and convert it to video
- Encode video with H.264 or VP9 i.e. compress it and pack it into an MP4 or WebM container
- Replace
<img>with animated GIF on<video>with roller - Enable Autoplay Mute and Loop to Achieve GIF Effect
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 that are widely supported across all browsers and video encoding tools:
- H.264 - Introduced in 2003 and most widely used today
- VP9 — appeared in 2013 and achieved almost 50% improvement in compression compared to H.264, although not everything and not always so rosy
Note: although H.265 is the next version of H.264 and is capable of competing with VP9, I am not considering it due to poor browser support as shown on the page . Licensing costs are the main reason why H.265 has not become as common as H.264 and why the Alliance of Open Media consortium is working on a royalty-free codec, AV1.
Keep in mind that our goal is to reduce huge GIFs to the smallest possible size in order 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 it exists and is called AV1. With AV1 you can . Lepota! 🙂
AV1 is at your service since 2019!
On desktops
Recently support for AV1 video decoding has been added to desktop versions и . Right now support in Firefox is buggy and can cause crashes, but things should change with the addition of already in Firefox 67 ( - approx. transl.). For details about the new version read −
On smartphones
For smartphones, there is currently no hardware support 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 SOCs to support AV1 hardware decoding will arrive in 2020.
And here the readers of the article are like “so if mobile phones are not normally supported yet, why then use AV1?”
AV1 is a fairly new codec and we are at the very beginning of its adoption. Think of this article as the "while you're cooking, people are pulling up" stage. Support on desktops alone will already speed up sites for a part of the audience. And old codecs can be used as a fallback scenario 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 select the preferred format − AV1 - >> VP9 - >> H.264. Well, if the user has a very old device or navigator that does not support video at all (which is very unlikely with H264), then he will just 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>Creation of AV1
Creating a video in AV1 is easy. and use the commands below. We use 2 passes to reach the target bitrate. To do this, we will run ffmpeg twice. The first time we write the result to a non-existent file. This will create a log which will be 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.mp4Here is the breakdown 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 - Включаем быстрый старт видео, перемещая часть данных в начало файла. Это позволит начать воспроизведение ещё до полной загрузка файла.
Create a GIF
To create a GIF, I used the below command. To reduce the size, I scaled the GIF to 720px wide 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.gifTest results
It's 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 , and converted it using approximately the same bitrate for AV1, VP9, H.264 codecs. The results are below so you can compare them yourself.
1 Note: If the file below does not load for you, it may be time for you to update your browser. I would recommend a Chromium based browser like Chrome, Vivaldi, Brave or Opera. Here is the latest information on AV1 support
2 Note: For Firefox 66 on Linux you will need to set the flag media.av1.enabled in value true в about:config
3 Note: I chose not to include the regular GIFs below due to their large size and the amount of data it would take to load this page! (Which would be ironic since this page is about reducing the amount of data on the page :)). But you can see the resulting GIFs here
Translator's Note: Habr does not allow you to enable autoplay and loop the file, so you can only evaluate the quality. You can see how the “animated pictures” will look live in .
Scene 1 @ 200 Kbps
There is a lot of movement here, which is especially sensitive at low bitrates. You can immediately see how bad H.264 is at this bitrate, squares are immediately visible. VP9 improves things a bit, but the squares are still visible. AV1 clearly wins, giving the obviously better picture.
H.264
VP9
AV1
Scene 2 @ 200 Kbps
There is a lot of translucent CGI content here. The results are no longer as different as last time, but overall the AV1 looks better.
H.264
VP9
AV1
Scene 3 @ 100 Kbps
In this scene, we crank the bitrate down to 100 Kbps and the results match. AV1 maintains leadership even at low bitrates!
H.264
VP9
AV1
Cherry on the cake
To finish the article, feeling the amount of traffic saved 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 GIF and AV1 video size for each of the scenes
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 stunning! Is not it?
Note: The file sizes of VP9 and H264 are not shown, since they practically do not differ from AV1 due to the use of the same bitrate. It would be redundant to add two more columns with the same size, just to emphasize that these codecs produce much better quality than GIF at much smaller file sizes.
Source: habr.com