Website User Experience Analysis: A brief talk on the method of picture optimization

Intermediary transaction http://www.aliyun.com/zixun/aggregation/6858.html ">seo diagnose Taobao guest cloud host technology Hall

　　

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 have personal experience, to briefly introduce the method of image optimization, first of all, we understand some pictures of knowledge:

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 compares vector graphs to 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 are lossless compression graphs 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.

　　

3. PNG, GIF, jpg picture contrast.

Before we do the image optimization technology, we need to learn some technical details about the picture format. Each graphic format has its own strengths and weaknesses, knowing that they will give you better visual quality and compression quality.

　　

Web page image optimization is a very important step in the acceleration of the page, the image compression, not only to save bandwidth, and speed up the speed of the Web page. Our commonly used image editing software can compress pictures.

High compression ratio of PNG-8

When Chettu, sometimes choosing PNG-8 can get a higher compression ratio. Notice, it's PNG-8, not PNG-24. However, in some cases, GIF or JPG is smaller, you need to debug according to the actual situation to choose the best solution.

PNG-24 optimization techniques using tonal separation:

Take the micro-blog to the left navigation of the small icon for example, compressed image size compared to the following figure:

　　

The operation steps for PS tint separation are as follows:

　　

　　

Contrast size:

　　

With tool optimization, you can also be smaller:

　　

Note that the picture in the image above is originally in GIF format

was changed to PNG format

Therefore, when you use the tool optimization, you need to see if the file format has been changed, avoid missing some pictures are not optimized.

The application of picture optimization on the home page of Weibo:

1. Graphic class, Photo class

For the choice of image format, we also need to consider the use of pictures or functions, summed up in two categories: Graphic class, Photo class

Figure class: Graphic symbols, with a high concentration and quick transmission of information, easy to remember the characteristics of a small number of colors.

Graphic classes can generally be in PNG format or in GIF format. The optimization can be in PNG format for PNG8 or PNG24, the quality of 32, if the color loss can be used for quality 64 or 128.

For example: Home left Guide icon, feed area icon, medal map, expression animation are graphics.

Photo Category: Photos usually contain millions of levels of color, including smooth color over and gradient, if the graph is more complex, sometimes the real picture appears.

Photo classes are generally used in PNG and JPG. Can be based on the richness of the picture color.

PNG generally has a quality of 128. The quality of JPG is typically between 70-80 and is determined by the degree of noise.

For example: Skin background image, Publisher, button background, tips at the bottom of the publisher, right ads, user avatar, user-posted pictures. #p # subtitle #e#

2. General class, Random class

According to the frequency of the first page image is divided into: General class, Random class

Universal class: Everyone will see the home page, icons, buttons, small background.

For example, the top pallet icon, the Zoo icon, the Feed area icon, the Publisher icon, the identity icon, the Action class icon, the Status class icon, the button. As much as possible in PNG format saved, the file will be relatively small.

The image below is the size comparison between the Twitter button and the left navigation icon, using the GIF and PNG formats:

　　

The image below is a background image of the Twitter button that is saved in the GIF and PNG format, respectively:

　　

Random classes: Depending on what you define and publish.

A. Expression gif

You can use fireworks or imageready to recommend the use of ImageReady.

It is best to manually a sheet of adjustment, because the color values of these emoticons are relatively small, if the use of larger color will be more storage.

In addition, batch processing also need a folder to deal with a folder, look at the folder too much, basically batch processing is still very slow. Batch processing If you are using fireworks, some animations appear faster or are missing edges.

Manual processing, based on the number of index colors to save, generally 4-128 indexed color storage.

B. Skin-changing pictures:

In either JPG or PNG format.

The main background image of the skin, such as containing real photos or text, can be used in JPG format, in order to ensure closer to the design plan to use more than 85 of the quality of compressed pictures. If the color span is not large background picture, you can use the PNG format.

C. Categories of medals:

Currently there are GIF and PNG two formats, GIF is small, PNG is middle and large image. 128 Quality choice.

This catalog batch process is faster. Because it's all in the same folder. But manual words will be smaller.

D. Various advertising:

Post tips, right side ads, bottom ads. In either JPG or PNG format.

E. User-related map:

Avatar, user-published figure this needs to control the compression quality in the background. In either JPG or PNG format.

Picture Optimization Tool smush.it Introduction

Smush.it is the Yui team made a based on the Yui Online Picture optimization tool.

It is based on the following four picture optimization recommendations for the production of services:

· Removes the meta data in a JPG.

· Optimize the compression rate of JPG.

· Converts a specific GIF picture to an indexed PNG format picture.

· It is not useful to remove color information from an indexed picture.

So using smush.it compressed pictures can remove the extra bytes in the picture without changing the visual effect and quality of the picture.

Found in actual use:

· It also converts some JPG images into PNG images.

· For PNG24 True Color pictures, can remove some of the naked eye imperceptible color information, make up for Photoshop and firework optimization can not PNG24 picture.

· You can optimize an animated GIF picture.

smush.it use

Method One: Use the Firefox plugin yslow all smush.it™ in the Tools tool

Take Weibo home page for example:

　　

Firebug, using the YSlow tool, after running, select Tools

　　

Click All smush.it™ to automatically jump to http://www.smushit.com/ysmush.it/to get the following figure:

　　

Clicking the button download smushed images will let you download a zip compressed file.

Method Two: Directly login to Smush.it's website, the need to compress the image of the URL to paste into the input box (or select a picture from the local computer), click on the Smush can be compressed picture, and then smuch.it will provide an optimized report, showing the image compression ratio and save the number of bytes, It also provides a compression package that downloads a compressed picture file.

The following figure is a comma-delimited way of directly filling in the online URL:

　　

The following figure is how to select a picture from a local computer:

　　

The following figure is the result of the optimization:

　　

Antibody:

Let's go back to the main points:

1. Choose the appropriate format: Save the photo with JPG, save the animation in GIF, and save the other pictures in PNG, and use PNG8 as much as possible.

2. PNG24 image compression techniques.

3. Use of smush.it.