A detailed introduction to the sprite diagram in CSS

CSS Sprite ChartCSS Sprite, also called CSS Wizard, is a kind of CSS image merging technology, the method is to combine small icons and background images into a picture, and then use the background of the CSS to display the image to display the part. CSS Sprites Technology by some people in the country called the CSS Sprite, in fact, some of the pages of the background image integration into a picture file, and then use the CSS "Background-image", "Background-repeat", " Background-position "combination of background positioning, background-position can be used to pinpoint the position of the background image

CSS Sprite Chart The rationale is to integrate some of the images you use on your site into a single image, reducing the number of HTTP requests on your site. This image is rendered using CSS background and background-position properties, which means your tags are more complex, and the images are defined in CSS rather than tags.

CSS Knowledge Points:

Background-image

Backgorund-position

CSS Sprite Features:

it saves file volume and service requests as opposed to being a small icon . All the fragmented page background images are integrated together, this can effectively reduce the number of HTTP requests to the picture, and do not need to load the fragmented background image, so reasonable use of it can effectively improve the load speed of the page.

In general, you need to save the file format as PNG-24.

can design a colorful color surface.

CSS Sprite Diagram Difficulty:

You need to determine the size of each small icon beforehand

Notice the distance between the small icon and the small icon

Careful and patient

PNG-24 picture format: PNG-24 to reduce the burrs.

CSS Sprite Advantages

Reduce the number of requests to the server when loading Web images

You can combine most background images and small icons to make it easy to use in any location, so requests in different locations only need to call one picture, thus reducing the number of requests to the server, reducing the pressure on the server, and increasing the loading speed of the page and saving the traffic of the server.

Increase the load speed of the page

One of the benefits of sprite technology is the load time of pictures (when there are many sprites, the load time of a single picture). The size of a GIF picture that is created by the desired picture is significantly smaller than the size of all pictures before it is flattened. A single GIF has only one color table associated with it, and each GIF that is split separately 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 a picture divided into multiple sheets.

Some bugs that decrease the mouse slide

IE6 does not proactively preload the mouse over the background image in the a:hover, so if you use more than one picture, the mouse will appear flashing white phenomenon. Using CSS Sprite, because of a picture can be, so there is no such phenomenon.

Not enough CSS sprite map

The biggest problem with CSS sprite is memory usage

Unless this sprite picture is being very carefully organized, you will end up using a lot of useless blanks. An example is from Whit TV's website. Note that this is a PNG image of 1299x15,000 pixels. It is also compressed well-the actual download size is only about 26k-but the browser does not render the compressed image data. When the image is downloaded and decompressed, it consumes approximately 75MB of memory (1299 * 15000 * 4). If the image does not use alpha transparency, it will be optimized to 1299 * 15000 * 3, but in case of loss of rendering speed. Even then, we'll talk about 55MB. Most of this picture is actually blank, there is nothing, there is no useful content. Just loading the Whit home page will cause your browser's memory footprint to rise to at least 75+MB, just because of that picture. (PS: Unfortunately, the site has recently been revised, the text mentioned in the picture does not exist)

Affects the zoom function of the browser

If a page using CSS sprite is scaled using the full page zoom feature provided by some browsers, the browser will need to do some extra work to correct the edges of the images-basically, to avoid a "sneak in" of the sprite's adjacent images. This is not a problem for small images, but for large pictures it can be a performance drop.

Puzzle Maintenance More Trouble

It takes patience to flatten so many pictures. At the same time, always think about how to use this image will not have a mutual influence. It's not easy to put thin, tall pictures and wide, short pictures together. If you want to modify a sprite in a picture, you need to modify the entire picture, which will undoubtedly increase the workload.

Making CSS difficult to write

If the CSS sprite is complex enough, it greatly increases the amount of code and difficulty of CSS, making maintenance and modification difficult.

CSS Sprite call picture cannot be printed

CSS Sprite Call pictures cannot be printed unless you specifically add the print declaration in @media.

Error using Sprites to affect accessibility

Some newly-started developers will use all the images as background images to save the number of HTTP requests (which is the benefit of using CSS sprites) – even those that convey important information. The result will be a lack of accessibility to the site, but also reduce the potential benefits of title and Alt in HTML.

