Shulou(Shulou.com)06/02 Report--

I would like to share with you an example analysis of the relationship between picture format and design in web design. I believe most people don't know much about it, so share this article for your reference. I hope you will gain a lot after reading this article. let's learn about it!

1. Basic concepts

To understand the characteristics of a picture format, you have to start with some basic concepts. This part may be boring to read, but if you have the patience to finish it, I believe you will benefit a lot.

Vector map and bitmap

Vector graph-perfect geometry

Vector graphics are displayed by calculating some basic elements that make up the graph, such as points, lines, faces, borders, filling colors and so on. Just as we can describe a circle in geometry by its center position and radius, of course, we can also describe its style by data such as the thickness, color and filling color of the border. The computer uses these data to draw the image we define when it is displayed.

The advantage of vector graphics is that the file is relatively small, and zooming in and out will not be distorted. The disadvantage is that these perfect geometric figures are difficult to represent realistic images with high degree of naturalness.

It should be emphasized that the images we use on web pages are bitmaps, even if some are called vector graphics (such as vector icon, etc.) are drawn by vector tools and then converted to bitmap format used on web (different from pixel-drawn graphics).

Bitmap-magical jigsaw puzzle

Bitmap, also known as pixel map or raster map, stores and displays the image by recording the color, depth, transparency and other information of each point in the image. A bitmap is like a large jigsaw puzzle, except that each piece is a solid color pixel. When we arrange these different color pixels together according to a certain rule, we form the image we see. So when we zoom in on a pixel image, we can see these mosaic-like pixels (such as the following image).

The advantage of bitmap is that it is beneficial 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 the images in JPG, PNG and GIF formats we use in web pages are bitmaps, that is, they all save and display images by recording the data of pixels, these images in different formats record these data in different ways, which involves the difference between lossy compression and lossless compression.

Lossy compression and lossless compression

Lossy compression-what you see is not necessarily real

According to my understanding, lossy compression is not completely true to record the data information of each pixel on the image when storing the image. it will process the image data according to the characteristics of the human eye observing the real world (the human eye is more sensitive to light than to color. Biological experiments show that when the color is missing, the human brain will use the nearest color to automatically fill the missing color). Remove the details from the image that will be ignored by the human eye, and then use nearby colors to fill them with gradients or other forms. This can not only greatly reduce the amount of data of image information, but also will not affect the effect of image restoration.

JPG is the most common image format that uses lossy compression to process image information. When JPG stores the image, it will decompose the image into 8x8-pixel grids (such as the image above), and then compress the data of each raster. When we enlarge an image, we will find that many details in these 8'-8pxel grid are removed and filled with nearby colors through some special algorithms (in order to let you see more clearly, I set the compression ratio of the image to very low). This is why we use JPG to store images sometimes resulting in block blur.

Lossless compression-the most accurate jigsaw puzzle

Compared with lossy compression, lossless compression will truly record the data information of each pixel on the image, but some special algorithms will be adopted to compress the size of the image file. The compression principle of lossless compression is to first determine which areas of the image are the same color and which are different, and then compress and record the same data information. (for example, the location of the starting point and end point of a blue sky needs to be recorded), while different data are saved separately (such as Baik Woo-Hwa gradient in the sky, etc.).

PNG is one of our most common image formats with lossless compression. Lossless compression determines where the image is the same and which is different before storing the image. For this reason, it is necessary to index all the colors on the image (such as the image above). We call these colors index colors. The index color is like drawing the "color version" of the image, and PNG will fill the corresponding position with these colors on the "color plate" when displaying the image.

Here you may wonder why the PNG images we saved are still distorted since PNG uses lossless compression. This is because lossless compression only means that its compression method will restore the image as truly as possible, but from its compression principle, we can know that it is compressed and restored by indexing the colors of the same area on the image. this means that only when the number of colors on the image is less than the number of colors we can save, can we truly record and restore the image. Otherwise, some image information will be lost (PNG8 can only index a maximum of 256colors, so images with more colors cannot be truly restored. PNG24 can save more than 16 million colors, basically can truly restore all the colors that we can distinguish with the human eye; PNG format can save up to 48-bit color channels). For lossy compression, no matter how many colors on the image, the image information will be lost.

