Picture principle and optimization How to play better results in website design

Intermediary transaction SEO diagnosis Taobao guest Cloud host technology Hall

　　

Preface: This article collected some of the predecessors on the picture optimization techniques, gathered here, for the optimization of the principles of each method to do some research, hoping to give you the picture optimization of this piece to play a role.

Referring to the picture, we had to start with a bitmap, a bitmap image (bitmap), also known as a dot-matrix image or a drawing image, made up of a single point called a pixel (picture element). These points can be arranged and dyed differently to form a picture. When you enlarge a bitmap, you can see countless individual squares that make up the entire image.

Common format jpg, PNG, GIF is also a bitmap, so their data structure is roughly the same, but each image format has a different compression algorithm, different scanning methods, but the optimization method has a common point, are all around the color value of each pixel to start, how to optimize it?

Here are some of the basic principles of the picture and the optimization method:

1.JPG Principle and optimization

JPG is a standard for compression and decompression of continuous-tone graphics such as color or grayscale. This standard is set by ISO/IEC jtc1/sc29 WG10.

The compression algorithm is positive and inverse discrete cosine transform, as shown in the following diagram:

　　

The inverse discrete cosine transform reverses the entire process.

The 8x8 pixel block is the focus of our JPG optimization method, which will involve the steps of sampling, block quantization and scanning, however, the two steps of sampling and block quantization will be the process of causing image distortion, which is also the core part of our optimization work.

Sampling：

The mentioned here can be well explained to the following JPG optimization method of color optimization;

JPG treats different colors as separate components, so that each component can be treated as a grayscale image, if there is no correlation between the color components, the compression effect can be treated best, so the composition of Red (R), Green (G), Blue (B) is converted to: Brightness (luminance) (Y), Chroma (chrominance) (CB and CR), which have no associated ingredients:

Y = 0.299r+0.587g+0.144b

Cb = -0.169r-0.331g+0.500b

Cr = 0.500r-0.419g–0.081b

Since the acuity of the human vision system is not high, the YCbCr chroma means that it can be sampled again (subsampling) to reduce the amount of information:

　　

The 4:4:4 format represents YCBCR's original complete information, which can be sampled again in YUV or 4:2:0 format; The YUV format reduces the amount of information to two-thirds, while the 4:2:0 format can reduce the three to half. Although the amount of chroma is reduced, there is only a slight difference in the human visual nerves.

Block quantization:

In order to illustrate the effect of discrete cosine transform (DCT), we convert the brightness data of the 8x8 blocks from a graph into a table of coefficients that conform to the range of DCT operations:

　　

The low-frequency part contains most of the energy of the block, while the high-frequency parts that are less sensitive to the vision usually contain only lower energies.

Next to the brightness coefficient to do quantitative processing matrix coefficient table:

　　

In the quantification of luminance coefficients, each DCT factor divided by the value of the relative quantization matrix is rounded up with the following quantized DCT coefficients (e.g. -80/16=-5):

　　

Note that after quantification, the high frequency portion of the block appears many 0 values, representing the human visual system that is insensitive to high-frequency parts. This step will be a distorted process because the rounded part cannot be reproduced during decoding.

Scan：

After the block is quantified, only the low-frequency portion has a value of not 0, in order to further reduce the size of the storage space, as far as possible to put together 0 values, so that processing can be expressed as a few zeros rather than individually processing each zero, so the following figure is used to do oblique scan:

　　

The scanning line of the oblique scan is scanned along the direction of the increase in the space frequency, so that many 0 can be strung together to achieve better results.

After understanding the above 3 processes, we will be more handy when we do jpg optimization, how to deal with color, how to reduce the color value and minimize the distortion of the image ratio.

Next for you to introduce the next JPG several commonly used optimization methods:

8 pixel grid

As shown in the following 2 pictures, the picture is 32x32, the white square is wide and high for 8x8:

　　

　　

As you can see, the small square in the upper left corner is just right in the "8 pixel grid", which ensures that the small square remains sharp. When saved, the picture is divided into many 8x8 px blocks, and the software is individually optimized for each block. Because the squares at the bottom of the right do not match these blocks (that is, the box spans several blocks and falls on the junction line of the block), the optimizer looks for a balance between black and white when looking for an index, adding noise.

Example：

　　

If you don't look carefully, you may not find it. The second picture in the box of the sunspot cover left over the area, the 99 number of excess pixels have been removed, 198.00 yuan down a pixel, 3 simple operation can be reduced by about 1K, this step, we will certainly consider a problem, Do I have to pull the line every time I do the drawing?

In fact, here just to do a precise demonstration, if applied to the work, we can change the 8x8 auxiliary squares to 16x16 or 32x32.

Picture quality

Do not save pictures with a quality of 100. This is not the highest quality picture, just a numerical optimization of the bottom line, eventually you will get an unreasonable large file. In fact, setting the quality above 95 is enough to prevent the loss of information.

There is a watershed in quality, which is why we usually recommend that JPG be of the best quality at around 60. When the quality is set below 51 in Photoshop, it performs another optimization algorithm called "Color Down-sampling", which is sampled evenly around 8 pixels, resulting in noise at the edges.

Therefore, if the picture is small and large in contrast, it is recommended that you do not set the quality below 51 in Photoshop.

Legend (left is mass 51 right for mass 50):

　　

　　

