For users of Photoshop software, share a picture compression technique when you save your pictures.
Recently in doing WebApp, found that the size of the product map no matter how compressed there are still 20-30kb, such size in the Search list page is not a small number. After our backstage remind, said that there is a picture of the East Beijing 220*220px-96dpi-6.62kb~~ in order to find out, I did the following experiment!
In the front page, there is a general conclusion about the compression of the product and banner graphs:
1. Physical drawings tend to be in jpg/jpeg format;
2. Images with large brightness differences and strong contrasts tend to be in PNG format.
Note: This article at the end of the detailed said the above conclusions.
But this article also puts forward a point of view: "JPG format, cautious use of 50% quality below the compression rate"
At first glance the compression rate below 50% seems to be mined (I've been fooled by this phrase) ....
So I have been using an online compressed image URL to compress the picture: https://tinypng.com
In the case of low demand, it is very easy to use. Depending on the content and size of the picture, the compression rate varies between 60% and 90%.
Casually find a few pictures, 100-200kb map, compressed to 20-30kb has been heaven, really curious 220*220-96dpi-6.6kb how to do it!
-----------------------------------------------------Split Line------------------------------------------------------
So today I did an experiment to compress the artwork for 800*800px-96dpi-75kb to 220*220PX-96DPI-6.6KB,
Note here that you must use this function of PS (screenshot version: PS CS6 13.0):
And in the PS CC16.0 version of this option is not!
-----------------------------------------------------Open------------------------------------------------------
First attached to the original image of the screenshot, the 3 pictures are directly down from the east of Beijing.
1. Change the 800*800 size of the picture to 220*220, this everyone will, here slightly.
2. "Store as Web format using PS ..." In fact, as long as the storage quality selected to about 40 (I to test, found that the value of 39 to generate the file size closest to the original image) then click on the "Save" button below the figure. It's done.
In this case, the image of 220*220-96dpi can be compressed to 6KB, and on the phone, there is almost no difference between 100 quality and 40 quality, in other words, only a little bit of the naked eye is difficult to distinguish the clarity, in exchange for a smaller picture size.
This article is purely used to warn yourself not to take it for granted that some so-called "conclusions" on the Web do not necessarily use all situations.
-----------------------------------------------------Supplementary Knowledge------------------------------------------------------
"Jing Dong background picture optimization skills" Author: pointnet
The document mainly includes the following aspects:
The meanings and setting techniques of various parameters in Photoshop
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). Images in jpg, PNG, and GIF format used in Web pages are bitmaps.
Advantages: It is beneficial to display realistic images with rich color levels.
Disadvantage: Large file size, magnified and reduced image will be distorted.
Some features of JPG and PNG are compared:
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.
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.
The reference to the PNG format can be divided into PNG8 and PNG24, followed by a number that represents 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."
The PNG8 also supports 1-bit Boolean transparent channels, which are called Boolean transparency, 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 support color channel
Indexed color Editing support
Support for Boolean transparency
Supports 8-bit (256-step) alpha Transparency
Because the GIF is now used in a low rate, often applicable to GIF animation, because PNG itself is the developer to replace the GIF to derive from the format of the picture, so the transparent picture suggested using PNG8.
GIF file data, is a continuous tone based on the LZW algorithm lossless compression format. Its compression rate is generally around 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, and if you read and display multiple image data in one file to the screen, you can create a simple animation.
The following figure for the Jingdong Mall header is stored in JPG and PNG8 format, you can see that the results of the preservation of the two noteworthy places:
1, JPG saved file size than PNG saved file is large
2, JPG file appears the noise point
Cause analysis of the results:
1, first of all, we found that the text color and stroke are all using a solid color, the image contains a very limited color information. 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.
The following figure is saved with PNG8 and JPG, and it is found that when saved 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 the PNG8 compression rate with JPG 45% to save, the image will appear more serious distortion.
Conclusion images with the following conditions are more suitable for storing in PNG8 format:
1, the image of less color, 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).
The following figure is stored in 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.
Cause analysis of the results:
The reason for this result is also related to the compression algorithms of JPG and PNG.
1, for photography or realistic works, due to the impact of environmental light, the image on the level of color 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.
2, JPG 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.
The following illustration shows you how to save a background with a different picture format: When you save with JPG (the direct background is saved as) The file size is only 36.3K; with 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 serrated color block; In order to reduce the effect of these color blocks on the image quality, we have added a diffusion-like effect to the PNG8, at which time the file size reached 156.3K, and the file size is 231.9K when the PNG24 is completely undistorted.
Cause analysis of the results:
We can find that because of the use of the image of a lot of real material (such as white 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.
Conclusion images with the following conditions are more suitable for storing in JPG format:
For a realistic photographic image or a very rich color image format to use JPG images to save generally can achieve the best compression effect.
Using JPG or PNG when storing images is primarily based on the color levels and the number of colors on the image. 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 picture 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 the PNG format storage, so as to better ensure the design quality. 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, the meaning of various parameters in Photoshop and setting skills
Parameter settings for PNG8
Reduce 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:
Perceptible: Creates a custom color table by assigning precedence to the more sensitive color of the human eye.
Optionally: Create a color table that is similar to the perceptual color table but advantageous for a wide range of color areas and for retaining Web colors. This color table typically generates images with the highest color integrity. "Selectable" is the default option.
Follow-up: Creates a custom color table by extracting the color swatch from the main color spectrum of the image. 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.
Limited (WEB): Standard 216-color color tables that are common with Windows and Mac OS 8-bit (256-color) palette. 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.
Custom: Use a palette created or modified by the user. 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.
Black and white, grayscale, Mac OS, Windows uses a set of palettes.
PS: In general, select the optional item 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:
Diffusion: Applying random patterns that are less obvious than the "pattern" imitation hue. The color-imitating effect spreads between adjacent pixels.
Pattern: Simulates any color that is not in the color table using a square pattern that resembles a halftone.
Noise: Applies random patterns similar to the diffusion method, but does not diffuse patterns between adjacent pixels. Seams are not present when you use the noise profiling method.
PS: generally only in the picture color too much distortion in the case of the need 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 edges
Determines how transparent pixels in the image are optimized.
To make a fully transparent pixel transparent and mix partially transparent pixels with a color, select transparency, and then select a matte color.
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.
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)
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.
PS: This option is selected for pictures that are relatively large in size and file size.
Parameter settings for JPG
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.
Do not store a 100%-quality jpg format picture. Because 100% is not necessarily the highest quality, but a numerical optimization of the bottom line, eventually you will get an unreasonable large file. In fact, setting the quality above 95 is enough to prevent the loss of information.
There is a watershed in quality, which is why we usually recommend that JPG be of the best quality in 60-80.
Use the compression rate below 50% quality carefully. When the quality is set below 51 in Photoshop, it performs another optimization algorithm called "Color Down-sampling", which is sampled evenly around 8 pixels, resulting in noise at the edges.
Using the following quality storage for 50% uses an additional compression algorithm that results in more severe image distortion, especially for high-contrast images.
Legend (left is mass 50 right is mass 51)
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.
PS: It is recommended to check this item, there is no browser that does not support the change function at present basically.
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 the entire image is downloaded. Continuous JPEG requires more memory for viewing, and some browsers do not support this option.
PS: Check this item in some cases can be compressed file size (picture size is greater than 10k), in some cases will increase the size of the file, it is recommended that the preservation is based on the actual situation. However, IE6 and earlier versions of IE browsers do not support JPG continuous display, but in the picture after the full load of the image, the user experience may not be better than using continuous progressive imaging, so it is recommended to choose this option carefully.
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.
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.) )
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.
Well, the above information is small to give you photoshop this software users to save pictures when the image compression techniques to share all the content, you see the users of Photoshop software here, small knitting believe you now very clear skills, So, you guys, come along and take a look at the little weave.
