Talking about the Method of Image Optimization

In website optimization, if the picture is optimized well, not only can improve the loading speed of the page, improve the user experience of the website, but also can save the bandwidth of the website through image optimization. So as a page construction engineer should adopt what method to optimize the picture, both to ensure the restoration of UI, but also make the picture the most streamlined? Here I will personal experience, to briefly introduce the method of image optimization, first of all, we understand some of the pictures of knowledge:

1. & http: //www.aliyun.com/zixun/aggregation/37954.html "> nbsp; vector and bitmap. Vector: zoom, rotate without distortion of the image format, no matter how close you look Less than the smallest unit of graphics. Stored files are small, but it is hard to show richly colored, realistic image effects. You can understand perfectly rounded, parabolic, etc. Bitmaps: Also called raster, pixel, For example, the bitmap is like the cross-stitch, the screen looks finer and colorful when you look at it, and you can see the color transition of each stitch when you look closely.

Stitch cross stitch enlarge

The following table shows the comparison of vector and bitmap:

Lossy compression, lossless compression Lossy compression: The characteristic is to keep a gradual change in color, observe sudden changes in the real world from the human eye, and then fill it with gradients or other forms using nearby colors. Because of the prime data, so the storage capacity will be reduced, it will not affect the image restore quality will decline. JPG is a lossy compression format that automatically optimizes the image when it is stored in an 8 × 8 pixel grid. For example: the white patch is 8 * 8px, the black patch is 32 * 32px, when the white patch is not pure white, the white patch around it is very sharp, as shown below:

The upper right corner of the white grid just not in the 8 * 8 pixel grid unit, so save with the surrounding 8 * 8 grid unit color fusion, the effect of the figure below:

This is usually the reason why the image will be blurred when saving a JPG image. The following is a partial contrast effect of several color images:

Lossless compression: the use of statistical redundancy of data compression, the true record of each pixel data information on the image. His principle is to first determine which colors are the same, which are different, the same color data compression records, save different data. The quality of the picture will not decrease after being stored for many times.

Why lossless compression of the picture will be distorted? Because of his compression principle is indexed by the same area of ​​the image color compression and reduction, which means that the number of colors in the image is less than the number of colors we can save the true record and restore the image, or will be lost Image information. For example, PNG-8 and GIF formats:

The PNG24 true color so the color table is empty, will not be distorted.

3. PNG, GIF, JPG picture comparison.

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

Web page picture optimization is a very important step in web page acceleration. Compressing the picture not only saves bandwidth but also accelerates the web page speed. Our commonly used image editing software can be compressed images.

PNG-8 high compression ratio

When cutting the graph, sometimes choose PNG-8 can get a higher compression ratio. Note that it is PNG-8, not PNG-24. However, in some cases, GIF or JPG will be smaller and need to be debugged according to the actual situation to choose the best solution.

PNG-24 optimization tips, the use of color separation:

Take a small icon on the left side of the microblogging as an example, the compressed image size comparison is as follows:

PS color separation steps are as follows:

Contrast Size:

After using the tool to optimize, but also smaller:

Please note that in the image above, the original GIF format was changed to PNG format. Therefore, after using the tool to optimize the need to check again whether the file format has been changed to avoid missing some of the pictures are not optimized.

Picture optimization on the microblogging home page on the application:

1. Graphic category, photo category

For the image format selection, we also need to consider the scene or function of the picture, can be summarized into two categories: graphic type, photo type

Graphic categories: graphic symbols, highly condensed and quickly convey information, easy to remember features, the number of colors less.

Graphic classes can generally use the PNG format or GIF format. Optimized PNG format can be PNG8 or PNG24, the quality of 32, if the color loss can be used 64 or 128 quality.

For example: Home left guide icon, feed area icon, medal figure, emoticons belong to the graphic animation.

Photo: Photographs usually contain millions of colors, including smooth over-color and gradients, sometimes with real pictures in the graphics if the graphics are more complicated.

Photos generally use PNG and JPG. According to the richness of the color of the picture may be.

The quality of PNG generally to 128. JPG quality generally 70-80 in order to determine the extent of noise.

For example: Skin background, Publisher, Button background, Tips below publisher, Advertisement on right, User avatar, User-posted image.

2 common class, random class

In accordance with the frequency of the first page picture is divided into: generic categories, random categories

Common categories: everyone will see the home page, icons, buttons, small background.

For example, the top tray icon, the left guide icon, the feed area icon, the publisher icon, the identity icon, the operation class icon, the status class icon, the button. As far as possible using the PNG format, the file will be relatively smaller.

The picture below shows the comparison of the size of GIF and PNG using the Weibo button and the left navigation icon.

The following figure shows the background of the Weibo button to use GIF and PNG format to save the size of the comparison:

Random categories: according to their own definition and release of content.

A. Expression GIF

You can use FireWorks or ImageReady, it is recommended to use ImageReady.

It is best to manually adjust the picture one by one, because these emoticons are relatively small color values, if you use a larger color will store a larger amount.

In addition, the batch also need a folder to handle a folder, the expression of the folder too much, basically batch or very slow. If you are using FireWorks batch processing, some animation will appear faster or lack of edge situation.

Manual handling, according to how much the index color to save, in general 4-128 index color storage.

B. Skin class pictures:

Using JPG format or PNG format.

The skin of the main background, such as pictures containing the real photo or text, can be used JPG format, in order to ensure that closer to the design needs 85 or more compressed images. If the color of the background image is not span, can be PNG format.

C. Medal categories:

Currently there are two formats GIF and PNG, GIF is a small map, PNG is the map and the big map. 128 can choose quality.

This directory batch faster. Because they are in the same folder. But the manual will be a little smaller.

D. Various ads:

Tips below the publishers, advertising on the right, the bottom of the ad. Using JPG format or PNG format.

E. User related figure:

Avatar, user-released map This need to control the compression quality in the background. Using JPG format or PNG format.

Smush.it picture optimization tool introduced

Smush.it is a YUI-based online image optimization tool made by YUI team.

It is a service built on the following four image optimization tips:

· Remove the meta data in JPG

· Optimize JPG compression rate.

· Convert specific GIF images to indexable PNG format images.

Remove unused color information from indexable images.

So using Smush.it to compress the picture can delete the excess bytes in the picture without changing the visual effect and quality of the picture.

In actual use found:

It also converts some JPG images to PNG images.

For PNG24 true color pictures, you can remove some of the unaware color information to make up photoshop and firework PNG24 can not optimize the lack of pictures.

· Can optimize GIF animation picture.

Smush.it use

Method One: Use All Smush.it ™ from the Tools tab in Firefox's plug-in Yslow

Take the microblogging home page as an example:

Firebug, use the Yslow tool, run, select Tools

Click All Smush.it ™, it will automatically jump to http://www.smushit.com/ysmush.it/ to get the following picture:

Clicking on the button Download Smushed Images will download a zip archive.

Method 2: Log in to Smush.it's website, paste the URL of the compressed image into the input box (or select a picture from your local computer), click Smush to compress the image, and then Smuch.it will provide an optimized report , Shows the picture compression ratio and how many bytes saved, and provides a zip package that contains the compressed picture file.

The following figure shows how to fill the online URL directly (separated by commas):

The picture below shows how to select a picture from your local computer:

The picture below shows the optimization result:

induction:

Let us review the key again:

1. Choose the right format: save the picture in JPG, save the animation in GIF, save the other pictures in PNG, and try PNG8 whenever possible.

2. PNG24 picture compression techniques.

3. Smush.it use.

Source: http://udc.weibo.com