Some suggestions on CSS image optimization

CSS image optimization is to compress the size of the picture, speed up the page loading speed, which is very useful for large web sites. Do not underestimate it, it can greatly improve the speed of Web page loading. The usual method is to use CSS sprites.

The goal of CSS sprites (image integration technology) is to speed up page loading by consolidating images and reducing the number of requests to the server. Presumably a lot of people are already using this technology, I give you a brief introduction, summed up my use of CSS sprite some skills.

CSS Sprites Implementation Method:

First, the small picture is integrated into a large picture, and then according to the specific icon in the larger picture position, to the background positioning.

CSS Sprites Technical Essentials Summary:

1. Small picture integration, according to the order from top to bottom, instead of a picture next to a picture from left to right. This arrangement background-position value at a glance, write CSS convenient many. At the same time also for the sake of later maintenance. Imagine that if you change the size of one of the pictures at post maintenance, the background-position of all the elements around you will change, which is going to be a big headache.

2. Small picture integration as far as possible by the leftmost or the rightmost. These two positions are very flexible, very suitable for placing the icon before the text, and then write the style will not be subject to other CSS sprites image interference. In the 1th, we can integrate the picture from top to bottom along the left and right sides.

3. It is not recommended to leave the interval between the different small pictures. Because this causes the size of the picture to increase, thereby increasing the file sizes. There is no need for these intervals to exist.

4. Put the color of the picture closer or the same combination can reduce the number of colors, because the small color number of the picture file volume will be relatively little.

Picture optimization:

When we integrate all the small pictures into a large image, we should begin to consider the problem of picture optimization. You can look at the file size of the picture now. is not some disappointments, it doesn't matter, the following steps can solve it.

Because the general integration of the larger picture background is basically all transparent, so we will save as PNG format. You may say that GIF is smaller than the PNG file size, we are not to optimize it, why not gif? Because GIF images have many jagged edges in the process of processing corners such as curves, or slashes, which we do not want to see. And may lose some small picture pixels close to the white. Besides, we can find a smaller format than GIF, which is the PNG8 format I'm going to introduce today.

For non animated GIFs it is recommended that you use PNG8 because it works the same way as the original PNG picture, and saves you 10% to 30% of the file size, even more than the GIF picture.

How do I turn a picture into PNG8 format

1. Picture preparation: No matter what you are drawing software drawings, as long as the normal operation to save the PNG format. There is no Png8 operation in Photoshop, so we need to turn to fireworks.

2. Open a large, integrated image in fireworks.

3. Select File-Image preview.

4. In the "format" drop-down box to select PNG8, nothing else to choose from, directly click the "Export" button to select a path on it.

It's easy to look at the size of your Png8 picture and compare it to the previous one. You'll have a surprise!~~ look at the quality of the picture, it's perfect~~