The choice of image format in HTML page--Experience Exchange

Today, a student asked me: the use of GIF format in the page, the distortion is too large, how to do? This question is relatively simple, just use JPG to do it. There are three kinds of image formats for our commonly used pages, GIF, JPG, PNG. So how do we choose to use these three types of 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 some of the more formal explanations of several formats (note: The following are from Baidu know):

GIF means Graphics Interchange Format (Graphics Interchange), and GIF images have a gif extension. All graphics browsers now 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 are mainly:

The 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 non-rectangular picture.
GIF format supports animations. Before Flash animations appear, GIF animations can be said to be the only animated form in a Web page. The GIF format can combine single frame images and then play each frame in turn to be animated. Although not all graphics browsers support GIF animations, the latest graphics browsers already support GIF animations.
GIF format supports graphics progressive. Progressive refers to the image gradually displayed on the screen, progressive images will appear more quickly than non-progressive pictures on the screen, allowing visitors to know the picture more quickly.
Lossless compression is supported in the GIF format. Lossless compression is an effective way to compress a picture without losing the details of the image, which is more suitable for lines, icons, and drawings, since the GIF format uses lossless compression.
The disadvantage of GIF format is also quite obvious. Index color is a legacy of history, in the old game under DOS almost no exception to the use of indexed color, this format should have been eliminated long ago. However, due to bandwidth constraints, GIF from the DOS ERA red to the internet era. GIF The biggest drawback of this index color format is that it has only 256 colors, which is obviously not enough for picture quality pictures.

JPEG represents joint Photograhic Experts Group (Joint Photographic Experts Group), which is often written as a jpg,jpg image with the extension jpg.

The main advantage of JPG is the ability to support millions of colors, which can be used to represent photos. In addition, because JPG images use a more efficient lossy compression algorithm, the file length is smaller and the download time is shorter. lossy compression discards some of the details in the image to reduce the file length. Its compression ratio is quite high, using a dedicated JPG compression tool with a compression ratio of up to 180:1, and image quality from the viewing angle of the quality damage will not be too large, which greatly facilitates network transmission and disk exchange files. JPG is more suitable for a photo than a GIF because losing some detail in a photo is not as obvious as an art line. In addition, JPG compresses photos more, and the final quality is better.

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

PNG is an image file storage format that was developed in the mid 1990s to attempt to replace GIF and TIFF file formats while adding features not available in the GIF file format. The streaming web graphics format (Portable Network Graphic format,png) is named after the unofficial "PNG's not GIF", which is a bitmap (bitmap file) storage format that reads "Ping". When PNG is used to store grayscale images, the depth of the grayscale image can be as much as 16 bits, and when the color image is stored, the depth of the color image can be as many as 48 bits, and the alpha channel data of up to 16 bits can also be stored. PNG uses a lossless data compression algorithm derived from LZ77.

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

Color images can be supported in 256 colors using a color lookup table or a palette.
Streaming read/write performance (streamability): Image File format allows continuous readout and writing of image data
This feature 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 while displaying the image on the terminal, showing the entire contour after the image is displayed progressively, that is, the image is displayed in low resolution, and then gradually improves its resolution.
Transparency (transparency): This performance allows some parts of the image to not be displayed to create some distinctive images.
Auxiliary information (Ancillary information): This feature can be used to store some text annotation information in an image file.
Independent of the computer hardware and software environment.
Use lossless compression.
In the PNG file format, add features that are not in the following GIF file format:

A true color image of 48 bits per pixel.
A grayscale image of 16 bits per pixel.
Alpha channels can be added for grayscale and true color graphs.
Adds the gamma information for the image.
Use cyclic redundancy codes (cyclic redundancy CODE,CRC) to detect damaged files.
Speed up the display of images by successive approximation.
Standard read/write toolkit.
You can store multiple images in one file.
File structure

There are pros and cons to each of these three formats, with a lot of PNG benefits. Although the popularity is still very general, but its special superiority has let us have a very great interest in it. At least I like this format very much now. Of course, for the production page of the production staff, the total size of the page volume that is competitiveness. So we still need to pay attention to the mix of these three formats. When to use GIF when to use PNG when to use JPG? We hit analysis below.

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

Then how to choose the big picture, first we understand the JPG, we use Photoshop friends know that in the final export of images there will be a place for us to choose the image quality of this JPG image, 100% is to indicate no compression, When we take the same picture to export different quality picture comparison we found that the quality of the low is obviously higher 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 of the picture is still prominent. So like the sky and the portrait. Special portraits have dark spots that can be difficult to see on the face. Of course, if the quality requirements for the photo are not strict, you can use JPG and reduce quality. But not for backgrounds, small icons.

I personally think that PNG is a choice between GIF and high-quality JPG, if it is a simple small icon, PNG will be larger than GIF, but the quality is similar. If it is a normal picture, then PNG or high-quality JPG to smaller, but PNG still a bit of color loss. However, if the picture is not enlarged, it is basically not visible. We do not basically make the page to let people amplify the fault. 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 translucency, so the edges of GIF pictures often have a circle of white dots. And PNG does not have these problems, with the development of the times when IE6 becomes history, I think we can see the real power of PNG.

Of course, there is a special situation may be very special, that is the background picture and the foreground picture, this place needs the color structure consistent in order to produce good visual effect. So at this point, be careful not to use a mix of different formats as much as possible.

