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 concept vector graph and bitmap lossy compression and lossless compression 2, when should the actual application use PNG when should use JPG Summary 3, thinking and practice what kind of design is more suitable for Web pages? What else can we do? 4, appendix-photoshop the meaning of various parameters and setting skills 1, Basic concepts

To understand the characteristics of a picture format, 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 bitmap vector graphs-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 by vector tools (different from pixel-drawn graphics).

Bitmap-Magic Puzzle

A bitmap is also called a pixel or raster chart that 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 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, 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 real

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, when storing images, decomposes images into 8*8-pixel grids (pictured above), then compresses the data for each grid, and when we magnify an image, we find that many details of these 8*8 pixel grids are removed. Some special algorithms are used to fill in nearby colors (to make it more clear, I'm adjusting 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 may wonder why the PNG format image we saved is distorted because PNG uses lossless compression. This is because lossless compression simply says that its compression method restores images as real as possible, but from its compression principle we can know that it is compressed and restored by the same color on the indexed image, which means that only the number of colors appearing on the image is less than the number of colors we can save, We can truly record and restore the image, otherwise we will lose some image information (PNG8 can only index 256 colors, so the color of more images can not be true restore; PNG24 can save more than 16 million colors, basically can restore the human eye can be a true difference of all colors A maximum of 48-bit color channels can be saved in the PNG format. And for lossy compression, no matter how much color the image, will lose image information.

jpg and PNG

Introduction to the basic information about JPG and PNG here is not to repeat, interested in detailed understanding of the students can go here:
What is jpg and 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 interleaving support transparent support animation support JPG lossy compression support does not support PNG lossless compression support support does not support JPG feature 1, support for photographic images or realistic images of advanced compression, and the use of compression proportional to 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. PNG features 1, to compress the size of the image file as much as possible, while ensuring the least distortion. 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 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).

format supports the highest color channel index color edit support transparent support PNG8256 color Support Support Boolean transparent PNG24 about 16 million colors do 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, when the actual application should use the 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 save:

1, JPG file size is twice times the size of PNG save 2, JPG not only file larger and also appear noise (as shown in the red box callout)

So what is the cause of such a difference?

First we can see that the "Buy Now" button is drawn in Photoshop with vector tools, its gradient fill is very regular linear gradient, text color and stroke, etc. are pure color, so the image contains very limited color information. Based on the lossless compression feature we described earlier, when you store this image in PNG, you can actually restore the image by saving only a few color information. And for the JPG format is mainly determined by the color level of the image, so in this color less but strong contrast, but not very good compressed file size.

In addition, the compression algorithm based on lossy compression, JPG will be in the image through the gradient or other means to populate some of the deleted data information to compress the image, red and white in the picture because of the large color difference, JPG in the compression process will fill some extra noise in, but affect the quality of the image. This is why JPG is not good for storing images with large areas of similar color and very distinct brightness differences.

Example 2

Let's look at another application scenario, which is a banner image used on the Taobao lottery page. Also saved with PNG8 and JPG, it can be found that when saving with PNG8 not only the image quality is guaranteed and the image file size is only 8.3K, but when using JPG 100% Save the file size increased to 44.2K, if not magnified may not see the specific differences, but the actual and the same as before will appear unnecessary noise. If we want to achieve PNG8 compression rate with JPG 45% to save, the image will appear more serious distortion.

From this we can conclude that images with the following conditions are more suitable for storing in PNG8 format:

1, the color of the image is less, and mainly in a solid color or smooth gradient to fill. 2, with large brightness differences and strong contrast to simple images (such as the "Buy Now" button in the background and text).

According to the experience of the above conditions of the image is generally used in Photoshop or other software vector tools to draw and then saved as a bitmap image.

When should

use JPG Example 1

From the characteristics of JPG we know that JPG is more suitable for storing photographic or realistic images, so we might as well try to take a photographic work first.

The image below is a photo of a bus, we try to store it using JPG 60% (upper left), PNG8 256 color without imitation (upper right), PNG8 256 color diffusion imitation (lower left), PNG32 (bottom right). Can be seen when using JPG to store images not only to achieve the maximum compression rate, but also to ensure that the original image of the restoration effect. But the image file size is bigger and the distortion is more serious when using PNG8 to save. Quality is guaranteed only in the PNG24 format, but the file size is much larger than JPG.

