Web Image optimization: PNG24 image compression techniques and smush.it use

Article Description: on the method of picture optimization.

In the website optimization, if the picture optimization is good, not only can improve the loading speed of the page, enhance the site's user experience, but also through the picture optimization to save the bandwidth of the site. So what should be the way for a page builder to optimize the picture to ensure that the UI is reduced and the image is streamlined? Below I personally experience, to briefly introduce the image optimization method, first of all, we understand some of the knowledge of the picture:

1. Vector map and bitmap.

• Vector Graphics: Scale, rotation, no distortion of the image format, no matter how close you can not see the smallest figure of the unit. Stored files are small, but it is difficult to display a rich color-level lifelike image effect. You can understand the shape of a perfect round, parabola, etc.
• Bitmap: Also called raster graph, pixel graph, the smallest unit is composed of pixels, scaling, rotation will be distorted. For example, a bitmap is like a cross stitch, the picture is fine and colorful when you look at it, you can see the color transition of each stitch when you look near.

Cross Stitch Cross Stitch enlarge

The following table is a comparison of vector graphs and bitmaps:

2. lossy compression, lossless compression.

• lossy compression: The feature is to maintain the gradual change in color, according to the human eye to observe the sudden changes in the real world, and then use the nearby color through the gradient or other forms of filling. Because of the point of the data information, so storage will be reduced, will not affect the image of the reduction of quality will be reduced. JPG is a lossy compression format that, when stored, breaks down the image into 8*8-pixel grid-independent optimizations. For example: White Small block for 8*8px, black background block for 32*32px, when the small white block is not pure white, the small white block around it is very sharp, as shown in the following figure:

The upper right corner of the white lattice is not exactly in the 8*8 pixel grid unit, so the save will be with the surrounding 8*8 grid unit color Fusion, the following image effect:

This is the usual time to save a JPG image of the reason for the blur, the following is a few color map of the local contrast effect:

• Lossless compression: The use of statistical redundancy of data compression, the real record of the image of each pixel data information. His principle is to determine which color is the same, which is different, the same color data information to compress records, the different data saved separately. The quality of the picture will not drop after multiple storage.

Why is lossless compression of the graph also distorted? Because his compression principle is through the index image of the same area of the color compression and restore, that is, only the number of colors in the image is less than we can save the number of colors, can be true to record and restore the image, otherwise you will lose some image information. For example, PNG-8 and GIF formats:

And PNG24 is true color so the color table is empty and does not distort.

[1] [2] [3] [4] Next page