Selection of image format in Web page

A long time no update blog, but also let a lot of friends disappointed. Recently has been very busy, of course, busy is an excuse, is really lazy. People ah, really can not lazy, a lazy body more and more problems, and then will be lazy more lazy. So starting today to restart the blog. Gossip less, we get to the point. Recently, storytelling crosstalk has been heard a lot, the terminology is also a bit nondescript. ）

Today, a student asked me: the page using GIF format, too much distortion, how to do? This problem is relatively simple ah, as long as the use of JPG can be. The picture format of our commonly used page has three kinds, GIF, JPG, PNG. So how do we choose to use these three formats? Here are some of my experiences to talk about my views on the use of these three formats.

Let's take a look at the more formal explanations of several formats: [Note: The following is from Baidu know]

gif is Graphics Interchange Format (Graphics Interchange Format), GIF image extension is gif. Now all graphics browsers support GIF format, and some graphics browsers only know the GIF format. GIF is an indexed color format, in the case of a small number of colors, the resulting file is very small, its advantages include:

1. GIF format supports background transparency. GIF picture if the background color is set to transparent, it will be combined with the browser background to produce a picture that is not rectangular.
2. GIF format supports animations. GIF animations can be said to be the only animated form in a Web page before Flash animations appear. The GIF format can combine single-frame images, and then play each frame in turn and become animated. Although not all graphics browsers support GIF animations, the latest graphics browsers already support GIF animations.
3. GIF format supports graphic progression. Gradual refers to the picture gradually displayed on the screen, the progressive picture will be faster than the non-progressive picture appears on the screen, so that visitors can quickly know the picture.
4. GIF format supports lossless compression. Lossless compression is an effective way to compress pictures without losing the details of a picture, and because the GIF format uses lossless compression, it is better suited to lines, icons, and drawings.

The disadvantages of the GIF format are also quite obvious. Index color is a legacy of history, in DOS of the old game with almost no exception to the use of indexed color, this format should have been eliminated already. But because of bandwidth constraints, GIF from the DOS era to the internet age. The biggest drawback of this indexed color format is that it has only 256 colors, which is clearly not enough for picture quality pictures.

JPEG represents the joint Photograhic Experts Group (Federated image expert team), which is often written as a jpg with an extension of jpg,jpg pictures.

JPG's main advantage is the ability to support millions of colors, which can be used to represent photos. In addition, JPG images use more efficient lossy compression algorithms, which make the file length smaller and download time shorter. lossy compression discards certain details in the image to reduce the length of the file. Its compression ratio is quite high, the use of special JPG compression tool its compression ratio of up to 180:1, and image quality from the view of the quality of viewing is not too much damage, which greatly facilitates network transmission and disk exchange files. A JPG is better suited to a photograph than a GIF, because losing some detail in a photograph is not as obvious as the art line. In addition, JPG to the photo compression ratio is larger, and the final quality is also better.

But in the long run, with the increasing bandwidth and the development of storage media, JPG should also be a obsolete picture format, because lossy compression can cause unrecoverable loss to the image. So compressed JPG pictures are generally not suitable for printing, and it is best not to use JPG when backing up important pictures. Also, JPG is not as flexible as a GIF image, and it does not support graphic progression, background transparency, or animation.

PNG was developed in the mid 1990s as an image file storage format designed to attempt to replace GIF and TIFF file formats while adding features that are not available in GIF file formats. The streaming Network Graphics format (Portable network Graphic format,png) name comes from unofficial "PNG" s not GIF, a bitmap file (bitmap file) storage format that reads "Ping." When PNG is used to store grayscale images, grayscale images can be as deep as 16 bits, and when storing color images, color images can be as deep as 48 bits and can store up to 16 bits of alpha channel data. PNG uses a lossless data compression algorithm derived from LZ77.

The PNG file format preserves the following attributes of the GIF file format:

• Use a color lookup table or a palette to support 256 colors of color images.
• Streaming read/write performance (streamability): Image File format allows continuous readout and writing of image data, which is ideal for generating and displaying images during communication.
• Successive approximation displays (progressive display): This feature enables the transmission of image files on the communication link at the same time on the terminal to display the image, the entire contour display after the gradual display of the details of the image, that is, first display the image with low resolution, and then gradually improve its resolution.
• Transparency (transparency): This performance allows some parts of the image to be displayed and used to create some distinctive images.
• Auxiliary information (Ancillary information): This feature can be used to store some textual annotation information in an image file.
• Independent of computer hardware and software environment.
• Use lossless compression.

In the PNG file format, add an attribute that is not in the following GIF file format:

• A true color image of 48 bits per pixel.
• A grayscale image of 16 bits per pixel.
• You can add alpha channels to grayscale and true color graphs.
• Add gamma information for the image.
• Use cyclic redundancy code (cyclic redundancy CODE,CRC) to detect damaged files.
• To speed up the display of the image display method of successive approximation.
• A standard read/write toolkit.
• You can store multiple images in one file.
• File structure

Each of the three formats has advantages and disadvantages, with PNG having a lot of advantages. Although the popularity is still very general, but its special superiority has let us have very big interest to it. At least I like this format now. Of course, for the production of the page production staff, the total size of the page that is competitiveness. So we still have to pay attention to these three forms of mixed use. When do you use GIF when using a JPG? We Yi Yilai analysis below.

In the actual work, I found that the general solid color graphics, such as some small icons, tiled background in which the color is less, then as GIF format, although there are only 256 colors, but the response to this type of picture that must be very appropriate. Of course, do not rule out some special small icon color richness, but believe that as a small icon its color a little loss will not affect the overall visual effect, so the application of GIF is: small icons, tiled background, such as small color smaller picture.

So how to choose a big picture, first we understand jpg, we use Photoshop friends know, in the final export of the picture will have a place for us to choose the image of this JPG image quality, 100% is to express no compression, When we take the same picture to export different quality picture contrast, we found that the quality of the low is obviously better than the quality of the dirty a lot, so the picture looks very bad, of course, we also found that this situation in the large color block picture is still prominent. So like Sky, portrait. Special portrait of the face will appear difficult to see the dark spots. Of course, if you are not strict with the quality of the photos you can use JPG and reduce quality. But not for backgrounds, small icons.

I personally think PNG is a choice between GIF and high quality jpg, and if it's a simple little icon, PNG will be a little bigger than GIF, but it's about the same quality. If it's a normal picture, PNG is smaller than the quality JPG, but PNG has a bit of color loss. But if the picture does not enlarge basically cannot see out. We do the page is basically not to let people magnify the NIT. So PNG is a choice between the middle. Of course, PNG has a great advantage, that is, transparency, although IE6 does not support this feature before. GIF is also transparent, but GIF only supports absolute transparency and does not support translucent, so the edge of a GIF image often has a circle of white dots. PNG does not have these problems, and as the Times evolve, I think we can see the true power of PNG as IE6 becomes history.

Of course, there is a special situation that can be very special, that is, the background picture and the foreground picture, this place needs to be consistent color structure to produce good visual effects. Then pay attention as much as possible not to use a mix of different formats.