The reason for this result is also related to the compression algorithms of JPG and PNG.

For photography or realistic works, due to the impact of ambient light, the color level of the image is very rich. For example, the red area on the bus is due to reflect, shadow and perspective effects will form the light and shade, different shades of the region, if you use PNG to save, you need to the red color to store the region. For an entire picture, a PNG8 256-color cannot fully index all the colors that appear on the image, so you lose a lot of color when you store it, resulting in distortion. If you want to ensure the effect of the image, you need more color range of PNG24 for storage, the corresponding file size will increase.

JPG's compression algorithm is more conducive to the real world of these complex color changes in the compression process, so as far as possible to compress the file size of the case better restore the visual effects of the image.

Example 2

Is it only necessary to use JPG when storing photos? Let us consider another example.

The image below is a recent popular microblogging page, where we can choose a different style, each style will have a very distinctive background picture. When we try to save the background with different picture formats, we can find that the file size is only 36.3K when you save with JPG (the direct background is saved as); PNG8 256 color without imitation color to save when the size increased to 57.7K, not only because of the lack of color in the image also appeared some jagged color block; In order to reduce the effect of these color blocks on the image quality, we have added the effect of diffusion imitation color to PNG8, at this time the file size reached 156.3K, and when the PNG24 is completely undistorted, the file size is 231.9K.

Although this background image is also made by Photoshop, we can find that because of the use of a lot of real material on the image (such as clouds, ants, green leaves, etc.), and these real materials and photographic images will have a very rich color level, so it is not suitable for the PNG format to save. This time we should adopt JPG format.

From this we can conclude that the best compression effect can be achieved by using JPG image format for realistic photographic images or images with very rich color levels.

Based on the experience we use in the page of the product picture, using portrait or physical material produced by advertising banner and other images more suitable for use JPG image format preservation.

Summary

This shows that when the image is stored using JPG or PNG mainly based on the color level of the image and the number of colors to choose. The general level of rich color more images using JPG storage, and the color of simple contrast strong need to use PNG. But there are also special situations, such as some images that, despite their rich color levels, can be tried to store with PNG because of the small size of the image and the limited number of colors it contains. Some vector tools to draw the image due to the use of more filter effects will also form a rich color level, this time need to use JPG to store.

There is also a principle for the page structure of the basic visual elements, such as the container background, buttons, navigation background and so should be as far as possible in PNG format storage, so as to better guarantee the quality of the design. Some other content elements, such as advertising banner, merchandise pictures and other quality requirements are not particularly harsh, you can use JPG to store to reduce file size.

3, thinking and practice what kind of design is more suitable for Web pages? Careful use of "heavy" visual design elements

The trend of web design in Web2.0 times is more and more "light". In addition to the aesthetic fatigue of the effects of high light and rounded corners, designers are beginning to realize that good design should be a perfect combination of content and form, not a form of piling up. So designers in the use of those more "heavy" visual effects, it is important to understand the purpose and significance of this, and whether the product and the characteristics of the audience with the temperament.

"Lightweight" design a more typical example is a well-known web site, almost no need to use any visual elements of the picture, but through a simple CSS style to achieve, so as not only to highlight the content, can improve the speed of the page access. So I strongly recommend that visual designers also have some knowledge of HTML and CSS (especially CSS3 to achieve many of the effects that used to be needed in the past, such as rounded corners and gradients), so that the design can be fully considered when the product effect.

The following E-commerce site uses too much meaningless visual elements to stack, not only did not achieve a good design effect, but because of the need for too many picture elements and affect the performance of the page.

If the product needs to be in the design to use a more "heavy" visual elements, we can also according to the characteristics of the image format to choose the appropriate form to achieve better results.

For example, in the following example, the first banner applies a design style that is more suitable for PNG format (more solid color and simple gradient application) not only to achieve a warm, outstanding visual effects, while ensuring the quality of the picture while also better compressed file size and the second banner because of the application of too complex gradient and strong contrast, and in the local area with too many high light and shadow effect, resulting in too much color layer, whether PNG or JPG format to save the image quality and file size optimization.

