Hi, guys!
What format do you use when you really need to convert a movie file such as mp4 to an animation image file?
I think the most popular solution is to convert to gif, but it only supports 256 colors, so in recent years it is better to use animation png or webp. And the file size varies depending on whether the movie file has a large number of pixels or a small number of pixels, and most importantly, has it been converted beautifully? Wouldn't you like to see with your own eyes whether the file size is different depending on whether the movie file has many or few pixels?
Today, I've tried to make some animated images from some movie files using FFmpeg to make them clearer,and let's find out the best way to do this in 2022!
About formats
| Name | Extension | Number of pixels | Alpha Channel |
|---|---|---|---|
| GIF | .gif | 256 | OK |
| Animation PNG | .apng/.png | full colors | OK |
| WebP | webp | full colors | OK |
In Japan, animation png is one of the famous image formats in the sticker function of the SNS chat application called LINE.
Commands
The original movie files are mov file (fps60) that captures the screen of my Mac, and I used ffmpeg and other tools to converted these files.(I used a Raspberry Pi as the conversion machine.)
-- gif --
# Don't set anything and just make a gif.
ffmpeg -i gradation.mov gradation_default.gif
# with fps10 and a color palette.
ffmpeg -i gradation.mov -filter_complex "[0:v] fps=10:-1,split [a][b];[a] palettegen [p];[b][p] paletteuse" gradation_palette.gif
-- apng --
# Don't set anything and just make an apng(Infinite loop).
ffmpeg -i gradation.mov -plays 0 gradation_default.apng
ffmpeg -i gradation.mov -plays 0 -framerate 10 gradation_fps10.apng
# with fps10 and a color palette.
# ffmpeg -i gradation.mov -vf palettegen g_palette.png #I made a color palette once I got curious.
# About 0.3x, which might be the slowest.
ffmpeg -i gradation.mov -i g_palette.png -framerate 10 -filter_complex paletteuse -plays 0 gradation_palette.apng
# use gif2apng
gif2apng gradation_palette.gif gradation_palette2.apng
-- webp --
# Don't set anything and just make a webp(Infinite loop).
ffmpeg -i gradation.mov -loop 0 gradation_default.webp
# with fps10 and the highest quality
ffmpeg -i gradation.mov -vcodec libwebp -quality 100 -filter:v fps=fps=10 -lossless 0 -loop 0 -an -vsync 0 gradation_10_q100.webp
# with fps10 and the lowest quality
ffmpeg -i gradation.mov -vcodec libwebp -quality 0 -filter:v fps=fps=10 -lossless 0 -loop 0 -an -vsync 0 gradation_10_q000.webp
# with fps10 and preset is 4 and compression level is 6(the highest.)
ffmpeg -i gradation.mov -vcodec libwebp -compression_level 6 -filter:v fps=fps=10 -lossless 0 -loop 0 -preset 4 -an -vsync 0 gradation_10_lv6.webp
# with fps10 and preset is 4 and compression level is zero(the lowest.)
ffmpeg -i gradation.mov -vcodec libwebp -compression_level 0 -filter:v fps=fps=10 -lossless 0 -loop 0 -preset 4 -an -vsync 0 gradation_10_lv0.webp
File size Results
st_count.mov
| extension | name | size | percentage |
|---|---|---|---|
| mov | original | 1.4MB | 100% |
| gif | st_count_default | 96K | 6.6% |
| gif | st_count_palette | 40K | 2.7% |
| apng | st_count_default | 732K | 51.0% |
| apng | st_count_fps10 | 732K | 51.0% |
| apng | st_count_palette | 192K | 13.3% |
| apng | st_count_palette2 | 40K | 2.7% |
| webp | st_count_default | 16K | 1.1% |
| webp | st_count_10_q100 | 1.5M | 107.1% |
| webp | st_count_10_q000 | 212K | 14.7% |
| webp | st_count_10_lv6 | 804K | 56% |
| webp | st_count_10_lv0 | 804K | 56% |
As mentioned above, if the original image has a small number of pixels, converting it to a gif without any options will not increase the file size.
| extension | name | size | percentage |
|---|---|---|---|
| mov | original | 1.8MB | 100% |
| gif | gradation_default | 1.1M | 61.1% |
| gif | gradation_palette | 2.2M | 122% |
| apng | gradation_default | 2.2M | 122% |
| apng | gradation_fps10 | 2.2M | 122% |
| apng | gradation_palette | 6.9M | 383% |
| apng | gradation_palette2 | 1.5M | 83% |
| webp | gradation_default | 35K | 1.8% |
| webp | gradation_10_q100 | 363K | 19.6% |
| webp | gradation_10_q000 | 71K | 3.8% |
| webp | gradation_10_lv6 | 120K | 6.5% |
| webp | gradation_10_lv0 | 120K | 6.5% |
In this case as well, the gifs with the specified color palette are larger than the original size. Also, all apngs (except gif2apng) are enlarged from their original size.
The problem is image quality.
Please take a look at this page and check it out for yourself.(Sorry, you can see Japanese on the screen, but it doesn't matter because it's just an image.)
The webp of the gradient is a concern, but I feel it is a concern by default (quality 75 if nothing is specified). The parameters also vary depending on the original movies, so I think the results are subtle. (Well, I guess you should use webm instead of webp for certain movies...)
I think it's a matter of "how much can you tolerate", so each of us must choose what you can compromise on.
(For the simple gradient shown in the sample, it is much better to animate the svg with css.)
Sum up
As expected, I was more concerned about the color reduction than the file size when making gifs without parameters.
If you don't care about the file size too much because IE is going to say good-bye, I think it would be a good idea to use WebP. (IE11 also works if you use the picture tags, but it's a pain to use different tags...)
However, there are many platforms that do not support WebP instead of their own sites, so you will need to be careful about that.
In 2022, there will be more options for images in various situations, so I would like to encourage everyone who runs a website or is a designer to think about it.
This will reduce server costs and reduce the number of traffic users have to deal with, which will definitely improve both costs and UX!
Top comments (0)