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

This article mainly introduces the CSS background map how to optimize the merger, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.

Optimization of the picture itself:

Image quality requirements and image file size determine what format of pictures you use, and use smaller picture files to present better image quality.

When the color of the picture is too rich and there is no requirement for transparency, it is recommended to use jpg format and save it to higher quality.

When the picture is too colorful and has transparent or translucent requirements or shadow effects, it is recommended to use png24 format and png8 degradation of IE6 (or use a filter as a last resort).

When the color of the picture is not too rich, with or without transparency requirements, please use the png8 format, which is recommended in most cases.

When a picture is animated, you can only use gif format.

You can use the tool to compress the image again, but only if it doesn't affect the color and transparency.

Merging multiple Images: CSS Sprites Technology

There must be a gap between individual icons, and the size of the gap is determined by the size of the container and how it is displayed. The advantage of this is that it not only takes into account the "fault tolerance" but also improves the maintainability of the picture.

The arrangement of icons is also determined by the size of the container and how it is displayed. The arrangement can be divided into the following types: horizontal arrangement (container width is limited), longitudinal arrangement (container height is limited), diagonal arrangement (container width and height is not limited), left arrangement (container background is left), right arrangement (container background is right), horizontal center arrangement (container background horizontal center), vertical center arrangement (container background vertical center).

The size of the merged image should not exceed 50K, and the recommended size is between 20K-50K.

In order to ensure the quality of the picture after many modifications, please keep a copy of the original PSD picture, modify and add it in PSD, and finally export png.

Classification and merging:

It is not best to combine all the icons into one picture, in addition to controlling the size of the image, you should also pay attention to the following methods.

According to the way the pictures are arranged, the pictures with the same arrangement are merged to facilitate style control.

According to the module or component, merge the pictures that belong to the same module or component to facilitate the maintenance of the module or component.

According to the size of the picture, the same or similar size of the picture can be merged to make full use of the picture space.

According to the color of the picture, merge the pictures with the same or similar colors to ensure that the colors of the merged pictures are not too rich, which can prevent color distortion.

Thank you for reading this article carefully. I hope the article "how to optimize and merge the CSS background map" shared by the editor will be helpful to everyone. At the same time, I also hope that you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

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.