In this project, two GIF pictures seriously affect the loading speed (two pictures account for 97.3% of the total size of the project). Therefore, it is very necessary to optimize the size of these two files.
WebP is a modern image format that provides superior lossless and lossy compression for images on the web. WebP requires fewer bytes than GIF. This is especially important on mobile networks. [1]
Meanwhile, the front-end compatibility of webp is enough to meet the requirements at present. Lossy WebP images are supported in Android 4.0 (API level 14) and higher, and lossless and transparent WebP images are supported in Android 4.3 (API level 18) and higher[2]. The WebP browser compatibility is as follows[3]:
Feature |
Chrome |
Edge |
Firefox |
Internet Explorer |
Opera |
Safari |
Animation |
32 |
18 |
65 |
no |
19 (Blink) |
14 |
Thus, I chose to use webp format instead of GIF file to reduce the file size.
The tool I use is ffmpeg 4.4 (encoder: Lavc58.134.100 libwebp_anim). In the transcoding process, I am mainly concerned about two parameters: compression_level and qscale. First, a series of tests are carried out on compression_level:
>ffmpeg -i bubu.gif -c:v webp -compression_level 0 bubu_c0.webp
compression_level |
file size / kB |
(Original GIF file) |
9845 |
0 |
2321 |
1 |
2005 |
2 |
1767 |
3 |
1694 |
4 (default) |
1696 |
5 |
1489 |
6 |
1435 |
For me, when the compression level is 5, the file size is relatively small, while the transcoding time is acceptable.
Further, I empirically take qscale as 60 to get a better file size (the default value is 75).
>ffmpeg -i bubu.gif -c:v webp -compression_level 5 -q:v 60 bubu_c5_q60.webp
qscale |
file size / kB |
75 (default) |
1489 |
60 |
1100 |
The total size of the final animated images is 1.28Mb, which reduces the file size by 88% compared with the original 10.9Mb, greatly accelerating the loading of web pages.
webp_images.zip
![ceeb653ely8gqwwwzod83g208706oe2g](https://user-images.githubusercontent.com/67589323/143169779-b92ac744-1e03-4d3a-bb2d-d4dafc127103.gif)