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:
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.
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]:
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.webpFor 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.webpThe 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