Image format with animations (WEBP, PNG, GIF)
Posted: Sat Apr 10, 2021 2:16 pm
So I have been dabbling with the WebP image format and its support for animations lately. This format is well-supported by major browsers by now, but not so well supported by forums, dA, site generators (like the one I use at TGS) etc. So I wanted to give it a try here and prepared a small sample animation (sized 1.252 KB) for upload. However that upload failed ("says "invalid file extension").
Instead I can use the img shortcut and reference WebP files at TGS (using larger ones here though, so this might take a while to load):
![Image](http://thegreatswamp.xyz/sample_anims/anim_720p_lossless.webp)
So this WebP animation is sized 52MB and uses lossless compression.
The content of the above WebP is exactly the same as this APNG:
![Image](http://thegreatswamp.xyz/sample_anims/anim_720p.png)
The APNG is quite a bit larger with 73MB. That surprised me a bit, as most comparisons I found elsewhere suggested there would be only a very minor difference in size.
But the real benefit of WebP is its lossy compression, which allows for this:
![Image](http://thegreatswamp.xyz/sample_anims/anim_720p_lossy_q95.webp)
I set the quality to 95% here, so the loss is barely visible (unlike my tests with 90% and lower). Even so the filesize was reduced to a mere 9.5MB.
I also wanted to show a GIF for comparison, but the conversion tool yielded such ugly results, that I decided to spare you the sight. It really is a dated format that only allows for 256 colors.
You may notice different animation speeds, because I set 30fps for these and some browsers will restrict APNG playback to 10fps. Not sure if any do that for WebP. It would be nice if QSF would support WebP at some point. Until then I will continue embedding these from my own webspace. And now that this little test is done, I shall get back to more rendering...![Smile :)](./images/smilies/icon_e_smile.gif)
Instead I can use the img shortcut and reference WebP files at TGS (using larger ones here though, so this might take a while to load):
![Image](http://thegreatswamp.xyz/sample_anims/anim_720p_lossless.webp)
So this WebP animation is sized 52MB and uses lossless compression.
The content of the above WebP is exactly the same as this APNG:
![Image](http://thegreatswamp.xyz/sample_anims/anim_720p.png)
The APNG is quite a bit larger with 73MB. That surprised me a bit, as most comparisons I found elsewhere suggested there would be only a very minor difference in size.
But the real benefit of WebP is its lossy compression, which allows for this:
![Image](http://thegreatswamp.xyz/sample_anims/anim_720p_lossy_q95.webp)
I set the quality to 95% here, so the loss is barely visible (unlike my tests with 90% and lower). Even so the filesize was reduced to a mere 9.5MB.
I also wanted to show a GIF for comparison, but the conversion tool yielded such ugly results, that I decided to spare you the sight. It really is a dated format that only allows for 256 colors.
You may notice different animation speeds, because I set 30fps for these and some browsers will restrict APNG playback to 10fps. Not sure if any do that for WebP. It would be nice if QSF would support WebP at some point. Until then I will continue embedding these from my own webspace. And now that this little test is done, I shall get back to more rendering...
![Smile :)](./images/smilies/icon_e_smile.gif)