Detailed explanation of various types of image formats such as JPG, GIF and PNG

Everyone knows that images on web pages are generally in jpg, gif and png formats. What are the differences between them? After reading the following content, you may have your own conclusion.
--------------------------------------------------------------------------------
GIF format features :
Transparency
Gif is a Boolean transparency type, which means it can be fully transparent or fully opaque, but it is not translucent (alpha transparency).
Animation
The Gif format supports animation.
Lossless
Gif is a lossless image format, which means you can do anything with the gif image without losing image quality.
Horizontal Scan
Gif is compressed using an algorithm called LZW. When compressing gif, pixels are compressed horizontally from top to bottom. This means that under the same conditions, horizontal gif images are smaller than vertical gif images. For example, a 500*10 image is displayed progressively with smaller intervals than a 10*500 image.
Gif supports selective interval progressive display. From the above characteristics, it can be seen that gif images with only 256 colors are not suitable as photos. They are suitable for graphics that do not require high colors.
--------------------------------------------------------------------------------
Jpeg format features :
Transparency It does not support transparency.
Animation It also does not support animation.
Lossless Except for some operations such as rotation (only 90, 180, 270 degrees), cropping, changing from standard type to advanced type, and editing the original data of the image, all other operations on the JPEG image will cause its quality loss. Therefore, we generally use png as a transition format during the editing process.
Interlaced progressive display It supports interlaced progressive display (but IE browser does not support this attribute, but IE will display it when the entire image information is fully arrived).
From the above we can see that Jpeg is the most suitable for photographic images on the web and in digital cameras.
--------------------------------------------------------------------------------
Png format features :
Transparency
Png fully supports alpha transparency (transparent, semi-transparent, opaque), although there are two quirks in IE6 (discussed in detail below):
Animation It does not support lossless animation
PNG is a lossless image format, which means you can do anything with the PNG image without losing image quality. This also makes PNG a transitional format for JPEG editing. Horizontal scanning. Like GIF, PNG is also horizontally scanned, which means that horizontally repeated colors are smaller than vertically repeated colors. Interval progressive display. It supports interval progressive display, but it will cause the image size to become larger. The first type of PNG is called PNG8 (Boolean transparency), which can be simply understood as a static GIF.
They both have only 256 colors and support indexed transparency, which is to specify whether a pixel is transparent or not. The second type of PNG is also called PNG8 (Alpha transparency). You can specify the transparency of a pixel, for example, 50% transparency. The advantage is that it is smaller than PNG24/32, but the effect is the same. The disadvantage is that IE6 does not support it well, and will display semi-transparent pixels as fully transparent. The third type of PNG is called PNG24
PNG24 is not transparent, but has many colors, more than 256 colors. The png24 exported in Photoshop is actually png32.
The fourth type of PNG is called PNG32
Like Photoshop's PSD, it is the default source file format for Fireworks, containing layer and channel information. The difference from PNG24 is that it has more transparency information. The disadvantage is that IE6 does not support it well, and will display transparent areas as a blue-gray background: it can only be done through the AlphaImageLoader method that affects performance and requires special tags (VML).
Note :
Boolean transparent png8 can be displayed normally in any browser (just like gif).
Alpha transparent png8 is incorrectly displayed as fully transparent in browsers other than IE6 and below, but all other browsers can display it normally.
Photoshop can only export PNG8 with Boolean transparency. (Some png8 may have rough edges under IE6, because text, rounded corners, etc. usually have the effect of weakening the edges. You can trim them before exporting)
Fireworks can export both Boolean transparent PNG8 and alpha transparent PNG8.
--------------------------------------------------------------------------------
Comparison of other image formats with PNG :
It is well known that GIF is suitable for graphics, JPEG is suitable for photos, and the PNG series is suitable for both.
Compared to GIF
For the same color value, gif format images will be smaller than png32 format images. But png8 is the best choice.
PNG8 has all the features of GIF except that it does not support animation. However, its advantage over GIF is that it supports alpha transparency and better compression. So, in most cases, you should use PNG8 instead of GIF (except for very small images where GIF will compress better).
Compared to JPEG
JPEG has better compression than full-color PNG, which makes JPEG suitable for photos, but it is easy to cause quality loss during the editing of JPEG, so full-color PNG is suitable as a transitional format for editing JPEG.

<<: Summary of CSS counter and content

>>: Implementation of services in docker accessing host services