CSS sprites technology integrates multiple backgrounds into one PNG image CSS positioning

The image integration technology used by American YAHOO in page production. Although it takes a certain amount of time to regularly merge these icons, column backgrounds, and image buttons to facilitate CSS calls, it is definitely cost-effective and necessary. YSlow is also highly recommended.

Implementation method :
First, integrate the small images into a large image, and then position the background according to the position of the specific icon on the large image. background-position:-8px -95px;
A brief discussion on CSS Sprites technology and image optimization (background image integration)
How much can we do to optimize CSS Sprites technology and how much can we reduce the number of requests? This cannot be done unilaterally; it all depends on the coordination between XHTML, CSS, and CSS Sprites images. There is no absolutely optimized method so far. This is why I often weigh the relationship between CSS Sprites images and XHTML in my projects, such as: "A background to achieve adaptive nine-square grid". The following summarizes some methods of image cutting and image optimization.

Image optimization <br />1. For non-animated GIFs, it is recommended to use PNG8 because it can achieve the same effect and can save you 10%-30% of the file size.
2. Compared with Fireworks, PNG images of the same quality exported from Photoshop will be slightly larger in size. Although Fireworks has made corresponding compression optimizations, it has not achieved the best compression.
3. As far as I know, the design software that handles PNG images has not achieved the best compression, and there is still room for compression of the image size. You can try using the "Image Optimization Tool" introduced below to do lossless compression optimization.
4. Regarding the image size and dimensions, it is recommended that the size be kept within 100K (which is more in line with the best requested SIZE in China) and the size be 800px (the best size). (Learned from an authoritative source, but the details cannot be verified)

CSS Sprites image cutting technique <br />1. CSS Sprites image order and images are added from top to bottom and left to right. The background-position is generally positioned in the form of a digital combination, which can reduce unnecessary trouble caused by maintenance.
2. It is not recommended to maintain a certain spacing in CSS Sprites images because the file size will increase.
3. Combining images with similar or identical colors in CSS Sprites can reduce the number of colors, because the file size of images with fewer colors will be relatively small.
4. Leaving large gaps in CSS Sprites images of the same size will increase the volume to a certain extent in most cases, so there should be no gaps in CSS Sprites images.
5. Among CSS Sprites images of the same size, images arranged vertically will be larger in size than those arranged horizontally.
6. In CSS Sprites images, horizontally arranged images will have larger file sizes than vertically arranged images.
7. Merge equivalent images: When using CSS Sprites images, appropriately merge equivalent images to save space and reduce volume.
8. Distinguish images that do not need to be merged: If the current user determines to display only one state or one level, there is no need to merge images of other levels or states.
9. Golden cutting position: The rightmost or leftmost position of the CSS Sprites image is the most flexible position and is most suitable 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.

There are many related image optimization tools circulating on the Internet, such as:
ImageMagick, PNGGauntlet, pngcrush, pngrewrite, Optipng, PNGOut, etc.
As we all know, one of the most effective ways to reduce website loading time is to reduce the number of HTTP requests made by the website. An effective way to achieve this goal is through CSS Sprites - combining multiple images into one image and then positioning them using CSS.
The purpose of CSS Sprites is to speed up page loading by consolidating images and reducing the number of requests to the server.

Implementation method :
First, integrate the small pictures into a large picture. For simplicity, you can put multiple pictures in the same column, so that the x-axis can be defined as 0.
Then position the background according to the position of the specific icon on the big picture. background-position:-8px -95px;
example:
When we use the auther.gif in the above picture as the background, if the code is as follows: