Shulou(Shulou.com)06/01 Report--

The main way to carry information in web is pictures and text. Here is a summary of the advantages and disadvantages of some web picture formats.

1 、 GIF

GIF image is one of the older web image formats, which can be traced back to 1987. Almost all browsers support this format. GIF is an indexed color mode picture, so the maximum number of colors represented by GIF per frame is 256. GIF can support animation, but also support background transparency, which even the ancient IE6 supports, so in the past want to use background transparent images in the project, there are some solutions is to generate GIF images. Compared with JPEG and PNG, GIF is indeed smaller in size in general. However, if there are enough frames of pictures in it, that may not be the case. Now the GIF on the network can be said to be explosive re-growth, obviously more in line with its two features: support for animation and good compatibility. The disadvantage is that the color expression is not rich enough.

2 、 JPEG 、 JPG

Most of the static pictures we see are basically in this picture format. Pictures in this format can better show a variety of colors, mainly when compressing (mainly when compressing, some adjacent colors will be assimilated in details), and because of this, it creates the light weight of this kind of picture format volume. The format is compatible with various browsers of the elderly and the disabled, but does not support background transparency and animation. Usually web advertising pictures, photos, extra-large background images, broadcast pictures and other large picture scenes, are applicable to this.

3 、 PNG

There are three versions of the PNG format, PNG-8,PNG-24,PNG-32, all of which do not support animation. PNG-8 and GIF-like properties are similar, both index color mode, and both support background transparency. Compared with the good GIF format, when the image is transparent with the background, the edge of the image has no noise and the color performance is better. PNG-24 is actually the JPEG of lossless compression. And PNG-32 is on the basis of PNG-24, increased transparency support. PNG format in the old browser IE6 and below, PNG-8 transparency support is not very good, PNG-32 transparency is not supported basically. Because of this, there used to be a js plug-in to deal with IE6 this kind of BUG, mainly using the filter in IE6 to re-render the image to achieve transparency. With the development of the times, PNG also wants to improve and support animation. So, someone launched the APNG (Animated PNG) format picture. Literally, it is a moving PNG picture, but the implementation of this technology is inconsistent with the concept of the PNG development team and has not been effectively promoted. Up to now, there are Blink kernel browsers (on behalf of browsers: Firefox) have better support, the rest is out of the question.

4 、 webP

The image format in this format, which was released by the wealthy Google in 2010, has all the advantages of the existing bitmap format, including small size, adequate color performance, and support for animation (which is not supported at first). Of course, the disadvantage of the new thing is that the compatibility is not very good, and that the amount of calculation of presenting this kind of picture format is much larger than that of ordinary pictures. Because the birth is good, the thing itself is also good, more and more developers and designers begin to pay attention to it. A domestic company is also using this format to make facial expressions.

5 、 SVG

SVG is a kind of vector graph, and at present, the support is considerable. One of the inherent advantages of vector maps compared to bitmaps is that they will not be blurred no matter how much they are put. This format of pictures, for some simple lines, shape performance is very good, if the expression of more complex images (such as photos), it will become too complex. SVG can support animation (the animation feature of SVG is not well supported by IE browsers), as with the previous flash, it also supports some modifications to the css style. Many of the icon icons on our web pages now use this, and svg can also combine multiple SVG. Generally speaking, SVG is still a promising technology.

In the browser, the technical update of the picture has been a breakthrough, its only disadvantage compared with the text is that the volume is too large, but the expressive force of the picture is incomparable to the text, and I believe that the picture will get better and better. Another technology about web bitmap is database64, which can convert the image into 16-bit code and insert it directly into web.

Compression mode single image can support color category whether to support transparency whether to support animation compatibility GIF lossless compression is basic general JPEG lossy compression 16 million or above basic general PNG lossless compression 16 million or above basic general APNG lossless compression 16 million is

Firefox51++

Chrom59++

IOS Sarfi9.3++

More than 16 million of webP lossy compression is

Opera 444th +

Chrom 45 +

More than 16 million of SVG vector graphs are

In addition to IE8 and the following

Now all main browsers support it.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.