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

CSS picture optimization of the relevant recommendations, I believe that many inexperienced people do not know what to do, so this article summarizes the causes of the problem and solutions, through this article I hope you can solve this problem.

CSS image optimization is to compress the size of the picture as much as possible to speed up the loading speed of the page, which is very useful for large websites. Don't underestimate it, it can greatly improve the loading speed of web pages. The method that people usually use is css sprites.

The purpose of CSS Sprites (picture integration technology) is to speed up page loading by integrating images to reduce the number of requests to the server. Many people must have been using this technology, so let me give you a brief introduction and summarize some of my skills when using css sprite.

CSS Sprites implementation method:

First, integrate the small picture into a large picture, and then locate the background according to the location of the specific icon on the larger image.

Summary of CSS Sprites technical points:

1. When small pictures are integrated, they are arranged in the order from top to bottom, rather than one picture next to another from left to right. This arrangement of background-position values is clear at a glance, making it much more convenient to write css. It is also for the sake of later maintenance. Imagine that if you change the size of one of the images during later maintenance, the background-position of all the surrounding elements will change accordingly, which will be a headache.

two。 Small images are integrated as far left or right as possible. These two positions are very flexible and are very suitable for the icon in front of the text, without the interference of other CSS Sprites images when rewriting the style. To sum up point 1, we can start to integrate the image from top to bottom along the leftmost and rightmost sides.

3. It is not recommended to leave intervals between different small pictures. Because this will cause the image size to increase, thus increasing the file size. These gaps are unnecessary.

4. The number of colors can be reduced if the colors are close or the same in the picture, because the file size of the picture with a small number of colors will be relatively small.

Picture optimization:

When we integrate all the small pictures into one large picture, we should start to consider the problem of picture optimization. You can take a look at the file size of the picture now. Is it a little unsatisfactory? it doesn't matter. The following steps can solve it.

Because the background of the integrated large image is basically completely transparent, we will save it in png format. You might say that gif is smaller than png file size. Don't we want to optimize it? why not gif? Because gif images will appear a lot of aliasing in dealing with curves, such as fillets, or slashes, which we don't want to see. And you may lose some small picture pixels that are close to white. And we can also find a format smaller than gif, which is the PNG8 format I'm going to introduce today.

It is more recommended to use PNG8 for non-animated GIF because it can achieve the same effect as the original png image, and it can save you 10%, 30% of the file size, even less than gif images.

How to convert a picture to png8 format

1. Picture preparation: no matter what drawing software you use to draw the picture, just follow the normal operation and save it in png format. There is no transfer to png8 in photoshop, so we need to turn to fireworks.

two。 Open the integrated large image in fireworks.

3. Select File-Image Preview.

4. Select PNG8 in the "format" drop-down box, nothing else, just click the "Export" button to select the path.

After reading the above, have you mastered the relevant suggestions on CSS picture optimization? If you want to learn more skills or want to know more about it, you are welcome to follow the industry information channel, thank you for reading!

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.