) Image format and Design

Http://ued.taobao.com/blog/2010/12/10/%e5%9b%be%e7%89%87%e6%a0%bc%e5%bc%8f%e4%b8%8e%e8% AE %be%e8% AE %a1%e9%82%a3%e7%82%b9%e4%ba%8b%e5%84%bf/#more-3196

Key excerpt:

1. Vector and bitmap

Vector graph-perfect ry

A vector chart is used to display a graph by computation of some basic elements, such as points, lines, surfaces, borders, and fill colors. It is like we can describe a circle in the ry through its center position and radius, of course, you can also describe its style through the Border width, color, filled color, and other data. While the computer uses this data to plot our defined images during display.

The advantage of a vector graph is that the file is relatively small and will not be distorted when it is zoomed in or out. The disadvantage is that these perfect geometric images are difficult to express realistic images with high naturalness.

It should be emphasized that the images we use on the Web page are bitmaps, even if some images are called VECTOR images (such as vector icons) it also refers to the use of vector tools for rendering and then converting to a bitmap format on the Web (different from the pixel-based drawing ).

Bitmap-magic puzzles

A bitmap is also called a pixel or raster image. It stores and displays images by recording the color, depth, transparency, and other information of each vertex in the image. A bitmap is much larger than a piece of puzzle, but each piece is a solid color pixel. When we arrange these pixels of different colors according to certain rules, the image we see is formed. So when we zoom in a pixel chart, we can see the pixels (such as) of these slices ).

Bitmap is advantageous for displaying realistic images with rich color layers. The disadvantage is that the file size is large, and image enlargement and reduction will be distorted.

2 lossy compression and lossless compression

Lossy compression-what you see is not necessarily true

According to my understanding, lossy compression is to not completely record the data information of each pixel in the image while storing the image, it will observe the characteristics of the real world according to the human eyes (the human eyes are more sensitive to light than the color, biological experiments show that when the color is missing, the human brain uses the nearest color to automatically fill in the missing color) to process the image data and remove the details that will be ignored by the human eye, then fill in with the nearby color in gradient or other forms. This not only greatly reduces the amount of image information data, but also does not affect the restoration effect of the image.

JPG is the most common image format that uses lossy compression to process image information. JPG splits the image into an 8x8 pixel raster (for example) When storing the image, and then compresses the data in each raster. When we enlarge an image, we will find that many details in these 8*8 pixel rasters are removed, some special algorithms are used to fill the image with nearby colors (to make it clearer, I want to adjust the compression ratio of the image to a very low level ). This is also why we sometimes produce block blur when using JPG to store images.

Lossless Compression-the most precise puzzle

Compared with lossy compression, lossless compression will actually record the data information of each pixel in the image, but some special algorithms will be used to compress the size of the image file. The principle of lossless compression is to first determine which areas of the image have the same color and which are different, and then compress the same data information, (for example, a blue sky needs to record the starting and ending points), and save different data (for example, the white clouds and gradient data on the sky ).

PNG is our most common image format that adopts lossless compression. Before storing an image, lossless compression first determines where the image is identical and where it is different. Therefore, it is necessary to index (for example) all the colors that appear on the image ), these colors are called index colors. The index color is like the color palette for this image. When PNG displays the image, it uses the color palette to fill the corresponding position.

Here, we may wonder why the saved images in PNG format are still distorted since PNG adopts lossless compression? This is because lossless compression only means that the compression method will restore the image as much as possible, however, from its compression principle, we can know that it compresses and restores the color of the same area on the indexed image, this means that only when the number of colors displayed on the image is smaller than the number of colors that we can save can we truly record and restore the image, otherwise, some image information will be lost (png8 can only index up to 256 colors, so images with more colors cannot be actually restored; png24 can save more than 16 million colors, basically, we can actually restore all colors that our human eyes can use. PNG format can save up to 48 color channels ). However, for lossy compression, the image information is lost regardless of the color of the image.

JPG and PNG

We will not describe the basic information about jpg and PNG here. If you are interested in details, please go here:

What is jpg and what is PNG. In addition, we will not discuss GIF here because PNG is generated to replace GIF, and the PNG compression algorithm is better than GIF, therefore, if you do not need the animation effect, we strongly recommend that you use PNG images.

Here we may wish to make a simple comparison of JPG and PNG features:

Format compression mode staggered support transparent Support Animation support

JPG lossy compression is not supported.

Support for PNG lossless compression is not supported

JPG features

1. supports advanced compression of photographic or realistic images and controls the size of image files using the compression ratio.

2. lossy compression reduces the quality of image data and accumulates this loss when editing and re-saving JPG images.

3. jpg is not applicable to images with relatively small colors, areas with similar color blocks, or simple images with obvious brightness differences.

PNG features

1. The image file size can be compressed as much as possible to ensure the most true.

2. When PNG is used to store a grayscale image, the depth of the grayscale image can be up to 16 bits. When the color image is stored, the depth of the color image can be up to 48 bits, it can also store up to 16-bit alpha channel data.

3. Although PNG can be lossless compressed for complex images that require high fidelity, it is not suitable for applications on Web pages because of its large size of image files.

Png8 and png24

Png8 and png24 have to be mentioned when it comes to PNG format. This is not officially defined, but it is widely accepted. Based on the previous introduction, we know that PNG uses lossless compression to store and restore images through index colors, the numbers after png8 and png24 represent the maximum color values that can be indexed and stored in this PNG format." 8 "represents the power of 2, that is, 256 colors, and 24 represents that the power of 2 is about more than 16 million colors.

In addition, png8 also supports a one-bit Boolean transparent channel. The so-called Boolean transparent means either completely transparent or completely opaque. While png24 supports 8-bit (level 256) alpha channel transparency, that is, it can store a total of 256 levels of transparency (that is, the so-called translucent) from full transparency to full opacity ).

The maximum format supports color channel index color editing supports transparent support

Png8 256 colors support Boolean transparency

Png24 about 16 million colors do not support 8-bit (level 256) Alpha transparency

You may not be able to intuitively understand the formats of image files in actual applications by comparing the above features, let's explain it to you through several examples based on the above basic concepts.

Therefore, we can conclude that images with the following conditions are more suitable for png8 storage:

1. There are few colors on the image, and they are mainly filled with pure or smooth gradient.

2. Simple images with large brightness differences and strong comparisons (such as the background and text in the "Buy now" button ).

Based on experience, images with the above conditions are generally drawn using vector tools in PhotoShop or other software and saved as bitmap images.

Summary

It can be seen that jpg or PNG is used for image storage based on the color layers and color Quantity of the image. Generally, images with rich layers and more colors are stored in JPG format, while PNG is required for simple comparison of colors. However, there may also be some special situations. For example, although some images have rich color layers, but because the image size is small and the number of colors contained above is limited, you can also try to use PNG for storage. Some vector tools use a large number of filter effects to draw images that also form a rich color level. At this time, JPG needs to be used for storage.

Another principle is to use the basic visual elements of the page structure, such as the background, buttons, and navigation background of the container, which should be stored in PNG format as much as possible, in this way, the design quality can be better guaranteed. Other content elements, such as advertisement banner and product images, do not have extremely strict quality requirements. They can be stored in JPG to reduce the file size.