GIF, WebP, APNG, BPG animation comparison
To create the effect of movement, you need to repeat a slightly modified image with a fairly high speed. For example, in a movie, this speed is 24 frames per second. The higher it is, the movement looks smoother.
Neighboring frames should not be very different. When we shoot on a video camera, it turns out by itself, but if you draw in the editor, you can forget about it, and Malvina will walk like Buratino.
This principle is used in animated graphic files. They contain not one image, but a series of picture frames. Each frame knows how many milliseconds it should be displayed.
')
And there is one problem. The size of one second animation with 24 frames will weigh 24 times the static image. To correct the situation, use image compression.
So there is a file. It has only two colors - black and blue. Then the color can be encoded in one bit. The horizontal size is 20, vertically - 1. In total, it takes 20x1x1 = 20 bits.
In the row, the first seven points have the first color, then the six points - the second, and the remaining points in the row are again painted in the first color. You can record this way: repeat the color 1 - 7 times, color 2 - 6 times, color 1 - 7 times (1x7 2x6 1x7).
The benefit does not seem obvious, but if you stretch the file-line 1000 times to 20 kilobits, the record will increase quite slightly: 1x7000 2x6000 1x7000. With an increase in the size of the source file, the benefit from compression will only grow.
Compression is applied for each frame of animation. If in the second 24 frames, then it will work 24 times. Without this, the animation files would be very large.
This is a very old format. All browsers show it. It has a transparent layer, i.e. under the picture you will see the background on which it lies. For animation saves a series of full pictures. This is a minus. A file with 24 frames will be 24 times larger than the original static one. Partially, it can be corrected by the fact that some frames may contain a transparent layer plus changes from the previous frame.
GIF only shows 256 colors. This can be corrected with animation. We create two pictures with a different set of colors. We demonstrate them with a delay of 0. As a result, we get 256 + 256 = 512 colors.
The format well compresses the image without loss. For small pictures, this is important.
This format (Animated PNG) is an extension of the common PNG format. However, the developers of the latter did not include this extension in the specification. It turned out that few programs can display it correctly. Most browsers will show the first frame with a static picture, and forget about the animation.
It is unlikely that the format will be widely used. Moreover, new powerful competitors have appeared.
This format appeared in 2010. The developer, Google, is positioning it as a replacement for GIF and other formats. WEBP has all the features of GIF, but only in an improved version:
The format is not yet supported everywhere. For example, Android can work with it, starting with version 4.0. Chrome browsers - from version 9, Opera - from version 11.10. Other browsers do not yet support the format (June 2015). You can follow its development here (list of browsers with WEBP support) and here (project home page).
BPG is the newest. It was proposed at the end of 2014. The format is positioned as a replacement for JPEG with significant improvements. Image compression will be more efficient than that of the ancestor. Animation support will appear (JPEG cannot do this). But the format is just beginning its development, it is still impossible to recommend it for use, but you can follow it.
There are two great packages ImageMagick and GraphicsMagic . Using ImageMagic creates animation from * .gif images:
The convert command picks up all the * .gif files in the directory, sorts them alphabetically and inserts them in a new file animated.gif.
Check (a small graphic container with a cartoon will start):
Converting cartoon to APNG format:
If you use GraphicsMagic , then the commands are:
This time the output format is WEBP. BPG is similarly processed.
It is also possible to pull the animation in GIF from video files. For example, using the libav-tools package, import video from MP4:
You can see the difference between GIF, WebP and APNG animations in different formats here . Here is an example .
How to create an animation
Neighboring frames should not be very different. When we shoot on a video camera, it turns out by itself, but if you draw in the editor, you can forget about it, and Malvina will walk like Buratino.
This principle is used in animated graphic files. They contain not one image, but a series of picture frames. Each frame knows how many milliseconds it should be displayed.
')
And there is one problem. The size of one second animation with 24 frames will weigh 24 times the static image. To correct the situation, use image compression.
An example of an abstract compression algorithm
So there is a file. It has only two colors - black and blue. Then the color can be encoded in one bit. The horizontal size is 20, vertically - 1. In total, it takes 20x1x1 = 20 bits.
In the row, the first seven points have the first color, then the six points - the second, and the remaining points in the row are again painted in the first color. You can record this way: repeat the color 1 - 7 times, color 2 - 6 times, color 1 - 7 times (1x7 2x6 1x7).
The benefit does not seem obvious, but if you stretch the file-line 1000 times to 20 kilobits, the record will increase quite slightly: 1x7000 2x6000 1x7000. With an increase in the size of the source file, the benefit from compression will only grow.
Compression is applied for each frame of animation. If in the second 24 frames, then it will work 24 times. Without this, the animation files would be very large.
Animated formats
Gif format
This is a very old format. All browsers show it. It has a transparent layer, i.e. under the picture you will see the background on which it lies. For animation saves a series of full pictures. This is a minus. A file with 24 frames will be 24 times larger than the original static one. Partially, it can be corrected by the fact that some frames may contain a transparent layer plus changes from the previous frame.
GIF only shows 256 colors. This can be corrected with animation. We create two pictures with a different set of colors. We demonstrate them with a delay of 0. As a result, we get 256 + 256 = 512 colors.
The format well compresses the image without loss. For small pictures, this is important.
APNG format
This format (Animated PNG) is an extension of the common PNG format. However, the developers of the latter did not include this extension in the specification. It turned out that few programs can display it correctly. Most browsers will show the first frame with a static picture, and forget about the animation.
It is unlikely that the format will be widely used. Moreover, new powerful competitors have appeared.
WEBP format
This format appeared in 2010. The developer, Google, is positioning it as a replacement for GIF and other formats. WEBP has all the features of GIF, but only in an improved version:
- More efficient with transparent layers.
- During animation, the next frame stores only the changes of the previous one. And if so, then the size of the animated file is reduced.
- The image is compressed more efficiently.
The format is not yet supported everywhere. For example, Android can work with it, starting with version 4.0. Chrome browsers - from version 9, Opera - from version 11.10. Other browsers do not yet support the format (June 2015). You can follow its development here (list of browsers with WEBP support) and here (project home page).
BPG format
BPG is the newest. It was proposed at the end of 2014. The format is positioned as a replacement for JPEG with significant improvements. Image compression will be more efficient than that of the ancestor. Animation support will appear (JPEG cannot do this). But the format is just beginning its development, it is still impossible to recommend it for use, but you can follow it.
Work with GIF, APNG and WEBP in the CLI
There are two great packages ImageMagick and GraphicsMagic . Using ImageMagic creates animation from * .gif images:
onvert -delay 150 -loop 10 *.gif animated.gif The convert command picks up all the * .gif files in the directory, sorts them alphabetically and inserts them in a new file animated.gif.
Check (a small graphic container with a cartoon will start):
animate animated.gif Converting cartoon to APNG format:
convert animated.gif animated.apng If you use GraphicsMagic , then the commands are:
gm convert -delay 150 -loop 100 *.gif animated.webp gm animate animated.webp This time the output format is WEBP. BPG is similarly processed.
It is also possible to pull the animation in GIF from video files. For example, using the libav-tools package, import video from MP4:
avconv -i inputfile.mp4 -pix_fmt rgb24 output.gif You can see the difference between GIF, WebP and APNG animations in different formats here . Here is an example .
Abstract
- Four formats support animation: GIF, APNG, WEBP and BPG.
- You can generate gifs using ImageMagick and GraphicsMagick.
- While it is better to store the animation in the GIF and follow the development of other formats.
Source: https://habr.com/ru/post/261083/
All Articles