Color optimization

The principle of optimization here is the decompression process, the inverse quantization and the oblique scanning in the beginning. This involves the processing of two quantization matrices (brightness and chroma).

But this method uses relatively little, so here's a brief introduction.

Photoshop has a lab color mode, l denotes brightness (luminosity), A is a range from magenta to green, and B is a range from yellow to blue.

　　

One of the most important here is the lightness (also known as brightness), which optimizes the image by compressing the color channel, but keeping the brightness channel as bright as possible, because people are most sensitive to it.

The key here is the filter >> noise >> median value for a,b two-channel color processing

2.PNG Principle and optimization

PNG, an image file storage format, is intended to replace GIF and TIFF file formats while adding features that are not available in GIF. PNG offers 5 types of images: grayscale, true Color, indexed color, grayscale with alpha channels, true color with alpha channels, and unfortunately Photoshop can only export 3 types of images: transparent indexed color, true color, true color with transparency.

For PNG images, it can be divided into index and RGB, indexed graphs contain only a fixed number of colors, and the number of colors in RGB graphs is unrestricted.

Index diagram: In order to save storage, the color used in the image corresponding to a color table, the index color often use 16-color, 32-color, 64-color, 128-color or 256-color, but not more than 256 color;

RGB: Each pixel to save an RGB value, representing the color of the pixel, therefore, an RGB image of how many pixels, the file to save how many RGB values;

Compression：

PNG adopts the LZ77 lossless data compression algorithm: The LZ77 algorithm is simply to replace the current data by using the corresponding matching data information already appearing in the encoder or decoder to achieve the compression function.

The most important thing is linear filtering (also known as "triangular filtering"), PNG has 5 filters, none (No filter), Sub (current value minus the value of the left pixel), up (minus the value of the top pixel), Average (minus the average of the left and top pixels) and Paeth (replace above, Left or top left pixel value, and again named after Alan Paeth. Here's an example of one of the UP filters:

　　

Each row that is identified with the number 2 passes the "Up filter", and "up filter" sends the message to the PNG decoder: "For the current pixel, extract the top pixel value and add it to the current value." The 2–5 row in the diagram has the same value in the vertical direction. So they're all 0, and the bigger the picture, the bigger the compression ratio.

Scan：

PNG scanning is simple, only two: non-interlaced scanning, ADAM7 (7-way interlaced scanning method)

ADAM7 (7-Pass interlaced scanning method developed by Adam M. Costello), the principle is as follows:

　　

　　

Picture example:

　　

Two common PNG optimization methods:

Hue separation

Optimization principle: Effectively reduce the number of colors, merge similar colors, create a tonal region, better implementation of "linear filtration", get high compression rate.

Disadvantage: This method has certain limitations, especially the optimization of the picture and the background of the integration of HTML should be used with caution.

The color scale values here can be set according to the actual situation:

　　

Optimize picture contrast:

　　

Original artwork: 212KB

　　

After optimization: 146KB

Layer separation

Sometimes because there are some translucent pixels in the picture, you have to save a "heavyweight" PNG-24 file. If you divide such an image into two parts, some are opaque pixels, the other is translucent, and then each is saved in the appropriate format.

For example, you can save semitransparent pixels in PNG-24 format, while opaque pixels are saved in PNG-8 or even JPEG format.

For example:

　　

　　

Operation Steps:

1. Ctrl + Left-click Layer on the Layers panel to establish a constituency;

2. Switch to the channel panel to store the selection as a channel;

3. Select the Channel, cancel the selection, and adjust the threshold (image-> adjust-> threshold) to 255;

4. Ctrl + Left Click to create a selection and hide the channel, then select the original layer, open the layer-> new-> through the cut layer, that is, the above two separated picture.

5. Can be again to two pictures of color separation and other methods to optimize.

This method is similar to the event when the background image is too large for the same reason, add one more request and split the picture, superimposed.

3.GIF Principle and optimization

Because GIF is now used in a low rate, unless you need to use GIF animation, because PNG itself is the developer to replace the GIF to derive from the format of the picture, so the transparent picture suggested using PNG8. Here's a simple introduction to the following GIF:

The original meaning of GIF (Graphics Interchange Format) is "Image Interchange Format", an image file format developed by CompuServe Company in 1987. GIF file data, is a continuous tone based on the LZW algorithm lossless compression format. Its compression rate is generally around 50%, it does not belong to any application. Another feature of the GIF format is that it can store multiple color images in a GIF file, and if you read and display multiple image data in one file to the screen, you can create a simple animation.

LZW compression algorithm

LZW is to create a string table, with a shorter code to represent a longer string to achieve compression, string and encoding of the corresponding relationship is generated in the compression process, and implied in the compressed data, decompression time according to the table to restore, is a lossless compression. For example:

Normal text: Good people often say they are good people, but I am really a good person.

Compressed text: $ is often said to be $, but I really am a $. $1=[Good Man]

The article is nearing the end, I believe that after this long-winded a lot of text, we will have a relatively clear picture optimization ideas, look forward to looking for more ways to explore the optimization.

Resources：

Books: JPG Principles and data files

PNG file Format White paper: http://www.w3.org/TR/REC-png.html

GIF file data structure: http://wenku.baidu.com/view/06eaedcdda38376baf1fae8e.html