Therefore, the CSS sprite itself is correct, and it does not raise accessibility issues (in fact, the correct use will improve accessibility). But it's not right to overdo it. Using a sprite can hinder web-building processes with accessibility and productivity.

CSS Sprite diagram is CSS sprites, also called it CSS Wizard, is a CSS image merging technology, the method is to combine small icons and background image on a picture, and then use the background of CSS to display the image to display the part. CSS Sprites Technology by some people in the country called the CSS Sprite, in fact, some of the pages of the background image integration into a picture file, and then use the CSS "Background-image", "Background-repeat", " Background-position "combination of background positioning, background-position can be used to pinpoint the position of the background image

CSS Sprite Chart The rationale is to integrate some of the images you use on your site into a single image, reducing the number of HTTP requests on your site. This image is rendered using CSS background and background-position properties, which means your tags are more complex, and the images are defined in CSS rather than tags.

CSS Knowledge Points:

Background-image

Backgorund-position

CSS Sprite Features:

it saves file volume and service requests as opposed to being a small icon . All the fragmented page background images are integrated together, this can effectively reduce the number of HTTP requests to the picture, and do not need to load the fragmented background image, so reasonable use of it can effectively improve the load speed of the page.

In general, you need to save the file format as PNG-24.

can design a colorful color surface.

CSS Sprite Diagram Difficulty:

You need to determine the size of each small icon beforehand

Notice the distance between the small icon and the small icon

Careful and patient

PNG-24 picture format: PNG-24 to reduce the burrs.

CSS Sprite Advantages

Reduce the number of requests to the server when loading Web images

You can combine most background images and small icons to make it easy to use in any location, so requests in different locations only need to call one picture, thus reducing the number of requests to the server, reducing the pressure on the server, and increasing the loading speed of the page and saving the traffic of the server.

Increase the load speed of the page

One of the benefits of sprite technology is the load time of pictures (when there are many sprites, the load time of a single picture). The size of a GIF picture that is created by the desired picture is significantly smaller than the size of all pictures before it is flattened. A single GIF has only one color table associated with it, and each GIF that is split separately 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 a picture divided into multiple sheets.

Some bugs that decrease the mouse slide

IE6 does not proactively preload the mouse over the background image in the a:hover, so if you use more than one picture, the mouse will appear flashing white phenomenon. Using CSS Sprite, because of a picture can be, so there is no such phenomenon.

Not enough CSS sprite map

The biggest problem with CSS sprite is memory usage

Unless this sprite picture is being very carefully organized, you will end up using a lot of useless blanks. An example is from Whit TV's website. Note that this is a PNG image of 1299x15,000 pixels. It is also compressed well-the actual download size is only about 26k-but the browser does not render the compressed image data. When the image is downloaded and decompressed, it consumes approximately 75MB of memory (1299 * 15000 * 4). If the image does not use alpha transparency, it will be optimized to 1299 * 15000 * 3, but in case of loss of rendering speed. Even then, we'll talk about 55MB. Most of this picture is actually blank, there is nothing, there is no useful content. Just loading the Whit home page will cause your browser's memory footprint to rise to at least 75+MB, just because of that picture. (PS: Unfortunately, the site has recently been revised, the text mentioned in the picture does not exist)

Affects the zoom function of the browser

If a page using CSS sprite is scaled using the full page zoom feature provided by some browsers, the browser will need to do some extra work to correct the edges of the images-basically, to avoid a "sneak in" of the sprite's adjacent images. This is not a problem for small images, but for large pictures it can be a performance drop.

Puzzle Maintenance More Trouble

It takes patience to flatten so many pictures. At the same time, always think about how to use this image will not have a mutual influence. It's not easy to put thin, tall pictures and wide, short pictures together. If you want to modify a sprite in a picture, you need to modify the entire picture, which will undoubtedly increase the workload.

Making CSS difficult to write

If the CSS sprite is complex enough, it greatly increases the amount of code and difficulty of CSS, making maintenance and modification difficult.

CSS Sprite call picture cannot be printed

CSS Sprite Call pictures cannot be printed unless you specifically add the print declaration in @media.

Error using Sprites to affect accessibility

Some newly-started developers will use all the images as background images to save the number of HTTP requests (which is the benefit of using CSS sprites) – even those that convey important information. The result will be a lack of accessibility to the site, but also reduce the potential benefits of title and Alt in HTML.