How to make better use of image principles and optimization in Website Design

 

　　

 

This article collects some of the techniques of image optimization from our predecessors, collects them together, and studies the optimization principles of each method, I hope this article will help you with image optimization.

When it comes to images, we have to start with bitmap. bitmap, also known as a dot matrix image or image, is composed of a single point called a pixel (image element. These points can be arranged and colored to form an image. When you zoom in the bitmap, You can see countless individual blocks that constitute the entire image.

In common formats, JPG, PNG, and GIF are also bitmap. Therefore, their data structures are roughly the same, but each image format has different compression algorithms and scan methods, but the optimization methods all have one thing in common. They all focus on the color values of each pixel. How can we optimize them?

The following describes some basic principles and optimization methods:

1. JPG principle and Optimization

JPG is a standard for compressing and extracting continuous-tone images, such as colored or grayscale images. This standard is set by ISO/IEC JTC1/SC29 WG10.

The compression algorithm is positive and inverse Discrete Cosine conversion, for example:

　　

 

Inverse Discrete Cosine conversion reverses the entire process.

The 8x8 pixel block here is the focus of our JPG optimization method. The subsequent steps will involve sampling, block quantization, and scanning, however, the sampling and block quantization steps will be the process that leads to image distortion and the core part of our optimization work.

Sampling:

The color optimization in the JPG optimization method below can be well explained here;

JPG uses different colors as independent components. Therefore, each component can be treated as a gray-scale image. therefore, the red (R), Green (G), and blue (B) components can be converted to Luminance (Y) chrominance (Cb and Cr) makes each item unrelated to the following components:

Y = 0.299R + 0.587G + 0.144B

Cb =-0.169R-0.331G + 0.500B

Cr = 0.500R-0.419G-0.081B

Because the human vision system is less sensitive to the color, The YCbCr color method can be used to reduce the amount of information:

　　

 

The format represents the original complete information of YCbCr, which can be expressed in the format or. The original information is reduced to 2/3 in the format, the format reduces information 3 to half. Although the amount of color information is reduced, the human visual nerves are only slightly different.

Block quantification:

To illustrate the effect of Discrete Cosine conversion (DCT), we will convert the brightness data of the 8 × 8 blocks from a graph into a coefficient table within the DCT operation range:

　　

 

The low-frequency part contains most of the block's energy, while the high-frequency part that is less sensitive to vision usually only contains lower energy.

The following is a matrix coefficient table that quantifies the brightness coefficient:

　　

 

In the aspect of brightness coefficient quantification, each DCT coefficient is divided by the value of the relative quantization matrix. After rounding, the following quantization result is obtained for the DCT coefficient (for example,-80/16 =-5 ):

　　

 

Note that there are many zero values in the high-frequency section after quantification, which indicates that the human visual system is not sensitive to the high-frequency section. Because the rounding part cannot be reproduced during decoding, this step is a distorted process.

SCAN:

After the block is quantified, only the low-frequency part has a non-zero value. To further reduce the size of the storage space, try to put the zero value together, in this way, each zero is represented by a few zeros instead of individual zeros. Therefore, oblique scanning is performed in the following way:

　　

 

The scanning line of this Oblique scan is scanning along the increase of the spatial frequency, so that many zeros can be concatenated together to achieve better results.

After learning about the above three procedures, we will be more comfortable with JPG optimization in the future. How to Deal with the color, how to reduce the color value, but at least reduce the distortion ratio of the image.

Next we will introduce several common Optimization Methods for JPG:

8-Pixel Grid

As shown in the following two pictures, the image is 32X32, and the width and height of the white square are 8X8:

　　

 

　　

 

As you can see, the small square in the upper left corner is exactly aligned in the "8 Pixel Grid", so that the small square remains sharp. When saved, the image is divided into many 8x8 px blocks, and the software independently optimizes each block. Because the lower-right square does not match these blocks (that is, this square spans several blocks and falls on the block handover line ), when searching for an index, the optimizer finds a balance between the black and white colors, that is, it adds a mix of colors.

Example:

　　

 

You may not be able to see it without looking at it carefully. the area on the left of the black lid of the second picture and the excess pixels on 99 have been deleted, and the pixel is moved down to 198.00 yuan, the three simple operations can be reduced by about 1 K. In this step, you will certainly consider the question: do you need to pull the guides every time you make a picture?

In fact, this is just for a precise demonstration. If it is applied to work, we can change the 8X8 auxiliary square to 16X16 or 32X32.

Image Quality

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

There is a watershed in quality, which is why we usually recommend that the quality of JPG be around 60. When quality is set below 51 in Photoshop, it executes another optimization algorithm called "color down-sampling, it will sample the data evenly around 8 pixels, which will generate various colors at the edge.

Therefore, if the image is small and relatively large, we recommend that you do not set the quality below 51 in Photoshop.

Legend (quality 51 on the left and quality 50 on the right ):

　　

 

　　

 

Color Optimization

Here, the optimization principle lies in the decompression process, anti-quantization and oblique scanning. Processing of two quantization matrices (brightness and color) is involved here.

However, this method is rarely used, so we will only give a brief introduction here.

Photoshop has a Lab color mode. L indicates the Luminosity, a indicates the intensity from the ocean red to the green, and B indicates the intensity from the yellow to the blue.

　　

 

Here, the most important thing is brightness (also called brightness). When optimizing an image, we usually compress the color channel, but try to keep the highlighted brightness channel as much as possible, because people are most sensitive to it.

Here, the most important thing is filter> miscellaneous> the median is used to process the colors of Channel A and channel B.

2. PNG principle and Optimization

PNG is an image file storage format. It aims to replace the GIF and TIFF file formats and add some features not available in GIF. PNG provides five image types: Gray, true color, index color, gray with alpha channel, true color with alpha channel. Unfortunately, Photoshop can only export three image types: transparent index color, true color, and transparent real color.

For PNG images, there are two types of images: Index and RGB. The Index only contains a fixed number of colors, while the color Quantity of RGB Images is unrestricted.

Index chart: to save storage, the color used in the image is matched with a color table. The index color is usually 16, 32, 64, 128, or 256 colors, however, it cannot exceed 256 colors;

RGB diagram: each pixel stores an RGB value, which represents the color of the pixel. Therefore, the file stores the RGB values for the number of pixels in an RGB diagram;

Compression:

PNG adopts the LZ77 lossless data compression algorithm: In simple terms, LZ77 replaces the current data by using the matching data information that has already appeared in the encoder or decoder to achieve compression.

The most important thing is linear filtering (also known as "Triangle filtering"). PNG has five filters, None (no filtering), and Sub (the current value minus the value of the Left pixel ), up (minus the value of the top pixel), Average (minus the Average value of the Left and top pixels), and Paeth (replace the value of the Left pixel above, left pixel or top pixel, and rename it with Alan Paeth ). The following is an example of Up filtering:

　　

 

Each row marked with number 2 is filtered by "Up", and "Up filtering" sends a message to the png decoder: "For the current pixel, extract the value of the above pixel, and add it to the current value ". In the figure, the vertical direction of Row 2-5 has the same value. Therefore, their values are all 0. The larger the image, the larger the compression ratio.

SCAN:

The PNG scan method is very simple. There are only two kinds: Non-interlace scan and Adam7 (7 times interlace scan)

The principle of Adam7 (7-times interlace scan method developed by Adam M. Costello) is as follows:

　　

 

　　

 

Image example:

　　

 

Two common PNG optimization methods:

Color Separation

Optimization Principle: effectively reduces the number of colors, combines similar colors, creates excellent adjustment areas, and better executes "linear filtering" to obtain a high compression rate.

Disadvantage: This method has some limitations, especially when the optimized image and html background are integrated.

The level value can be set according to the actual situation:

　　

 

Optimized image comparison:

　　

 

Source image: 212KB

　　

 

After optimization: 146KB

Layer Separation

Sometimes because there are some translucent pixels in the image, you have to save a "heavyweight" PNG-24 file. If this type of image is divided into two parts, one part is an opaque pixel, the other part is translucent, and each part is saved in an appropriate format.

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

For example:

　　

 

　　

 

Procedure:

1. In the layer panel, Ctrl + left-click the layer to create a selection;

2. Switch to the channel panel and save the selected area as a channel;

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

4. ctrl + Left click the Channel again to create a selection and hide the channel, then select the original layer, open the layer-> New-> cut through the layer, the preceding two separated images can be obtained.

5. The two images can be further optimized by color separation and other methods.

In this method, when the background image in the activity is too large, the image is split and superimposed by adding one more request.

3. GIF principle and Optimization

Because GIF is currently in low usage, unless GIF animation is used, since PNG is an image format derived from GIF, we recommend that you use png8. The following is a brief introduction to the principles of GIF:

The original meaning of GIF (Graphics Interchange Format) is "image Interchange Format", which was developed by CompuServe in 1987. GIF file data is a continuous-tone lossless compression format based on LZW algorithm. Generally, the compression rate is about 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. If you read multiple image data in a file one by one and display it on the screen, to form the simplest animation.

LZW Compression Algorithm

LZW compresses long strings by creating a string table and using short code. The correspondence between strings and codes is dynamically generated during the compression process, in addition, the data is implicitly compressed and restored Based on the table during decompression. This is a lossless compression method. For example:

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

Compressed text: $1 is often said to be $1, but I am indeed $1. $1 = [Good Guy]

The article is coming to an end. I believe that after reading a lot of texts, you will have a clear idea about image optimization. We hope to explore more optimization methods together.

References:

Books: JPG principles and Data Archives

PNG file format White Paper: http://www.w3.org/TR/REC-png.html

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