A detailed introduction to sprite images in CSS

CSS Sprite CSS Sprite, also known as CSS Sprite, is a CSS image merging technology. This method is to merge small icons and background images into one picture, and then use css The background is positioned to display the part of the image that needs to be displayed. CSS Sprites technology is called CSS Sprite by some people in China. In fact, it integrates some background images in the web page into an image file, and then uses CSS "background-image", "background-repeat", "background- "position" combination for background positioning, background-position can use numbers to accurately locate the position of the background image

The basic principle of CSS sprite image is to put your Consolidate some images used on your website into a single image, thereby reducing the number of HTTP requests to your website. The image is rendered using the CSS background and background-position properties, which means your tags become more complex. The image is defined in CSS, not the tag.

CSS knowledge points:

background-image

backgorund-position

CSS sprite image features:

Compared with being a small icon, it saves file size and service request times. Integrate all fragmented web page background images together. This can effectively reduce the number of http requests for images without the need to load fragmented background images multiple times. Therefore, rational use of it can effectively improve the loading speed of web pages. .

Generally, you need to save to the PNG-24 file format.

You can design the body surface in rich and colorful colors.

Difficulties of CSS sprite images:

You need to determine the size of each small icon in advance

Pay attention to the distance between small icons

Careful and patient

PNG-24 image format: PNG-24 can reduce burrs.

Advantages of CSS sprite images

Reduce the number of requests to the server when loading web page images

Can merge most Background images and small icons are easy to use at any location, so that requests from different locations only need to call one image, thereby reducing the number of requests to the server, reducing server pressure, while improving the page loading speed and saving server traffic.

Improve page loading speed

One of the benefits of sprite technology is the loading time of images (the loading time of a single image when there are many sprites). A GIF composed of the required images will be significantly smaller than the combined size of all the images. A single GIF has only one associated color table, while each split GIF has its own color table, which increases the overall size. Therefore, a single JPEG or PNG sprite is likely to be smaller in size than the total size of an image divided into multiple images.

Reduce some bugs when the mouse rolls over

IE6 will not actively preload the background image in a:hover that the mouse rolls over, so if you use multiple pictures , it will flash white when the mouse slides over it. Using CSS Sprite, since one picture is enough, this phenomenon will not occur.

insufficient CSS Sprite image

The biggest problem with CSS Sprite is memory usage

Unless this Sprite image is used very carefully organization, you'll end up with a lot of useless white space. One example is from the WHIT TV website. Note that this is a 1299×15,000 pixel PNG image. It's also compressed very well - the actual download size is only about 26K - but the browser doesn't render the compressed image data. When this image is downloaded and decompressed, it will occupy approximately 75MB of memory (1299 * 15000 * 4). If this image does not use alpha transparency, it will be optimized to 1299 * 15000 * 3, but at the expense of rendering speed. Even then, we're talking 55MB. Most of this image is actually blank, there is nothing there, no useful content. Just loading the WHIT home page will cause your browser's memory usage to rise to at least 75+MB, just because of that one image. (PS: Unfortunately, the website has been recently revised, and the pictures mentioned in the article no longer exist)

Affects the zoom function of the browser

If one uses The CSS Sprite page is scaled using the full-page zoom function provided by some browsers. The browser needs to do some extra work to correct the behavior of these image edges - basically, to prevent adjacent images in the Sprite from being " Come in". This is no problem for small images, but will be a performance hit for large images.

Puzzle maintenance is troublesome

Putting together so many pictures requires patience. At the same time, you should always think about how to use this image without affecting each other. It’s not easy to put tall and thin images together with wide and short images. If you want to modify a picture in Sprite, you have to modify the entire picture, which will undoubtedly increase the workload.

Making CSS writing difficult

If CSS Sprite is complex enough, it will greatly increase the amount and difficulty of CSS code, making maintenance and modification difficult. .

CSS Images called by Sprite cannot be printed

CSS Images called by Sprite cannot be printed unless a print statement is specifically added to @media.

Wrong use of Sprites affects accessibility

Some new developers will do this in order to save the number of HTTP requests (this is the benefit that CSS Sprites have always emphasized) Treat all images as background images – even those that convey important information. The result is a website that lacks accessibility and reduces the potential benefits of titles and alts in HTML.

Therefore, there is nothing wrong with CSS sprites per se, and they do not cause accessibility issues (in fact, when used correctly, they improve accessibility). But excessive use of sprites, right or wrong, can hinder the process of building web pages for both accessibility and productivity.

