Website user experience analysis the method of picture optimization

July 31, 2017


in the website optimization, if the picture optimization is good, not only can improve the page loading speed, enhance the user experience of the website, and also can optimize the bandwidth of the website through the picture optimization. As the page construction engineers should adopt what method to optimize the picture, can not only ensure the reduction degree of UI, and make the most concise picture? I have personal experience, to introduce the method of image optimization, we first understand some knowledge of the picture:

1. vector and bitmap.

vector: scale, rotate, undistorted image formats, no matter how close you are, you can’t see the smallest unit of graphics. Smaller files are stored, but it is difficult to display realistic images with rich color levels. You can understand the shape of a perfect circle, parabola, etc..

bitmap: also called raster and pixel, the smallest unit is made up of pixels, zoom and rotate will be distorted. For example, a bitmap is like a cross stitch. When viewed from a distance, the picture is delicate and colorful. You can see the color transition of each needle when you look at it.


cross stitch, enlarge,

compares the bitmap and bitmap to the following table:


2. lossy compression and lossless compression.

lossy compression: characterized by maintaining gradual changes in color, according to the human eye to observe the sudden changes in the real world, and then use the nearby colors, through gradients or other forms of filling. Because of the data information of the pixel, the storage capacity will be reduced, and the reduction of the image will not be affected, and the quality will decrease. JPG is a lossy compression format. When storing images, the image is decomposed into a grid of 8*8 pixels, individually optimized. For example: a small white 8*8px, black background block is 32*32px, when the small white is not pure white, it is surrounded by a small white sharp, as shown below:


The white space in the upper right corner of the

is just not in the grid element of the 8*8 pixel, so the save will blend with the surrounding 8*8 grid element color. Here’s the effect:


this is the reason why the image is blurred when you save JPG pictures. Here are some local contrast effects of color images:


lossless compression: compression of data using statistical redundancy to record data information of each pixel on the image. His principle is to judge which colors are the same and which will be the same

Leave a Reply

Your email address will not be published. Required fields are marked *