Regarding the optimization of CSS Sprites technology, how much can we do and how much can we reduce the number of requests? This cannot be done unilaterally, everything depends on the cooperation between XHTML, CSS, and CSS Sprites images. So far, there is no absolute optimization method. This is why I often measure the relationship between CSS Sprites images and XHTML in projects, such as: "A Background Implements Adaptive Nine-Grid Grid". The following summarizes some methods of image cutting and image optimization.
Image Optimization
For non-animated GIFs, it is recommended to use PNG8 because it can also achieve the same effect and save you 10%-30% of the file size.
Compared with Fireworks, Photoshop exports PNG images of the same quality, but the size is slightly larger. Although Fireworks has made corresponding compression optimizations, it has not achieved the best compression.
The design software that I know of does not achieve the best compression for processing PNG images, and the image size still has a certain amount of compression space. You can try to use the "Image Optimization Tool" introduced below to achieve distortion-free compression optimization.
In terms of image volume and size, it is recommended that the size be kept within 100K (which is more in line with the best SIZE requirements of national conditions) and the size is 800px (the best size). (Learned from an authoritative personnel source, no way to verify the details)
CSS Sprites Image Cutting Technique
CSS Sprites image order and combined images are added from top to bottom, left to right. The background-position is generally positioned using a combination of numbers, which can reduce unnecessary trouble caused by maintenance.
It is not recommended to maintain a certain spacing in CSS Sprites images because the file size increases and the file size increases.
In CSS Sprites, combining colors that are close or the same can reduce the number of colors, because the file size of images with a small number of colors will be relatively small.
There is a large gap in CSS Sprites images of the same size, which in most cases increases the size to some extent, so CSS Sprites images should not have gaps.
Among CSS Sprites images of the same size, vertically arranged images will have larger file sizes than horizontally arranged images. Demo
In CSS Sprites images, horizontally arranged images will have larger file sizes than vertically arranged images. Demo
Equal merging of images: When applying CSS Sprites images, merge identical images appropriately to save space and reduce volume. Demo
Distinguish images that do not need to be merged: If the current user determines that only one state or level will be displayed, there is no need to merge images of other levels or states. Demo
Golden cutting position: The most flexible position on the right or left side of the CSS Sprites image is the most suitable position for placing the icon in front of the text. Therefore, it will not be interfered by other CSS Sprites images, and there is no need to reserve a certain line width.