JPG and PNG

I will not elaborate on the basic information about JPG and PNG here. Students who are interested in learning more about it can go here: what is JPG and what is PNG. In addition, we do not discuss GIF here, because PNG is born to replace GIF, and the compression algorithm of PNG is also better than GIF, so as long as there is no need for animation, it is strongly recommended to use PNG format images.

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

Format compression mode interleaving support transparent support animation support

Whether JPG lossy compression is supported or not

Does PNG Lossless Compression support

Characteristics of JPG

1. Advanced compression of photographic or realistic images is supported, and the compression ratio can be used to control the image file size.

2. Lossy compression will degrade the quality of image data, and this loss will accumulate when editing and re-saving JPG images.

3. JPG is not suitable for simple pictures with few colors, large areas with similar colors, or obvious differences in brightness. Characteristics of PNG

1. It can compress the size of the image file as much as possible without distortion.

2. When PNG is used to store grayscale images, the depth of grayscale images can be up to 16 bits, while when storing color images, the depth of color images can be up to 48 bits, and it can also store up to 16 bits of α-channel data.

3. For complex images that need high fidelity, PNG can compress lossless, but the picture file is large, so it is not suitable to be used on Web pages.

PNG8 and PNG24

When it comes to the PNG format, you have to mention PNG8 and PNG24, which is not an official definition, but it has been widely accepted because of its widespread use. From the previous introduction, we know that PNG uses lossless compression to store and restore images through index colors, while the numbers after PNG8 and PNG24 represent the maximum color values that can be indexed and stored in this PNG format. "8" represents 2 to the 8th power of 256colors, while 24 represents 2 to the 24th power of about 16 million colors.

Not only that, PNG8 also supports a 1-bit Boolean transparent channel, which means either completely transparent or completely opaque. PNG24 supports 8-bit (256th-order) alpha channel transparency, which means it can store a total of 256 levels of transparency from complete transparency to complete opacity (the so-called translucency).

Format maximum support color channel index color editing support transparent support

PNG8256 color support supports Boolean transparency

PNG24 about 16 million colors does not support 8-bit (256th-order) alpha transparency

Through the comparison of the above characteristics, we may not be able to intuitively understand which format of the picture file should be chosen in the practical application, we might as well combine the above basic concepts to explain it to you through several examples.

2. Practical application

When should I use PNG

Example 1

The following is one of the most common pictures on Taobao, the "Buy now" button. Here I try to save it in JPG and PNG8 format respectively. You can see that there are two noteworthy points in the saved results:

1. The file size saved by JPG is twice the size of the file saved by PNG.

2. JPG not only has a larger file, but also has noise (such as the red box in the figure).

So what is the reason for such a difference?

First of all, we can see that the "Buy now" button is drawn with vector tools in photoshop, its gradient fill is a very regular linear gradient, text colors and strokes are solid colors, so the color information contained in this image is very limited. According to the lossless compression features we introduced earlier, when storing the image in PNG, you only need to save a little color information to actually restore the image. For JPG format, the size mainly depends on the color level of the image, so in the case of less color but strong contrast, it can not compress the file size very well.

In addition, according to the lossy compression algorithm JPG will fill some deleted data information in the image by gradient or other ways to compress the image. Because of the large color difference between red and white in the image, JPG will fill some extra noise in the compression process, which will affect the quality of the image. This is why JPG is not good for storing large areas with similar colors and images with obvious differences in brightness.

Example 2

Let's take a look at another application scenario. The picture below is a Banner image used on the Taobao lottery page. Also saved with PNG8 and JPG, we can find that when saving with PNG8, not only the quality of the image is guaranteed, but the size of the image file is only 8.3K, while when saving with JPG 100%, the file size is increased to 44.2K. If you do not enlarge, you may not see the specific difference, but in fact, there will be unnecessary noise as before. If we want to achieve the compression ratio of PNG8 and use JPG 45% to save the image, the image will be seriously distorted.

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

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

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

According to experience, images with the above conditions are usually drawn by vector tools in photoshop or other software and then saved as bitmaps.

When should I use JPG

Example 1

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

