[Sorting] Details JPG, GIF, and PNG image formats

We all know that images on webpages are generally in JPG, GIF, and PNG formats. What are their differences? after reading the following content, you may come to your own conclusions.

 

GIF format features:

Transparency
GIF Is a Boolean transparent type, which can be both fully transparent and non-transparent, but it is not translucent ( Alpha Transparent ).
Animation
GIF This format supports animation.
No loss
GIF Is a lossless image format, which also means you can GIF The image will not be used for any operation. Produce loss of image quality.
Horizontal Scan
GIF Is called LZW OfAlgorithmFor compression, when the compression GIF In the process, pixels are compressed horizontally from top to bottom, which also means horizontal GIF Picture ratio vertical GIF Smaller images. For example 500 * 10 Image Ratio 10 * 500 Smaller Images
Progressive display of intervals
GIF Supports selective incremental display of intervals

From the above features, we can see that only256ColorGIFImages are not suitable for pictures. They are suitable for images with low color requirements.

 

JPEG format features:

Transparency
it does not support transparency.
animation
animation is not supported.
damage
for example, rotating (only 90 , 180 , 270 degree rotation ), crop, from the standard type to the advanced type, in addition to editing the original data of the image, all other operations on JPEG image processing will cause quality loss. Therefore, we generally use PNG as the transition format during the editing process.
step-by-step display
it supports step-by-step display (but ie browsers do not support this attribute, however, ie is displayed when the entire image information arrives completely ).

From the above we can see thatJPEGIs the most appropriateWebThe photo above and the digital camera.

 

PNG format features:

Transparency
PNG Yes Alpha Transparent (transparent, translucent, and opaque), although there are two strange phenomena in IE6 (The following is a detailed discussion)
Animation
It does not support animation.
No loss
PNG Is a lossless image format, which also means you can PNG The image will not be used for any operation. Produce loss of image quality. This also makes PNG Can be used JPEG Edited transition format
Horizontal Scan
Image GIF Same, PNG This means that the horizontal repeating color is smaller than the vertical repeating color.
Progressive display of intervals
It supports progressive display at intervals, but will increase the image size.

The first type of PNG is png8 (Boolean transparent)In short, it can be understood as a static GIF.
They only have 256 colors and support index transparency, that is, to specify whether a pixel is transparent.

The second PNG is also called png8 (alpha transparent)Specify the transparency of a pixel, for example, 50%.
This advantage is smaller than png24/32, but the effect is the same
The disadvantage is that IE6 does not support well,The translucent pixel is displayed as transparent.

The third type of PNG is png24.

Png24 is not transparent, but there are many colors, more than 256 colors
The png24 exported in Photoshop is actually png32.

The fourth type of PNG is png32.
Like the PSD in Photoshop, It is the default source file format of fireworks, including layers and channel information.
The difference between png24 and png24 is that more transparent information is provided.
The disadvantage is that IE6 does not support well and the transparent area will be displayed as a blue gray background: Only alphaimageloader and special labels (VML) need to be added through the method that affects performance ).

Note:

The Boolean transparent png8 can be normally displayed in any browser (just like GIF ).

The alpha-transparent png8 is displayed as transparent by mistake in browsers except IE6 and earlier, and can be normally used in other browsers.

Photoshop can only export Boolean transparent png8. (Some png8 may have edges under IE6, because the edges such as text and rounded corners usually weaken. Can be trimmed before export)
Fireworks can export both Boolean-transparent png8 and alpha-transparent png8.

 

Compare other image formats with PNG:

As we all know, GIF is suitable for graphics, JPEG is suitable for photos, and PNG series are both suitable.

Compared to gif

For images of the same color valueFormat ImageSmall. HoweverPng8Is the best choice.

In addition to animation, PNG 8 has all the features of GIF, but it is more advantageous than GIF in that it supports Alpha transparency and better compression. Therefore, in most cases, you should use png8 instead of GIF (except for a very small image GIF with better compression ).

Compared with JPEG
JPEG has better compression than full-color PNG, so it also makes JPEG suitable for photos, but it is easy to cause quality loss during JPEG editing. Therefore, full-color PNG is suitable for editing JPEG transition formats.