Advantages and disadvantages of application of pictures on the web

The main way of hosting information in the Web is the picture and text, the following is the advantages and disadvantages of some Web image format to summarize.

1. GIF

GIF is one of the more ancient web image formats, dating back to 1987, and almost all browsers support this format, old and old. GIF is an indexed-color-mode picture, so GIF shows a maximum of 256 colors per frame. GIF is capable of supporting animations and background transparency, which is supported by old IE6, so there are some scenarios where you would like to use a background transparent image in your project to create a GIF image. GIF is usually small in size compared to JPEG and PNG. But if you put a picture of enough frames in it, that might not be the case. Now the GIF on the web can be said to be exploding again, apparently more in the two features with him: Support animation and compatibility good. The disadvantage is: the color performance is not rich.

　　2. JPEG, JPG

Usually, most of the static graphs we see are basically this kind of image format. This format of the picture can be better performance of a variety of colors, mainly in the compression will be distorted (mainly compression, will be in the details of the adjacent to the assimilation of some of the color), and because of this, created this image format volume of light weight. The format is compatible with sick browsers, but background transparency and animation are not supported. Usually in the Web ads, photos, large background, carousel map, and so on some large-picture scenes, the application of this.

　　3. PNG

The PNG format is available in three versions, png-8,png-24,png-32, and all of these versions do not support animations. PNG-8 properties similar to GIF are similar, are indexed color mode, and support background transparency. Relatively better than GIF format features when transparent with the background, there is no noise on the edge of the image, the color performance is better. PNG-24 is actually lossless compression jpeg. And PNG-32 is on the basis of PNG-24, increased the support of transparency. PNG format in the old browser IE6 and below, PNG-8 transparency of the support is not very good, PNG-32 transparency is basically not supported. Because of this, there used to be a JS plug-in, specifically dealing with IE6 this bug, mainly with the filter in the IE6 to re-render the picture to achieve transparency. With the development of the Times, PNG also want to progress, also want to support animation. So, someone has released the Apng (animated PNG) format picture. Literally, is the move of the PNG image, but this technology implementation and the PNG development team concept is not effective promotion. Up to now, there is a Blink kernel browser (on behalf of the browser: Firefox) have better support, the others can not talk about.

　　4, WebP

The format of the picture is in the form of deep-pocketed Google released in 2010, it has all the advantages of the existing bitmap format, including small size, sufficient color performance, support animation (initially is not supported). Of course, the disadvantage of new things is that compatibility is not very good, there is the appearance of this image format calculation is much larger than the usual picture. Because of the good birth and the good things themselves, more and more developers and designers began to pay attention to it. A domestic company is also using this format image to make emoticons.

　　5. SVG

SVG is a vector graph, and for now, the support is considerable. A vector graph is a bit more natural than a bitmap, that is, it doesn't blur as much as it puts it. This format of the picture, for some simple lines, shape performance is very good, if the expression of more complex images (such as photographs), then this will become too complex. SVG can support animation (SVG animation features can not be very well supported by IE browser), the previous flash, but also support some changes in CSS style. We now use this for many icon icons on our web page, and SVG can combine multiple svg. In general, SVG is a relatively promising technology.

Browser, for the technical update of the picture has been breakthrough, and its only disadvantage compared to the text is too large, but the expression of the picture is not comparable to the text, but also believe that the picture will be more and more good. One of the techniques for Web database64 is the ability to convert images into 16-bit code directly into the Web.

< br>	compression method	single map can support color type			compatibility
G IF	lossless compression	256	Yes	is	basic general
J PEG	lossy compression	1600 million +	no	no	basic general
P NG	lossless compression	1600 million +	Yes	no	basic general
A PNG	lossless compression	1600 million +	Yes	is	firefox51++ chrom59++ ios sarfi9.3++
w EbP	lossy compression	1600 million +	Yes	is	opera 44++ chrom 45++
Svg	Vector diagram	16 million or more	Is	Is	In addition to IE8 and the following, Each master browser now supports

Advantages and disadvantages of application of pictures on the web