The picture below is a picture of a bus, which we tried to store with JPG 60% (top left), PNG8 256 color without imitation (top right), PNG8 256 color diffusion imitation (bottom left) and PNG32 (lower right). It can be seen that when using JPG to store the image, it can not only achieve the maximum compression ratio, but also ensure the restoration effect of the original image as far as possible. When saving with PNG8, the size of the image file is larger and the distortion is more serious. Quality is guaranteed only in PNG24 format, but the file size is much larger than JPG.

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

For photography or realistic works, due to the influence of ambient light, the color level on the image is very rich. For example, the red area of the bus will form different areas of light and shade due to reflection, shadow and perspective. If you use PNG to save it, you need different shades of red to store this area. For the whole picture, PNG8's 256colors cannot fully index all the colors that appear on the image, so many colors will be lost during storage and distortion will occur. If you want to ensure the effect of the image, you need a wider range of color PNG24 to store, and the corresponding file size will increase.

The compression algorithm of JPG is more conducive to compress these complex color changes in the real world, so as to restore the visual effect of the image in the case of compressing the file size as much as possible.

Example 2

So does JPG only need to be used when storing photos? We might as well look at another example.

The picture below is a popular Weibo page recently, where we can choose different styles, each with a very distinctive background picture. When we try to save the background in different picture formats, we can find that the file size is only 36.3K when saving with JPG (the direct background is saved as), but the size is increased to 57.7K when using PNG8 256color without imitating color. Not only that, because of the lack of color, there are also some jagged color blocks on the image. In order to reduce the impact of these color blocks on image quality, we added the effect of diffusion color imitation to PNG8, when the file size reached 156.3K; and when using PNG24 completely undistorted preservation, the file size is 231.9K.

Although this background image is also made by photoshop, we can find that due to the use of a lot of real material (such as white clouds, ants, green leaves, etc.), and these real materials and photographic images will also have very rich color levels, so it is not suitable to be saved in PNG format. At this point, we should use the JPG format.

From this, we can draw a conclusion: for realistic photographic images or images with very rich color levels, using JPG image format can generally achieve the best compression effect.

According to experience, the images we use in the page, such as commodity pictures, advertisements made of portraits or physical materials, such as Banner, are more suitable to be saved in JPG picture format.

Summary

Thus it can be seen that the choice of JPG or PNG when storing the image is mainly based on the color level and the number of colors on the image. Generally, images with rich layers and more colors are stored in JPG, while those with simple colors and strong contrast need to be stored in PNG. However, there will be some special cases, for example, some images, although rich in color levels, can also be stored in PNG when the image size is small and contains a limited number of colors. The images drawn by some vector tools will also form rich color levels due to the use of more filter effects, so it is necessary to use JPG to store them at this time.

Another principle is that the basic visual elements for the page structure, such as the background of the container, buttons, navigation, etc., should be stored in PNG format as far as possible, so as to better ensure the quality of the design. While some other content elements, such as advertising Banner, commodity pictures, etc., are not particularly demanding on quality, you can use JPG to store to reduce the file size.

3. Thinking and practice

What kind of design is more suitable for web pages?

Be careful with the more "heavy" visual design elements

One of the major trends of web design in the Web2.0 era is that it is getting lighter and lighter. In addition to the aesthetic fatigue of highlights and rounded corners, designers also begin to realize that good design should be the perfect combination of content and form, not the stacking of form. Therefore, when applying those "heavy" visual effects, designers must think clearly about the purpose and significance of doing so, and whether it is consistent with the characteristics of the product and the temperament of the audience.

A typical example of "lightweight" design is a well-known website in China, which hardly uses any visual elements that require pictures, but through a simple CSS style, which can not only highlight the content, but also improve the speed of page access. So I strongly suggest that visual designers also have some knowledge of html and css (especially CSS3 achieves a lot of effects that used to be achieved by pictures, such as rounded corners and gradients), so that the product effect can be fully considered when designing.

The following e-commerce site uses too many meaningless visual elements, which not only does not achieve a good design effect, but also affects the performance of the page because of the need for too many picture elements.

