DEV Community

Cover image for What's the best way how to a movie file convert to an animation image(animation gif or animation png or webP)?

What's the best way how to a movie file convert to an animation image(animation gif or animation png or webP)?

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

Enter fullscreen mode Exit fullscreen mode

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!

Discussion (0)