Before we begin, there is a general knowledge of index transparent colors and Alpha transparent channels

Index transparent color: The explanation given by Baidu Encyclopedia is a bitmap image coding method, which needs to be based on RGB, CMYK and other more basic color coding methods. Lossy compression can be achieved by limiting the total number of colors in an image. Select the most representative colors in a picture (usually no more than 256 colors) and compile a color table. My personal understanding of this sentence is in the generated when the picture will look for a series of pictures with you close to the color (no more than 256 kinds of color) into a picture and then it is clear that here if index is the color encoding to the quality of the photo is not very high, so it is best to use vector graphics.

The index transparent color is actually the same color as the index red, black, green, but it is transparent. IE6 supports index transparent color, and GIF and PNG is the index encoding mode of the graph, so the transparent block of this kind of picture in IE6 can show the relatively beautiful. You can also forcibly convert existing images to indexed color coding and find that the details become unbearable

(original)(After conversion)

Alpha Transparency channel: An 8-bit grayscale channel that records transparency information in an image with 256 levels of grayscale, defining transparent, opaque and translucent regions, where black represents transparency, white represents opacity, and gray represents translucency.

It shows the image by the brightness of the red, green and blue channels. Note that the three channels are used to store color information in the same way as the main channel (RGB), except that they are eventually merged into the main channel.

JPG:

Pros: Smaller than PNG24, but much larger than GIF, opens faster than PNG24 and displays 16 million colors.

Disadvantages: lossy compression, each save will have data loss, so try not to save many times. Otherwise the image will be distorted. Dynamic diagrams are not supported.

Application area: suitable for high fidelity display of pictures. Large pictures with rich colors

Not applicable: Small tabs in the ICON class can increase downloads

GIF:

Advantages: Support dynamic graph, small size

Cons: It is coded with indexed colors, so only 256 colors can be used, which looks terrible for large graphics. However, due to its small size, it can be used for the display of small ICONS.

Application area: dynamic graph, small ICON, vector graph.

Not applicable areas: pictures requiring high fidelity display, such as commodity display.

PNG8/PNG24:

PNG8 also uses index color coding, if not GIF animation support in fact PNG8 can be better than GIF. But if you look at the same image, PNG8 is smaller. PNG8 has a 1-bit Boolean transparent channel (either completely transparent or completely opaque).

PNG24 uses the Alpha transparent channel, which is a Boolean transparent channel with 8 bits (order 256). It also has 16 million colors and is lossless compressed. Take a look at the comparison chart below.

(PNG8),(PNG24)

Applicable area: PNG8 is best for small size and not rich color pictures, such as small icon. Use PNG24 if you need translucency, and use PNG24 if you need to download images frequently because it is lossless compression.

Not applicable: PNG8 is not applicable to images that are extremely large and require multi-color display. PNG24 should not be used for image size requirements.

Webp: Is an image format designed to speed up image loading. Image compression volume is only about 2/3 of JPEG, and can save a lot of server bandwidth resources and data space (at first glance seems to be for mobile and heavy traffic portal).

Webp supports lossy and lossless compression under the new coding rules, but under the same quality images. Webp image size is about 40% smaller than JPG and PNG (this confirms the conclusion I just said for mobile and high traffic portal!! After all, traffic is money!

On the downside, WebP images take “8 times longer to encode than JPEG images,” and compatibility with current Android versions below 5.0 is sometimes problematic, and CPU usage for WebP images can fluctuate between 20% and 36% on low-end phones. (That mobile application domain is not instantly fixed in Iphone and Android flagship phone, (╬▔ dish ▔) this makes xiaomi and Meizu low-end model phone situation comparable…)

However, according to previous experience, PNG emoticons use CPU fluctuations. According to the data searched, WebP expressions occupy more CPU than PNG expressions, because WebP uses an advanced predictive coding method to encode images. This method uses values in adjacent pixel blocks to predict the image values in the current block. Then you only need to compile for this difference but the quality is good and the CPU usage is high.

WebP uses Fancy sampling algorithm, since sampling algorithm must have sampling block, while JPEG sampling block is 8*8, for the length and width of the original image is not a multiple of 8, need to fill the multiple of 8 first, so that it can be processed block by block, so for the image of the integer multiple of 8, compression will be more efficient. The sampling block of WebP is 16N * 16N, so 256*256 or 192*192 can achieve higher webP compression efficiency. (Isn’t that the size of a meme? Is Google implicitly telling us to use WebP for emojis? .

Webp also supports dynamic graphs

Currently Animated WebP supports converting giFs directly to Animated WebP or combining multiple WebP images into Animated WebP. The advantage of Animated WebP over traditional GIFs is this

① Smaller size: converting GIF to lossy WebP reduces volume by 64% and converting lossless saves 19%

② Richer color, support 24-bit RGB color and 8-bit Alpha transparent channel (and GIF only support 8-bit RGB color and 1-bit transparent) (finally not a GIF alone, but also smaller! Webp seems to want to be overlord!

And of course his certainty is so great,

① More CPU consumption and decoding time (1.5~2.2 times more)

(2) Compared with GIF, the support is not enough, it is still not universal

In summary, the applicable regions are summarized as follows

① Large traffic portal sites and do not need to have too much compatible browser requirements

② User promotion page for high-end user models


My personal blog: http://zengjinchao.com/wordpress/