Picture formatting and design that thing.

The first time to write technical blog, there are not satisfactory place, but also forgive and correct me.

Why want to organize this kind of content, I feel like a painter to understand his paint and canvas, sculptor to understand his stone, as a web designer should also have some understanding of the characteristics of the picture format, so as to better express your ideas and ideas.

In addition, we also encounter many problems with the format of the picture in our daily work. For example, designers will wonder why some pages of output are always unable to achieve the design of the quality and effect of the draft, what kind of design is more suitable for Web pages; page refactoring and front-end engineers want to know what picture format to use when Chettu, and how to set parameters to achieve optimal quality and performance.

There are times when we may be able to reduce the quality of the design and the performance of the page because of an incorrectly formed image. Understanding the nature of the image format is to solve these puzzles so that we design products better and faster.

This article mainly includes the following aspects:

1. Basic Concepts

Vector graphs and bitmaps

lossy compression and lossless compression

2. Practical Application

When should I use PNG?

When should I use JPG?

Summarize

3. Thinking and Practice

What kind of design is more suitable for Web pages?

What else can we do?

4. The meanings and setting techniques of various parameters in appendix-photoshop

1. Basic Concepts

To understand the characteristics of the format of a picture, first start with some basic concepts. This may be tedious to read, but it would be much more rewarding if you read it with patience.

Vector graphs and bitmaps

Vector Graph-Perfect geometry

Vector graph is to display the graph by means of some basic elements, such as dots, lines, faces, borders, fill color, etc. As we describe in geometry, a circle can be described by its center position and radius, and, of course, its style can be described by its thickness, color, and color of the fill. And when the computer is displayed, the data is used to draw the image we defined.

The advantage of vector graphs is that the files are relatively small, and zooming in and out does not distort. The disadvantage is that these perfect geometries are difficult to represent a natural, realistic image.

What you need to emphasize is that the images we use on our web pages are bitmaps, even if some are called vector graphics (such as vector icon, etc.) and are used on the Web using vector tools (different from pixel-drawn graphics) and then converted to bitmap format.

Bitmap-The Magic puzzle

A bitmap is also called a pixel or raster chart, which stores and displays images by recording the color, depth, and transparency of each point in the image. A bitmap is like a big puzzle, but each tile is a solid color pixel, when we put these different colors of pixels in accordance with a certain pattern of the time, it formed the image we see. So when we zoom in on a pixel graph, we can see the same pixel points as these tiles (pictured below).

The advantage of bitmaps is that it helps to display realistic images with rich color levels. The disadvantage is that the file size is large, zooming in and out of the image will be distorted.

Although we use JPG in the Web page, PNG, GIF images are bitmaps, that is, they are recorded pixel data to save and display the image, but the different format of the images in the way the data are recorded, which is related to lossy compression and lossless compression differences.

lossy compression and lossless compression

lossy compression-What you see is not necessarily true

