My opinion on the selection of image formats in html pages_Experience exchange

A student asked me today: The GIF format is used in the page and the distortion is too great. What should I do? This problem is relatively simple, just use JPG. There are three image formats we commonly use on pages, GIF, JPG, and PNG. So how do we choose to use these three formats? Let’s talk about some of my opinions on the use of these three formats based on my experience.

Let’s first take a look at the more formal explanations of several formats (note: the following content is from Baidu Knows):

GIF means Graphics Interchange format, GIF image The extension is gif. All graphic browsers now support the GIF format, and some graphic browsers only recognize the GIF format. GIF is an indexed color format. When the number of colors is small, the file generated is extremely small. Its main advantages are:

The GIF format supports background transparency. If the background color of a GIF image is set to transparent, it will be combined with the browser background to generate a non-rectangular image.
The GIF format supports animation. Before the emergence of Flash animation, GIF animation could be said to be the only form of animation on web pages. The GIF format can combine single-frame images and then play each frame in turn to become an animation. Although not all graphics browsers support GIF animation, the latest graphics browsers already support GIF animation.
The GIF format supports graphic progression. Progressive means that the picture gradually appears on the screen. Progressive pictures will appear on the screen faster than non-progressive pictures, allowing visitors to know the outline of the picture faster.
The GIF format supports lossless compression. Lossless compression is an effective method of compressing images without losing image details. Since the GIF format uses lossless compression, it is more suitable for lines, icons and drawings.
The shortcomings of the GIF format are also quite obvious. Indexed color is a relic of history. Old games under DOS almost without exception use indexed color. This format should have been eliminated long ago. However, due to bandwidth limitations, GIF became popular from the DOS era to the Internet era. The biggest disadvantage of the indexed color format GIF is that it only has 256 colors, which is obviously not enough for photo-quality images.

JPEG stands for Joint Photograhic Experts Group (Joint Photographic Experts Group). This format is often written as JPG, and the extension of JPG images is jpg.

The main advantage of JPG is that it can support millions of colors, so it can be used to express 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 gives up some detail in an image to reduce file size. Its compression ratio is quite high. Using a special JPG compression tool, the compression ratio can reach 180:1, and the image quality will not be too damaged from a browsing perspective, which greatly facilitates network transmission and disk exchange files. JPG is better for photos than GIF because the loss of some detail in the photo is not as obvious as with line art. In addition, JPG has a greater compression ratio for photos, and the final quality is better.

But in the long run, with the continuous improvement of bandwidth and the development of storage media, JPG should also be an eliminated image format, because lossy compression will cause unrecoverable damage to the image. loss. Therefore, compressed JPG images are generally not suitable for printing, and it is best not to use JPG when backing up important images. Also, JPG is not as flexible as GIF images. It does not support graphic gradients, background transparency, or animation.

PNG is an image file storage format that was developed in the mid-1990s. Its purpose is to replace the GIF and TIFF file formats while adding some features that the GIF file format does not have. The Portable Network Graphic Format (PNG) name comes from the unofficial "PNG's Not GIF". It is a bitmap file storage format, pronounced "ping". When PNG is used to store grayscale images, the depth of the grayscale image can be up to 16 bits. When storing color images, the depth of the color image can be up to 48 bits, and it can also store up to 16 bits of alpha channel data. PNG uses a lossless data compression algorithm derived from LZ77.

The PNG file format retains the following features of the GIF file format:

Color images can support 256 colors using a color lookup table, or palette.
Streaming read/write performance (streamability): The image file format allows continuous reading and writing of image data.
This feature is very suitable for generating and displaying images during communication.
Progressive display: This feature allows the image file to be displayed on the terminal while transmitting the image file on the communication link. After the entire outline is displayed, the details of the image are gradually displayed, that is, using the Display the image at a low resolution and then gradually increase its resolution.
Transparency (transparency): This feature allows certain parts of the image not to be displayed, and is used to create some distinctive images.
Auxiliary information (ancillary information): This feature can be used to store some text annotation information in the image file.
Independent of the computer software and hardware environment.
Use lossless compression.
The PNG file format will add the following features that the GIF file format does not have:

A true color image with 48 bits per pixel.
Each pixel is a 16-bit grayscale image.
Alpha channels can be added to grayscale images and true color images.
Add gamma information of the image.
Detect corrupted files using cyclic redundancy code (CRC).
Successive approximation display method that speeds up image display.
Standard read/write toolkit.
Multiple images can be stored in one file.
File structure

These three formats have their own advantages and disadvantages, among which PNG has many advantages. Although its popularity is still very general, its special advantages have made us very interested in it. At least I like this format now. Of course, for those who create the page, the total size of the page is competitiveness. So we still have to pay attention to the mixed use of these three formats. So when to use GIF, when to use PNG, and when to use JPG? Let’s analyze them one by one below.

In actual work, I found that general solid-color graphics, such as some small icons and tiled backgrounds, have relatively few colors. Although the GIF format only has 256 colors, it is necessary to deal with this type of pictures. It's very appropriate. Of course, we do not rule out the richness of the colors of some special small icons, but I believe that as small icons, a slight loss of color will not affect the overall visual effect. Therefore, the applicable scope of GIF is: small icons, tiled backgrounds and other colors Relatively few small images.

How to choose such a large picture? First, let’s learn about JPG. Our friends who use Photoshop all know that when exporting the picture at the end, there will be a place for us to choose the picture quality of this JPG picture. 100 % means no compression. When we exported the same picture and compared it with different quality pictures, we found that the low-quality one was obviously much dirtier than the high-quality one, so the photo looked very bad. Of course, we also found that this The situation is even more prominent in the pictures with larger color blocks. So like the sky, the portrait. Unsightly dark spots will appear especially on the face of portraits. Of course, if you don’t have strict requirements on photo quality, you can use JPG and lower the quality. But it does not apply to backgrounds and small icons.

I personally think PNG is a choice between GIF and high-quality JPG. If it is a simple small icon, PNG will be a little larger than GIF, but the quality is almost the same. If it is an ordinary picture, then PNG is still a little smaller than high-quality JPG, but PNG still has some color loss. However, it is basically not visible if the picture is not enlarged. Basically, we don’t create pages just for people to magnify and criticize. So PNG is an option in the middle. Of course, PNG also has a great advantage, that is, transparency, although IE6 did not support this feature before. GIF also has transparency, but GIF only supports absolute transparency and does not support translucency, so there is often a circle of white dots on the edge of the GIF image. PNG does not have these problems. With the development of the times, when IE6 becomes history, I think we will be able to see the true power of PNG.

Of course, there is a special situation that may be very special, that is, where the background image and the foreground image meet. This kind of place requires a consistent color structure to produce good visual effects. So at this time, be careful not to mix different formats as much as possible.