Of course, this example is not to designers in the design of the time to consider the page performance problem, but to understand the meaning of different forms of design and implementation costs, in the design process to ask yourself why to do so?

Separation of content and form of

For some of the more emphasis on visual effects of special products, such as Activity promotion page or Mini Site. We can also use the image format and some front-end knowledge to optimize the design, a more common design method is the separation of content and form.

Some of the following foreign popular design style, as well as the previous mentioned Sina Weibo, are through a large background map to carry out the artistic conception of the transmission and atmosphere of rendering. One advantage of this is that the visual elements that need to be used in the picture can be optimized centrally, while the user's access speed will not be affected by the slow loading (the front-end implementation usually uses a similar background color to fill first, then the background image is gradually displayed).

Personally think that good visual design is the most important artistic conception and atmosphere rendering, use of high light, shadow and other filter effect is only to achieve the unity of the texture to better convey the mood and rendering atmosphere, so avoid the texture and texture. Even in order to embody the design quality is not necessarily to use the bright filter, compared to the beautiful layout and exquisite structure is the key to reflect the quality!

a larger performance boost through smaller visual sacrifices

Sometimes in order to improve the loading speed of the page to achieve a better user experience, have to optimize the design. This time using our knowledge of picture format can be more purposeful to optimize.

For example, the following figure is Taobao "double 11" big promotion activities of a page head design, because the page access is very large and to use more merchandise pictures, have to optimize the design of the page to improve performance. This time we can remove some of the less important high light, gradient and shadow effects, thus greatly reducing the file size.

What else can we do? Sprite picture two times optimization

Because the current domestic many Internet companies do not have page reconfiguration division this position, so page Chettu and static code to achieve basic is the front-end engineers to complete. The most common way to improve page performance is to focus the visual elements associated with the page structure on a PNG picture, and then apply it to the page through CSS styles, which we call the sprite picture. Because this image is often concentrated on a large number of visual elements, in the PNG format storage will inevitably produce distortion and affect the quality of the picture. This time need visual designer to help front-end development engineers to optimize the sprite picture, the advantage of this is not only to improve the quality of the picture, but also to reduce the size of the file effect, can be both.

The image below is an optimized sprite image, because too many visual elements PNG8 not be able to save all the color information, resulting in the loss of color and noise generation (as shown in the local enlarged image).

After the front-end engineer completes the static code of the page, the visual designer can optimize the pixel level of the sprite picture, remove the unnecessary noise, and supplement the missing place with the existing index color, which can not only compress the file size, but also improve the design quality.

There are many ways to optimize sprite pictures, such as color deletion and substitution through indexed color sorting, or optimization by pixel depiction. Designers can choose and deal with specific scenes.

The above design and optimization methods are only my experience in the work of the accumulation and summary, personal feeling every point unfolds there are many worthy of research and discussion, limited space can not continue to deepen. Advanced Techniques for picture optimization There are two more classic articles recommended to you: Clever PNG optimization techniques, Clever JPEG optimization techniques.

4, Appendix-photoshop the meaning of various parameters and setting skills PNG8 parameter Settings

reduced color depth algorithm and color

Specifies the method used to generate a color lookup table and the number of colors you want to use in the Color lookup table. You can choose one of the following algorithms to reduce color depth:

1, perceptible: Creates a custom color table by assigning precedence to the sensitive color of the human eye. 2, Optional: Create a color table, similar to the "Perceptual" color table, but good for a wide range of color areas and preserve the Web color. This color table typically generates images with the highest color integrity. Selectable is the default option. 3, with the sample: by extracting color samples from the main color spectrum of the image to create a custom color table. For example, images that contain only green and blue produce a color table consisting primarily of green and blue. The color of most images is concentrated in a specific area of the color spectrum. 4, Limited (WEB): Use the Windows and Mac OS 8-bit (256-color) palette common standard 216 color color table. This option ensures that when you use 8-bit color to display an image, you do not apply a browser faux color to the color. (This palette is also called Web Security palette.) Using a Web palette may create larger files, so this option is recommended only if you avoid browser profiling as a priority. 5. Custom: Use user created or modified palette. If you open an existing GIF or PNG-8 file, it will have a custom palette. Use the Color table palette in the save for Web and Device Format dialog box to customize the Color lookup table. 6, black and white, grayscale, Mac OS, Windows uses a set of palettes.

