Animated image compression
Once upon a time someone explained how he was making gif animations to post on imageboards. The process sounded extremely unwieldy to me; having to find the time and crop position from the video manually and write 2 different command line commands by hand. This inspired me to make EasyVideoCrop, which turned out to only take a few days of my time for the basic functionality.
The hardest part of making EasyVideoCrop, by far, is figuring out how to make effectively compressed animations. Since the goal is to get a small file size so you can post it online, and since I was making a tool that makes the file for you, the amount of steps or complexity required and the time it took to process the image were not important. The only thing that matters is how to get the smallest filesize for the best possible quality.
Very early on I discovered that ffmpeg is a complete pile of crap at making optimized .gif animations. I'd get all kinds of bad results from crazy amounts of noise appearing for no reason, to weird color problems like red colors entirely disappearing from the image and becoming gray. To be fair ffmpeg is a video encoding tool so I don't fault it too much for not being good at opimizing ancient image files that are limited to 256 colors.
Imagemagick is the tool that allowed me to make proper gifs. In order to turn a video into a gif with imagemagick, you have to first extract the frames from the video into separate image files, that's what ffmpeg is very good for.
The problem with Imagemagick is that open source documentation is often not the greatest.
Yeah, so when are you explaining what "segments" are? Never? Oh.
From 0 to 100? from -1.0 to 1.0? What does this even sharpen?What's the difference between this and the ACTUAL sharpen filter (-sharpen)?
This tool is literally over 30 years old.
The only meaningful piece of optimization I have managed to find for gifs is fuzzing, and that's something I got from the guy who was making gif animations, not from the documentation. It compares the pixels of a frame to the previous frame, and if the color difference is smaller than X%, the pixel is ignored. This allows large portions of most frames to be transparent, which is the primary method that gifs use to optimize animations. If you use too high fuzz value, it leaves glitchy artifact trails like this:
I'm sure there's many more ways to optimize gifs such as using dither patterns, but I have not been able to figure out how to get good results.
Even if you do manage to optimize a gif, it's still not well suited for photographic videos. Video formats use much more advanced techniques for compressing motion of smooth color gradients, but websites tend not to allow you to post videos, let alone auto-playing it like the gif above, and animated thumbnails are a daydream at best.
Webp to the rescue
While gif was invented somewhere in 1987 when computers were weak and technology was less advanced, webp is a much newer image format that uses some modern video compression techniques (namely those used by the VP8 .webm videos) to get smaller filesizes. In fact it's so new that there's still some web browsers that don't support it (though that is in part because of corporate control wars and negligence rather than newness).
I'll just jump straight to the comparison, starting with a gif animation:
At 8 megabytes, that's pretty heavy to put into a website, and even at that size you can see noise and artifacts everywhere, it looks like something is smeared into the camera. Here's a webp with quality set to 60 (out of 100):
You can further enhance it by sharpening it a little. Sharpening increases filesize so you'll have to use a lower quality setting to get the same filesize. This increases glitchy artifacts a little, but makes details clearer. You may need sharp heh eyes to see the difference:
Here's a still frame comparison of webp quality 60, and sharpened quality 40, pay attention to the clothes, faces, and fur in particular, even the dirt and grass is more crisp:
There's some glitchy artifacts mainly in the sky and the balloons, but for the most part the image quality with webp is substantially better, yet the filesize is less than a third of the gif. Even if you make a webp with quality 80 which has no clear artifacts and is practically video quality, the filesize is still only 3.67 MB, less than half (45%) of the gif.
Certain animations compress even better, take for instance this:
The webp is 7 times smaller yet it has better apparent quality, and effectively no glitchy artifacts. The webp looks more blurry if you pause the animation and zoom in, but it's not noticeable when the animation is playing. That's the key to advanced compression: removing details that aren't easily noticeable and keeping the details that are.
These are results with the default settings on imagemagick. It may be possible to further optimize these, but unfortunately the documentation fails me again. I can't find good information about how to optimize webp animations. Possibly relevant settings are:
-define webp:method=6 supposedly determines how much effort imagemagick puts into compressing, it's 4 by default and 6 is the maximum.
-define webp:sns-strength=100 same thing; tries to put more effort into finding better places for detail, 80 by default and 100 is max.
It's very hard to gauge the reliability of these settings because they don't have a consistent effect on either filesize or quality. In one case method seemed to make visual artifacts more obvious, and sns-strength increases filesize by a bit. It's hard to say how consistent and reliable they are, the only consistency is that method=6 lowers filesize by 1-10% and sns=100 increases it by 1-10%, I'm just not sure what other effects are involved.
Webm and mp4 video formats have settings that let you tweak reference frames and all kinds of settings, and those settings are somewhat more broadly documented because videos have a bigger industry behind them than animated images, but I'm not sure if they can be applied to webp or how.
From my experiments, imagemagick and ffmpeg seem to produce almost identical webps so I can't tell which one is better, I couldn't make any ffmpeg setting do anything noticeably useful, and the imagemagick settings didn't seem to give meaningful results either.
If you're curious, here's more webps with different quality values.
EasyVideoCrop doesn't support webp yet, but I'm planning to add that shortly. I'll be needing it for this website.
Animated thumbnails
The goal of a thumbnail is usually not to show the image, but for the viewer to click to open the image that they want to see. The thumbnail itself just needs to convey what the image is, so it may be acceptable to compress it by a lot.
If you want to make a website like an imageboard, you may want to show animated thumbnails on posts. Imageboards are usually ran by individuals for free with a cheap or even a self hosted server, they make no profit and have no ads or any kind of revenue, therefore minimizing server load is very important.
Webp is excellent for this since it supports animation and transparency at the same time, so it works for any and all images, including animated gifs.
A completely separate concern with transparent animations is this effect:
In order to get rid of the trails, you have to dispose the previous frame, which is incompatible with the gif fuzz optimization in imagemagick. You can get around it by converting the frames into a gif with dispose, then converting the gif into another gif with fuzz. That may be a problem for a web server because it increases the processing time to create the image. Imagemagick has no trouble optimizing a webp even if you dispose the previous frame, so that's another plus for webp.
Here's a bunch of thumbnail comparisons between gif and webp, all of the gifs were made with 10% fuzz, and all the webps at quality 30:
That's probably way more thumbnails than I needed, but I don't know which ones to pick.
The webp thumbnails are somewhat more blurry, but for a thumbnail it's not very important. The filesize gains that can be made are significant though, with webps being up to 6 times smaller.
The gif thumbnails combined are 6.28 MB, and the webp thumbnails combined are 2.17 MB, so the gif thumbnails are on average about 3 times larger, which is a big deal for a website.
(including neocities which has a 1 GB website limit and is kinda slow for unpaid sites)
Unfortunately the best animation didn't survive conversion in either case.
Some animations are just hard to compress properly for some reason, you'd just have to increase the quality to avoid problems like that, you would need a quality all the way up at 70 or 80 to get rid of the problem in this particular case. At 70 it would still be only 75 KB though, 25% smaller than the gif that looks like crap.
You can typically fix problems like this in videos by increasing reference frames (which basically makes the video encoder look at more nearby frames to figure out what's the best thing to do), but I don't know if it's possible for webp.
As a last note, if you wanted to make an automated thumbnail generator for a website, then another concern that you need to take into account is processing time. If you make a social media website or a forum and it gains popularity, then it's important that the server doesn't get choked on all the images it has to process.
You may want to put a limit on the number of frames, because some animations have a ton of frames which increases processing time a lot. The thumbnail obviously won't show the entire animation though.
I did some experiments in the past and found that ffmpeg was much faster than imagemagick at creating webp thumbnails, and also had better support for APNG animations. It was quite a while ago though and I was less familiar with these tools, so take that with a grain of salt.
ffmpeg / imagemagick commands
ffmpeg
Extract animation frames from a video (warning: this will put a lot of files in the output folder):
ffmpeg -ss 00:00:00.000 -i "VIDEOFILEPATH" -t 00:00:00.000 -filter:v crop=WIDTH:HEIGHT:X:Y,scale=WIDTH:HEIGHT -y "OUTPUTPATH/frame_%04d.png"
-ss= start time.-t= duration.-i= input file path.-filter:v= video filter (i.e. not an audio filter).crop/scale= self explanatory. You can remove either one, or even both (also remove -filter:v if you remove both).-y= do not ask for confirmation if the output files already exist.frame_%04d= each frame that gets outputted will have a 4 digit number in the filename.%04dis a special formatting tag that means "incremenetal number with 4 digits".
imagemagick
Turn the animation frames into a gif:
magick -delay 1x24 "FRAMESPATH/frame_*.png" -fuzz 5% -layers OptimizeTransparency +fuzz "OUTPUTPATH.gif"
-delay 1x24= how fast each frame is. The 24 must be replaced with the video framerate.frame_*= searches for files with numbers in place of the *.-fuzz 5% -layers OptimizeTransparency +fuzz= uses 5% fuzz. I'm not exactly sure why these commands are split like this, but all 3 of these commands need to be used for this to work.
Turn the animation frames into a webp:
magick -delay 1x24 "FRAMESPATH/frame_*.png" -quality 50 "OUTPUTPATH.webp"
-quality= from 0 to 100, higher means better quality, lower means smaller filesize.
Turn animation frames with transparency into a gif:
magick -delay 1x24 -dispose Background "FRAMESPATH/frame_*.png" "OUTPUTPATH.gif"
-dispose Background= each frame deletes the previous frame.
Turn a gif into an optimized gif (you can also convert a gif to a webp):
magick "IMAGEPATH.gif" -coalesce -fuzz 5% -layers OptimizeTransparency +fuzz "OUTPUTPATH.webp"
- Note that you no longer need -delay, since the speed comes from the gif. You can use it to change the animation speed though.
-coalesce= the source gif may be using frame optimizations that will mess up the animation. Long story short is that this setting fixes it, though it increases the processing time.
Sharpen:
-unsharp 0x2+0.5+0.1
- 2 = radius, 0.5 = amount, 0.1 = treshold.
Notes:
This page is mostly about animations made out of videos. For sprites, pixel art, and very tiny icons, gif may still be better because those are the perfect case for gif. Webp also has a lossless mode which may be able to beat gif for these cases, but I haven't tried it.
APNG is technically better at compressing animations than gif, but it is difficult to crunch it down like what you can do with a gif. Gif is inherently lossy and simplifies the color palette, while png is usually assumed to be full-color and lossless, so you'd have to find some special function to palettize the png. There are some lossy png compressors but they're rare and obscure and almost certainly won't work with animated pngs. Apng is not well supported by browsers and programs. Furthermore, since webp supports everything that apng does but also has video compression and is better supported, there's no real reason to ever use apng except for archival or full-size art.
A concern that I did not address in this page is CPU usage when viewing the animation. I don't know how to measure the CPU usage of webp vs gif, but webp probably requires slightly more processing power to render on the page. It may be a concern if you're planning to show a whole lot of animated images on the screen at the same time.