If the product needs to use more "heavy" visual elements in the design, we can also choose the appropriate form of expression according to the characteristics of the picture format 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 colors and simple gradients), which not only achieves warm and outstanding visual effects, but also better compresses the file size while ensuring picture quality. The second Banner uses too complex gradient and strong contrast, and uses too many highlights and shadows in the local area, resulting in too many color levels of the picture. No matter using PNG or JPG format, it is impossible to optimize image quality and file size.

Of course, to take this example is not to ask designers to think too much about page performance when doing design, but to be clear about the effects and implementation costs of different design forms, and ask themselves why they do so in the design process.

The separation of content and form

For some special products that emphasize visual effects, such as event promotion pages or Mini Site. We can also use the picture format and some front-end knowledge to optimize the design, a more commonly used design method is the separation of content and form.

Such as the following some of the more popular foreign design styles, as well as the Weibo website mentioned earlier, are through a large background map to convey the artistic conception and render the atmosphere. One advantage of this is that you can centrally compress and optimize the visual elements that need to be used in the picture, without affecting the user's access speed because the load is too slow (the front-end implementation usually fills it with a similar background color first. Then gradually display the background image).

Personally, I think that the most important thing for good visual design is to convey artistic conception and render atmosphere, and the purpose of using filter effects such as highlights and shadows is only to achieve the unity of texture so as to better convey artistic conception and render atmosphere. Even in order to reflect the design quality, it is not necessary to use dazzling filters, compared to the beautiful layout and exquisite structure is the key to reflect the quality!

Greater performance improvement through smaller visual sacrifices

Sometimes in order to improve the loading speed of the page to achieve a better user experience, the design has to be optimized. At this time, the use of our knowledge of the picture format can be more purposeful to optimize.

For example, the following picture is a page header design of the "double Eleven" promotion activity on Taobao. Due to the large number of page visits and the use of more commodity pictures, the page header design has to be optimized to improve performance. At this point, we can remove some less important highlights, gradients, and shadows, thus greatly reducing the file size.

What else can we do?

Secondary optimization of Sprite pictures

At present, many domestic Internet companies do not have the position of page reconstructor, so page cutting and static code implementation are basically completed by front-end engineers. In order to improve the performance of the page, the commonly used implementation method is to focus the visual elements of the picture related to the page structure on a PNG picture, and then apply it to the page through the CSS style, we call this picture Sprite picture. As more visual elements are often concentrated on this picture, it is inevitable that distortion will occur when storing in PNG format, which will affect the quality of the picture. At this time, visual designers are needed to help front-end development engineers optimize Sprite images, which has the advantage of not only improving picture quality, but also reducing file size, which can be described as killing two birds with one stone.

