On Image Optimization Methods

View image Optimization on Sina WeiboArticle, The explanation is good, so I reprinted it.

In website optimization, if images are well optimized, the page loading speed can be improved, the user experience of the website can be improved, and the bandwidth of the website can be reduced through image optimization. So what method should I use as a page reconfigurator to optimize images, which not only ensures UI restoration, but also minimizes images? In my personal experience, I will briefly introduce an optimization method. First of all, we will understand some image knowledge:

1. Vector and bitmap.

• Vector: scaling, rotating, and true image formats. No matter how close you are, you cannot see the smallest unit of the image. The stored files are small, but it is difficult to express the vivid image effects with rich color layers. You can understand it as a perfect circle, parabolic, and other shapes.
• Bitmap: it is also called a raster or pixel chart. The smallest unit is composed of pixels. scaling and rotation will be distorted. For example, a bitmap is like a cross stitch. The picture is delicate and colorful during a distant view, and the color transition of each stitch can be seen at a closer look.

Cross stitch

The following table compares a vector image with a bitmap:

 

2. lossy compression and lossless compression.

• Lossy compression: The feature is to keep the color changing gradually, observe the sudden changes in the real world according to the human eye, and then fill the color with gradient or other forms nearby. Because of the data information of the prime point, the storage capacity is reduced, and the restoration quality of the image is not affected. JPG is a lossy compression format. When storing an image, the image will be decomposed into 8*8 pixel grids for individual optimization. For example, the white block is 8*8 PX and the Black Block is 32*32 px. When the White block is not pure white, the white block around it is sharp, as shown in:

The white lattice in the upper right corner is not in the 8*8 Pixel Grid unit, so the color of the surrounding 8*8 grid unit will be fused during storage. The effect is as follows:

This is why the image will be blurred when the jpg image is saved at ordinary times. The following figure shows the local comparison of several colored images:

• Lossless compression: uses statistical redundancy to compress data, which truly records the data information of each pixel in the image. The principle is to first determine which colors are the same and which are different, compress the data information of the same colors, and save different data separately. After multiple storage operations, the image quality will not decrease.

Why are lossless compression images not true? Because the compression principle is to compress and restore the color of the same area on the index image, that is, only when the number of colors of the image is smaller than the number of colors that we can save, in order to record and restore images, or some image information will be lost. For example, PNG-8 and GIF format:

Png24 is true color, so the color table is empty and will not be distorted.

3. Compare PNG, GIF, and jpg images.

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

Page image optimization is an important step in page acceleration. compressing images not only saves bandwidth, but also speeds up the page. Our commonly used image editing software can compress images.

• High compression ratio of PNG-8

When you cut the graph, sometimes you can choose a PNG-8 to get a higher compression ratio. Note that it is a PNG-8, not a PNG-24. However, in some cases, GIF or JPG files may be smaller. You need to debug the files based on the actual situation to select the best solution.

• PNG-24 optimization techniques, using tone separation:

Take the small icon in the left-side navigation of Weibo as an example. The compressed image size pairs include:

The steps for separation of PS tones are as follows:

Comparison size:

After optimization using the tool, it can be smaller:

Note that the original GIF image is changed to PNG. Therefore, you need to check whether the file format has been changed after using the tool optimization to avoid missing some images that have not been optimized.

Application of Image Optimization on the Weibo homepage:

1. Graphic and photo

For image format selection, we also need to consider the use scenarios or functions of the image, which can be summarized into two categories: Graphic Type and photo type.

Graphic Type: Graphical symbols, with a high concentration and fast information transmission, easy to remember features, a small number of colors.

Generally, the image type can be in PNG or GIF format. The PNG format is png8 or png24 and the quality is 32. If the color is lost, the quality is 64 or 128.

For example, icons on the left of the home page, feed area icons, modal charts, and emoticons are all images.

Photo type: A photo usually contains millions of colors, including smooth excessive colors and gradient. If the image is complex, the image may sometimes contain real photos.

Generally, PNG and jpg are used in the photo class. It can be determined by the richness of the image color.

The quality of PNG is generally 128. JPG quality is generally between 70-80, determined by the degree of noise.

For example: Skin background image, publisher, button background, tips below publisher, right advertisement, user avatar, user published image.

2. General and random classes

The pictures on the home page are divided into common and random categories.

Common category: icon, button, and background are displayed on the homepage of each user.

For example, the top tray icon, left-guide icon, feed icon, publisher icon, identity icon, Operation icon, status icon, and button. Save as much as possible in PNG format, and the file will be relatively smaller.

For buttons in Weibo and icons in the Left Navigation Pane, compare the image size in GIF and PNG formats:

Compare the size of Button background images saved in GIF and PNG formats for Weibo:

Random class: depends on the content you define and publish.

A. animated GIF

You can use fireworks or imageready. We recommend that you use imageready.

It is best to manually adjust one by one, because the color values of these emoticon are relatively small. If a large color is used, the storage will be large.

In addition, batch processing also requires a folder and a folder for processing. There are too many emoticon folders, And the batch processing is still very slow. If you use fireworks for batch processing, some animations may become faster or missing edges.

During manual processing, the index color is stored Based on the index color. Generally, the index color is 4-128.

B. Skin change pictures:

In jpg or PNG format.

If the main background image of the skin contains real photos or text, the JPG format can be used. In order to ensure that the image is closer to the design drawing, more than 85 quality compression images are required. If the background image has a small color span, it can be in PNG format.

C. Medals:

Currently, two formats are available: GIF and PNG. gif is a small image, and PNG is a medium image and a large image. Select 128 for quality.

This directory batch processing is faster. Because they are all in the same folder. However, manual operations are a little smaller.

D. Various advertisements:

Below the publisher is tips, right ad, and bottom ad. In jpg or PNG format.

E. User-related diagram:

For portraits and user-published images, the compression quality needs to be controlled in the background. In jpg or PNG format.

Introduction to image optimization tool smush. it

 

Smush. It is a Yui-based online image optimization tool developed by the Yui team.

It is a service based on the following four image optimization recommendations:

· Remove the meta data from JPG.

· Optimized the JPG compression rate.

· Convert a specific GIF image to an indexed PNG image.

· Remove useless color information from indexed images.

Therefore, using smush. It to compress an image can delete unnecessary bytes without changing the visual effect and quality of the image.

In actual use, we found that:

· It can also convert some JPG images into PNG images.

· For png24 true color pictures, we can remove some invisible color information to make up for the shortcomings that Photoshop and firework cannot optimize png24 images.

· You can optimize GIF animated images.

Smush. IT Usage

Method 1: Use all smush. It In The tools tool in yslow of Firefox.

Take the Weibo homepage as an example:

Firebug: Use the yslow tool. After running, select Tools

 

Click All smush. It to automatically jump to http://www.smushit.com/ysmush.it/to:

 

Click Download smushed images to download a zip file.

Method 2: directly log on to smush. for it websites, paste the URL of the image to be compressed into the input box (or select an image from the Local Computer), click smush to compress the image, and then smuch. it provides an optimized report that shows the compression ratio and the number of bytes saved, and provides a compressed package that can download compressed image files.

To directly enter online URLs (separated by commas ):

To select an image from a local computer:

Optimization results:

Punypng is a free website optimization tool that reduces the size of image files without any quality loss. Punypng supports PNG, JPG, GIF, and animated GIF (up to kb each ).

Use this tool:Http://www.punypng.com/