According to my understanding lossy compression is not completely true when storing images of the image of each pixel data information, it will be based on the human eye to observe the characteristics of the real world (the human eye on the light sensitivity than the color sensitivity is higher, Biological experiments have shown that when the color is missing, the brain uses the closest color to automatically fill the missing color to process the image data, remove the details that the image will be ignored by the human eye, and then use the nearby color to fill it with gradients or other forms. This can not only greatly reduce the data volume of image information, but will not affect the image restoration effect.

JPG is our most common picture format that uses lossy compression to process image information. JPG decomposes the image into a 8*8 pixel grid (pictured above) when storing the image. Then the data for each grid is compressed, and when we magnify an image, we find that many of the details in these 8*8 pixel grids are removed, and some special algorithms are used to populate the nearby colors ( In order for everyone to see more clearly I have the compression ratio of the image to very low. This is also why we use JPG to store images that sometimes produce blocky blur.

Lossless compression-The most accurate jigsaw puzzle

In the case of relative lossy compression, lossless compression will actually record the data information of each pixel on the image, but some special algorithms will be adopted to compress the image file size. The compression principle of lossless compression is to first determine which areas of the image are the same color, which are different, and then compress the same data to record, (for example, a blue sky needs to record the starting point and the location of the end), and save different data (such as clouds and gradients in the sky).

PNG is one of our most common forms of image lossless compression. Lossless compression determines which parts of the image are the same and where it is different before storing the image, so that all of the colors appearing on the image are indexed (pictured above) and we call these colors index colors. The index color is like a "palette" of this image, and PNG uses these colors on the palette to fill the corresponding position when the image is displayed.

Everyone here might be wondering. Since PNG uses lossless compression, why is there distortion in the PNG format image we saved? This is because lossless compression simply says that its compression method restores the image as real as possible, But from its compression principle, we can know that it is compressed and restored by the color of the same area on the indexed image. This means that only if the number of colors appearing on the image is less than the number of colors we can save, we can actually record and restore the image, otherwise we will lose some image information ( PNG8 can only index 256 kinds of colors, so the image of more color can not be true restore; PNG24 can save more than 16 million kinds of colors, basically can restore our human naked eye can be different color; The PNG format can hold up to 48-bit color channels. And for lossy compression, no matter how much color the image, will lose the image information.

JPG and PNG

Introduction to the basic information about JPG and PNG here is not to repeat, there are interested in detailed understanding of the students can go here: what is jpg, what is PNG. Also here we don't talk about GIF because PNG is meant to replace GIF, and PNG's compression algorithm is better than GIF, so it's strongly recommended to use PNG format as long as it's not animated.

Here we might make a simple comparison of some of the features of JPG and PNG:

Format compression mode interleaved support for transparent support for animation support

JPG lossy compression support does not support unsupported

PNG lossless compression support support not supported

The characteristics of JPG

1, support photographic image or realistic image of advanced compression, and can use the compression ratio control image file size.

2, lossy compression will reduce the quality of image data, and in the editing and re-save JPG image, this loss will accumulate.

3. jpg does not apply to a simpler picture with a small color, a region with a large color, or a sharp difference in brightness. Features of PNG

1, to ensure the least distortion of the case to compress the size of the image file as much as possible.

2. When PNG is used to store grayscale images, grayscale images can be as deep as 16 bits, and when storing color images, the depth of the color image can be as much as 48 bits, and can store up to 16 bits of alpha channel data.

3, for the need for high fidelity of the more complex images, PNG although lossless compression, but the picture file is large, not suitable for use on the Web page.

PNG8 and PNG24

The reference to the PNG format had to mention PNG8 and PNG24, a term that was not officially defined, but was widely accepted because of its widespread use. We know from the previous introduction that PNG uses lossless compression to store and restore images through an indexed color, followed by PNG8 and PNG24 to represent the most indexed and stored color values for this PNG format. "The 8″ represents 2 of the 8 times is 256 color, and 24 represents 2 of 24 times the square is about more than 16 million colors."

Not only that, PNG8 also supports 1-bit Boolean transparent channels, the so-called Boolean transparency refers to either completely transparent or completely opaque. While PNG24 supports 8-bit (256-level) alpha channel transparency, that is, it can store a total of 256 levels of transparency from full transparency to total opacity (known as translucent).

Highest format support color channel index color edit support transparent support

PNG8256 Color Support supports Boolean transparency

PNG24 about 16 million colors does not support 8-bit (256-step) alpha Transparency

Perhaps through the above characteristics of the comparison, we can not very intuitive understanding in the actual application of the choice of what format of the picture file, we may wish to combine the above basic concepts through a few examples to explain.

2. Practical Application

When should I use PNG?

Example 1

The image below is one of the most common Taobao pictures, the "Buy Now" button, where I try to save it in JPG and PNG8 format, and I can see that there are two notable places to keep the results:

1, JPG saved file size is PNG saved file size twice times

2, JPG not only file larger and also appear noise (as shown in the red box)

So what is the cause of such a difference?