Brief description of JPG. Gif. The difference between png-8.png-24, using the scene separately

Source: Internet
Author: User

The difference between images in GIF, JPG, and PNG format in website making

One, Gifformat features:
1. Transparency, GIF is a Boolean transparent type that can be either fully transparent or full opaque, but it is not translucent (alpha transparent).
2. Animation, GIF this format supports animations.
3. Lossless, GIF is a lossless image format, which also means that you can do anything with GIF images without causing loss of image quality.
4. Horizontal scan, GIF is used as an algorithm called LZW to compress, when the process of compressing gif, the pixel is compressed from top to bottom horizontally, which also means that the same conditions, the landscape of the GIF picture than the vertical gif picture smaller. For example 500*10 's picture is smaller than 10*500 's picture
5. Interval progressive display, GIF supports optional interval progressive display
The above features show that only 256 colors of the GIF picture is not suitable for the photo, but it is suitable for the color requirements of the graphics (such as icons, charts, etc.), it is not the best choice, we will see in the following PNG is the best choice.
TwoJpegformat features:
1. Transparency, it does not support transparency.
2. Animation, it also does not support animation.
3. Loss, in addition to some such as rotation (only 90, 180, 270 degrees rotation), cutting, from the standard type to advanced type, editing the original data of the picture, all other operations on the JPEG image processing will make its quality loss. So we generally use PNG as the transition format in the editing process.
4. Interlaced progressive display, it supports interlaced progressive display (but IE does not support this property, but IE will be displayed when the entire image information arrives completely).
From the above can be seen JPEG is the most suitable for the web above the photographic pictures and digital camera.
three, PNG format features:
1. Type, PNG This picture format includes many subclasses, but in practice can be roughly divided into 256 colors PNG and full-color PNG, you can do with 256-color PNG instead of GIF, full-colour PNG instead of JPEG
2. Transparency, PNG is fully supported alpha transparent (transparent, translucent, opaque), although there are two strange phenomena in IE6 (discussed in detail below)
3. Animation, it does not support animation
The PNG image format now contains three types:
Aliases for 1.png8256-color png
2.png24 the alias of a panchromatic png
3.png32 the alias of a panchromatic png
Basically PNG32 is PNG24, but it comes with a full alpha channel. That means not only 24-bit true color information is stored on each pixel, but it also stores 8-bit alpha channel information, just as GIF can store transparent and opaque information. When we put the picture on a less-than-matched background, the edges of the transparent PNG image appear smoother.
Of course, I also know what you think, "but Photoshop can also generate PNG images with transparent channels! "I also know that it is only superficial to say that it is PNG24 that makes me confused too."
As a sentimental fireworks advocate, I only use PNG32 to support true color images with alpha channels. However, if you are accustomed to using Photoshop, you should know that Photoshop only provides PNG8 and PNG24 two PNG formats in Save as Web format.
I'm sure you'll often tick the "support transparency" option to get a PNG image with transparency, but then you get a PNG32 picture. --photoshop just felt that the name of PNG32 was hidden away. Weird, huh? ......
Iv. misunderstanding of the Png8
Png8 's bizarre performance in IE:
Translucent Png8 are displayed as full transparency in browsers below IE6.
Alpha Transparent panchromatic png (PNG32) will have a background color (usually gray) in IE6.
From the above can be summed up:
(a) Fully transparent PNG8 can be displayed normally in any browser (just like GIF). Translucent Png8 In addition to IE6 and the following browser error display is transparent, other browsers can display translucent. This bug does not require special treatment because it is only shown as full transparency under a browser that does not support translucency and has little impact on the user experience, it is an enhanced version of the transparent GIF instead.
(b) The second bug has no good solution and can only be alphaimageloader with the need to add special tags (VML) through methods that affect performance.
So come to the conclusion: please use PNG8.
PNG8 Software Issues:
Photoshop can only export Boolean transparent PNG8.
Fireworks can export both Boolean-transparent PNG8 and alpha-transparent PNG8.

Brief description of JPG. Gif. The difference between png-8.png-24, using the scene separately

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.