CSS sprites technology and picture optimization

About the CSS Sprites technology optimization We can do how much, can reduce the number of requests. This is not done unilaterally, and it all depends on the combination of XHTML, CSS, CSS sprites pictures. So far there is no absolute optimization approach, which is what I often measure in the project CSS Sprites pictures and XHTML relationships, such as: "A background to achieve adaptive nine Sudoku", the following summarizes the picture cutting and image optimization methods.

Picture optimization

It is recommended that you use PNG8 for non animated GIFs because it also achieves the same effect and saves you 10%-30% of the file volume.

Photoshop has a slightly larger size than fireworks to export the same quality PNG pictures. While fireworks did the corresponding compression optimization, but did not achieve the best compression.

I know the design software, for the PNG image processing has not done the best compression, the picture volume also has a certain compression space. You can try to do lossless compression optimizations using the Image optimization tool described below.

Picture volume and size, the proposed volume is kept within 100K (more in line with national conditions best request size), size is 800px (best size). (from a certain authority personnel to know, specific no textual research)

CSS Sprites Picture Cutting technique

CSS Sprites pictures are added in order from top to bottom, left to right. and background-position generally adopt the digital combination form localization, this can reduce the maintenance to bring the unnecessary trouble.

It is not recommended that you keep a certain amount of space in the CSS sprites picture because the file size increases and the file size increases.

CSS sprites images with a closer or the same combination of colors can reduce the number of colors, because the smaller color number of the picture file volume will be relatively small.

Size of the same CSS sprites picture left a large gap, to a certain extent, most of the situation will increase the volume, so the CSS sprites pictures do not have gaps.

In a CSS sprites picture of the same size, the vertically arranged picture is larger than the horizontally arranged file. Demo

In CSS sprites pictures, the horizontally arranged picture is larger than the vertical file size. Demo

Picture equivalence Merge: When applying CSS to sprites pictures, properly combine the same images to save space and reduce volume. Demo

Distinguish between images that do not need to be merged: If the current user determines that only one state or level is displayed, there is no need to merge pictures of other levels or States. Demo

Gold cutting bit: In the CSS sprites picture of the most right or left for the most flexible position of the most suitable for positioning the text before the icon, so will not be subject to other CSS sprites picture interference, also do not need to reserve a certain line width.