The following image is a pre-optimized Sprite image. Due to too many visual elements, PNG8 can not really save all the color information, resulting in the loss of color and noise (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 positioned Sprite image at the pixel level, remove 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 images, such as deleting and replacing colors through index color sorting, or directly through pixel depiction. Designers can choose and deal with it according to the specific scene.

The above design and optimization methods are only the accumulation and summary of some experience in my work. I feel that each point has a lot to study and discuss, and I can't go further because of the limited space. There are two classic articles about the advanced skills of picture optimization: Clever PNG Optimization Techniques and Clever JPEG Optimization Techniques.

4. Appendix-the meaning and setting skills of various parameters in Photoshop

Parameter setting of PNG8

Algorithm of reducing color depth and color

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

1. Perceptible: create a custom color table by giving priority to more sensitive colors of the human eye.

2. Optional: create a color table that is similar to the "perceptible" color table, but is good for a wide range of color areas and preserving Web colors. This color table usually produces an image with maximum color integrity. Optional is the default option.

3. Sampability: create a custom color table by extracting color samples from the main chromatogram of the image. For example, an image that contains only green and blue produces a color table that consists mainly of green and blue. The colors of most images are concentrated in specific areas of the spectrum.

4. Web: use the standard 216color table commonly used in Windows and Mac OS 8-bit palettes. This option ensures that browser imitation is not applied to the color when the image is displayed in 8-bit colors. (this palette is also known as the Web Security palette.) Using Web palettes may create larger files, so this option is recommended only if avoiding browser color imitation is a priority.

5. Custom: use user-created or modified color palettes. If you open an existing GIF or PNG-8 file, it will have a custom palette. Use the Color Table palette in the Save formats for Web and Devices dialog box to customize the color lookup table.

6. Black and white, grayscale, Mac OS, Windows use a set of color palettes.

Suggestion: in general, you can choose "selectable" by default.

Color imitation method and color imitation

Determine the method and number of application color imitations. "Color imitation" refers to a method that simulates colors not provided in the computer's color display system.

A higher percentage of color imitation results in more colors and more detail in the image, but also increases the file size. For the best compression ratio, use a color imitation that provides the lowest percentage of the required color details.

If the color contained in the image is mainly solid color, it can usually be displayed normally without imitating color. Images that contain continuous tones, especially color gradients, may need to be imitated to prevent color striping.

You can choose one of the following color imitating methods:

1. Diffusion: apply random patterns that are usually less obvious than "pattern" imitations. The color imitation effect spreads between adjacent pixels.

2. Pattern: use a square pattern similar to halftone to simulate any color that is not in the color table.

3. Noise: apply a random pattern similar to the "diffusion" color imitation method, but do not spread the pattern between adjacent pixels. Seams do not appear when using the noise imitating method.

Suggestion: generally, it is only necessary to choose imitation color when there is too much distortion in the picture color. It is recommended to choose diffusion imitation, and the percentage of color imitation can be appropriately adjusted to achieve the best effect. The higher the chromaticity, the larger the file size.

Transparency and matte

Determines how to optimize transparent pixels in the image.

1. To make fully transparent pixels transparent and mix partially transparent pixels with a color, select Transparency, and then select a matte color.

2. To fill fully transparent pixels with one color and mix partially transparent pixels with the same color, select a matte color, and then deselect Transparency.

3. To select a matte color, click the matte swatch, and then select a color in the color picker. Alternatively, you can choose an option from the miscellaneous edges menu: eyedropper (use the color in the straw sample box), foreground color, background color, white, black, or other (using the color picker).

Suggestion: it is strongly recommended that the visual designer deal with the background of the transparent image before saving it according to the actual application scene.

Crisscross

Both PNG and GIF image formats provide a feature that allows images to be displayed faster. The image can be stored in a special way, showing a rough sketch of the image first, and then filling in the details when all the files are downloaded. This has a meaningful psychological effect because it gives people something to see without having to sit and wait for large images to slowly appear on the screen.

Suggestion: check this option for pictures that are relatively large in size and file size.

Parameter setting of 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 detail the compression algorithm retains. However, files generated with high quality settings are larger than those generated with low quality settings. View the optimized images under several quality settings to determine the best balance between quality and file size.

Quality setting skills

1. Do not save 100% quality JPG format pictures. Because 100% is not necessarily the highest quality, but the limit of an optimization algorithm, it increases unnecessary file size. It is recommended that 95% of the quality of the picture can be stored to minimize distortion.

2. Use compression ratio below 50% quality carefully. When using less than 50% quality storage, additional compression algorithms will be used, resulting in more serious image distortion, especially for pictures with high contrast.

Optimize

Select optimize to create an enhanced JPEG with a smaller file size. It is recommended to use the optimized JPEG format to get the maximum amount of file compression; however, some older browsers do not support this feature.

Suggestion: it is recommended to check this option. At present, there are basically no browsers that do not support the modification function.

Continuous

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

Suggestion: check this option to compress the file size in some cases (when the picture size is greater than 10k), in some cases it will increase the file size, it is recommended that the save is based on the actual situation. However, IE6 and earlier IE browsers do not support continuous JPG display, but an image after the image is fully loaded. The user experience may be better than not using continuous step-by-step imaging, so it is recommended to choose this option carefully.

Vagueness

Specifies the amount of blur applied to the image. The Blur option applies the same effect as the Gaussian Blur filter and allows the file to be further compressed to achieve a smaller file size. A setting between 0.1 and 0.5 is recommended.

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 of 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 menu. The completely transparent pixels in the original image are filled with the selected color, and some transparent pixels in the original image are mixed with the selected color.

The above is all the contents of the article "sample Analysis of the relationship between Image format and Design in Web Design". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.