CSS Sprite CSS Sprite, also called CSS Sprite by some, is a CSS image merging technology. This method combines small icons and background images into one image. Then use css background positioning to display the part of the image that needs to be displayed. CSS Sprites technology is called CSS Sprite by some people in China. In fact, it integrates some background images in the web page into an image file, and then uses CSS "background-image", "background-repeat", "background- "position" combination for background positioning, background-position can use numbers to accurately locate the position of the background image

CSS sprite imageThe basic principle is to put your Consolidate some images used on your website into a single image, thereby reducing the number of HTTP requests to your website. The image is rendered using the CSS background and background-position properties, which means your tags become more complex. The image is defined in CSS, not the tag.

CSS knowledge points:

background-image

backgorund-position

CSS sprite image features:

Compared with being a small icon, it saves file size and service request times. Integrate all fragmented web page background images together. This can effectively reduce the number of http requests for images without the need to load fragmented background images multiple times. Therefore, rational use of it can effectively improve the loading speed of web pages. .

Generally, you need to save to the PNG-24 file format.

You can design the body surface in rich and colorful colors.

Difficulties of CSS sprite images:

You need to determine the size of each small icon in advance

Pay attention to the distance between small icons

Careful and patient

PNG-24 image format: PNG-24 can reduce burrs.

Advantages of CSS sprite images

Reduce the number of requests to the server when loading web page images

Can merge most Background images and small icons are easy to use at any location, so that requests from different locations only need to call one image, thereby reducing the number of requests to the server, reducing server pressure, while improving the page loading speed and saving server traffic.

Improve page loading speed

One of the benefits of sprite technology is the loading time of images (the loading time of a single image when there are many sprites). A GIF composed of the required images will be significantly smaller than the combined size of all the images. A single GIF has only one associated color table, while each split GIF has its own color table, which increases the overall size. Therefore, a single JPEG or PNG sprite is likely to be smaller in size than the total size of an image divided into multiple images.

Reduce some bugs when the mouse rolls over

IE6 will not actively preload the background image in a:hover that the mouse rolls over, so if you use multiple pictures , it will flash white when the mouse slides over it. Using CSS Sprite, since one picture is enough, this phenomenon will not occur.

insufficient CSS sprite image

The biggest problem with CSS sprite is memory usage

Unless the sprite image is organized very carefully, you will end up with a lot of useless white space. One example is from the WHIT TV website. Note that this is a 1299×15,000 pixel PNG image. It's also compressed very well - the actual download size is only about 26K - but the browser doesn't render the compressed image data. When this image is downloaded and decompressed, it will occupy approximately 75MB of memory (1299 * 15000 * 4). If this image does not use alpha transparency, it will be optimized to 1299 * 15000 * 3, but at the expense of rendering speed. Even then, we're talking 55MB. Most of this image is actually blank, there is nothing there, no useful content. Just loading the WHIT home page will cause your browser's memory usage to rise to at least 75+MB, just because of that one image. (PS: Unfortunately, the website has been recently revised, and the pictures mentioned in the article no longer exist)

Affects the zoom function of the browser

If one uses When the CSS Sprite page is scaled using the full-page zoom function provided by some browsers, the browser needs to do some extra work to correct the behavior of the edges of these images - basically, to prevent adjacent images in the Sprite from being " Come in." This is no problem for small images, but will be a performance hit for large images.

Puzzle maintenance is troublesome

Putting together so many pictures requires patience. At the same time, you should always think about how to use this image without affecting each other. It’s not easy to put tall and thin images together with wide and short images. If you want to modify a picture in Sprite, you have to modify the entire picture, which will undoubtedly increase the workload.

Making CSS writing difficult

If CSS Sprite is complex enough, it will greatly increase the amount and difficulty of CSS code, making maintenance and modification difficult. .

CSS Images called by Sprite cannot be printed

CSS Images called by Sprite cannot be printed unless a print statement is specifically added to @media.

Wrong use of Sprites affects accessibility

Some new developers will do this in order to save the number of HTTP requests (this is the benefit that CSS Sprites have always emphasized) Treat all images as background images – even those that convey important information. The result is a website that lacks accessibility and reduces the potential benefits of titles and alts in HTML.

The above is the detailed content of A detailed introduction to sprite images in CSS. For more information, please follow other related articles on the PHP Chinese website!