Suggestions on how to optimize CSS images

This article mainly introduces the CSS image optimization of some relevant suggestions, mainly for the Sprites picture integration technology to make a brief introduction, the need for friends can refer to the next

CSS image optimization is to compress the size of the image as much as possible, speed up the page load, which is very useful for large sites. Do not underestimate it, it can greatly improve the page loading speed. The usual approach is CSS sprites.

The goal of CSS Sprites (Image integration technology) is to speed up page loading by consolidating images to reduce the number of requests to the server. Presumably a lot of people are already using this technique, I'll give you a brief introduction and summarize some of the techniques I used when using CSS sprites.
　CSS Sprites Implementation Method:

First, the small picture is integrated into a large picture, and then according to the specific icon on the large map position, to the background positioning.
　CSS Sprites Technical Essentials Summary:

1. Small picture integration, in order from top to bottom, instead of a picture next to a picture from left to right. This arrangement of background-position values at a glance, writing CSS is much easier. But also for the sake of later maintenance. Imagine that if you change the size of one of the pictures in the post-maintenance, the background-position of all the surrounding elements will change, which can be a headache.

2. The small picture is integrated as far as possible on the leftmost or the far right. These two positions are flexible enough to fit the icon before the text, and the style will not be interfered with by other CSS sprites pictures. Combined with the 1th, we can start with the top to bottom integration of the picture along the leftmost and rightmost sides.

3. It is not recommended to keep gaps between small pictures. This causes the size of the picture to increase so that the file is larger. There is no need for these intervals to exist.

4. Combining the colors in the picture or the same together can reduce the number of colors, because the picture file size of a few color numbers will be relatively small.
Picture optimization:

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

Because generally the large picture background is completely transparent, we will save it in PNG format. You may say that GIF is smaller than PNG file size, we are not to optimize it, why not gif? This is something we don't want to see because GIF images can have a lot of jagged edges in areas such as curved corners or diagonal lines. And you may lose some small picture pixels close to the white. Besides, we can find a smaller format than GIF, and that's the PNG8 format I'm going to introduce today.

For non-animated GIFs, it is recommended to use PNG8 because it works the same as the original PNG image, and saves you 10%-30% of the file size, even more than the GIF picture.
　　How to turn a picture into PNG8 format

1. Picture preparation: No matter what drawing software you use to draw the diagram, just follow the normal operation to save as PNG format. There is no Png8 operation in Photoshop, so we need to turn to fireworks.

2. Open the integrated big picture in fireworks.

3. Select File-Image preview.

4. In the "Format" drop-down box select PNG8, the other do not have to choose, directly click the "Export" button to select the path.

It's simple--just look at the size of your Png8 picture, and compare it to the previous picture. You're going to have a surprise! ~ ~ Look at the picture quality, it's perfect~~

The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!