4 ms·
Great read, but the initial description of the inefficiencies in gif are off. They touch on it a bit at the end but make it vague so I'll explain it here (becau
by Gankro 10y ago
Great read, but the initial description of the inefficiencies in gif are off. They touch on it a bit at the end but make it vague so I'll explain it here (because I love gif because it's a hillarious mess).
Gif is actually a mosaic format. It defines a canvas on which you can render a series of images. By adding a (per image) delay between images, you can make an animation. All this data comes as a stream of blocks. Most are images, but some are extensions. The "NETSCAPE 2.0" extension is what makes gifs loop.
Nothing at all says an image needs to fill the whole canvas, and the format for rendering a new image specifies what should happen to the existing pixels. It also can specify a colour to be interpretted as transparent. Gif is also a palletized format, and you can actually abuse this to get more than 256 colours -- each subimage can have its own palette.
By picking "leave all the pixels there" as the transition format, you can do non-iframes by overlaying only pixels that have changed. You can also apply many small deltas "at once" with 0-second delays to optimize this further (think: only changing the corners of the image). You can then of course "stick" pixels to a single color of they don't change by much to avoid re-encoding them.
The end result of all these tricks is a pretty dramatic compression as one would expect from a "real" video format. It's not great but it's a lot better than the naive encoding described at the start of the article.
If you find a real gif that's "live action" and decode the individual frames, you will very likely see all these optimizations in action!
Note however that much of this is underspecified! The only reason your animated gifs work is because everyone vaguely agrees on an interpretation of certain things which are honestly quite ambiguous. Firefox's testsuite has a pile of ambiguous gifs which will render messed up in different image viewer applications!
Edit: this one is super cool to watch in delta-only mode (don't have that version on hand anymore): https://github.com/Gankro/gif-rs/blob/master/data/cat-jump.gif https://github.com/Gankro/gif-rs/blob/master/data/cat-jump.g...
- aikinai 10y agoDo you have a recommendation for an encoder that will make sure to apply all of these optimizations?