Recommendation: In general, select the option by default.

Imitation color method and imitation color

Determines the method and number of application profiling. Imitation color refers to a method that simulates the color of a computer to display colors that are not available in the system.

A higher percentage of profiling causes more colors and more detail in the image, but it also increases the file size. For the best compression ratio, use a fake color that provides the minimum percentage of color detail you want.

If the image contains a color that is primarily solid, it is usually displayed normally when the imitation color is not applied. Images that contain continuous tones, especially color gradients, may need to be imitated to prevent color bands from appearing.

You can choose one of the following color-profiling methods:

1, Diffusion: Application and "pattern" imitation hue than usually less obvious random patterns. The color-imitating effect spreads between adjacent pixels. 2, Pattern: Using a similar halftone square pattern to simulate any color in the color table. 3. Noise: Apply random patterns similar to the "diffusion" method, but do not diffuse the patterns between adjacent pixels. Seams are not present when you use the noise profiling method.

Recommendation: Generally only in the picture color too much distortion of the case to select the imitation color. It is recommended to choose diffusion imitation color, you can adjust the percentage of imitation color to achieve the best results. The higher The imitation chroma, the larger the file size is.

transparency and miscellaneous edge

Determines how transparent pixels in the image are optimized.

1, to make a fully transparent pixel transparent and to mix partially transparent pixels with a color, select transparency, and then select a matte color. 2. To fill the fully transparent pixel with one color and mix the partially transparent pixels with the same color, select a matte color and deselect transparency. 3. To select a matte color, click the matte swatch, and then select a color in the color picker. Alternatively, you can select an option from the Matte menu: eyedropper (using the color in the eyedropper Swatch box), foreground color, background, white, black, or other (using the color picker).

Recommendation: It is highly recommended that visual designers deal with the background of transparent images before they are saved according to the actual application scenario.

staggered

Both PNG and GIF formats provide a feature that allows images to be displayed more quickly. Images can be stored in a special way, showing a rough sketch of the image first, and then filling in the details when the file is downloaded. This has a very meaningful psychological effect because it allows people to have something to look at without having to sit around and wait for large images to slowly appear on the screen.

Recommendation: For pictures with relatively large size and file size, this option is checked.

Parameter settings for

jpg

Quality

Choose an option from the Quality level menu, or specify a value in the Quality text box. The higher the quality setting, the more details the compression algorithm retains. However, using a high quality setting is larger than a file generated with a lower quality setting. Look at the optimized images under several quality settings to determine the best balance between quality and file size.

Quality Setting Tips 1, do not save 100% quality jpg images. Because 100% is not necessarily the highest quality, but the limit value of an optimization algorithm, it will increase the unnecessary file size. It is recommended to store 95% quality pictures to minimize distortion. 2, cautious use of 50% quality below the compression rate. Using the following quality storage for 50% uses an additional compression algorithm that results in more severe image distortion, especially for high-contrast images. Optimize

Select optimize to create an enhanced JPEG with a slightly smaller file size. It is recommended that you use the Optimize JPEG format for maximum file compression, but some older browsers do not support this feature.

Continuous

Select continuous to create an image that is displayed continuously in a Web browser. The image is displayed as a series of overlays, allowing viewers to see the low-resolution version of the image before downloading the entire image. Continuous JPEG requires more memory for viewing, and some browsers do not support this option.

Fuzzy

Specifies the amount of blur applied to an image. The blur option applies the same effect as the Gaussian blur filter, and allows further compression of the file for a smaller file size. It is recommended that you use a setting between 0.1 and 0.5.

ICC Profile

Select ICC profile to keep the ICC profile of the picture with the file. ICC profiles are used by some browsers for color correction. (see Setting up Color Management in Photoshop.) ）

Miscellaneous Edge

Specify the fill color for transparent pixels in the original image: Click the matte swatch, and then select a color in the color picker. Choose an option from the Miscellaneous Edge menu. The fully transparent pixels in the original image are filled with the selected color, and some of the transparent pixels in the manuscript image are mixed with the selected color.

Source: http://ued.taobao.com