CSS Sprite is CSS Sprite, also known as CSS Sprite. It is a CSS image merging technology. The method is to merge small icons and background images into one image, and then use CSS background positioning to display the image that needs to be displayed. part. CSS Sprites technology is called CSS Sprite by some people in China. Combination for background positioning, background-position can accurately locate the position of the background image with numbers
The basic principle of CSS sprites is to combine some of the 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 are more complex, and the image is defined in CSS, not the <img> tag.
CSS knowledge points:
background-image
backgorund-position
CSS Sprite Map Features:
Compared to being a small icon, it saves file size and service requests . 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, so making good use of it can effectively improve the loading speed of web pages .
Normally, you need to save as PNG-24 file format.
A variety of color body tables can be designed.
CSS Sprite Map Difficulties:
You need to pre-determine the size of each small icon
Pay attention to the distance between the small icons and the small icons
Careful and patient
Image format for PNG-24: PNG-24 reduces burrs.
Advantages of CSS Sprite Maps
Reduce the number of requests to the server when loading web images
Most background images and small icons can be combined for easy use in 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, and improving page loading speed and saving server traffic. .
Improve page loading speed
One of the benefits of sprite technology is the image load time (in the case of many sprites, the load time of a single image). The size of a GIF image assembled from the desired images will be significantly smaller than the size of all the images before they are assembled. A single GIF only has 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 very likely to be smaller in size than the total size of the image obtained by splitting the image into multiple pieces.
Reduce some bugs of mouse over
IE6 will not automatically preload the background image in a:hover when the mouse is over, so if you use multiple images, the mouse over will appear flashing white. With CSS Sprite, this doesn't happen because a single image is enough.
Insufficient CSS Sprite
The biggest problem with CSS Sprite is memory usage
Unless the sprite image is organized very carefully, you'll end up using a lot of useless whitespace. An example is from the WHIT TV website. Note that this is a 1299×15,000 pixel PNG image. It's also well compressed -- 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 take up almost 75MB of memory (1299 * 15000 * 4). If the image does not use alpha transparency, it will be optimized to 1299 * 15000 * 3, but at the expense of rendering speed. Even then, we'll be talking about 55MB. Most of this image is actually blank, there is nothing there, nothing useful. Just loading the WHIT homepage will cause your browser's memory footprint to rise to at least 75+MB, just for that one image. (PS: Regrettably, the website has been revised recently, and the pictures mentioned in the article no longer exist)
Affects browser zoom capabilities
If a page using CSS Sprites is scaled using the full-page zoom feature provided by some browsers, the browser needs to do some extra work to correct the behavior of the edges of these images - basically, to avoid adjacent sprites The picture was "shown in". This is fine for small images, but can be a performance hit for large images.
Puzzle maintenance is more troublesome
Combining so many pictures requires patience. At the same time, always think about how to use this image so that it will not affect each other. Combining a thin, tall image with a wide and short image can be tricky. If you want to modify an image in Sprite, you have to modify the entire image, which will undoubtedly increase the workload.
Makes writing CSS difficult
If the CSS Sprite is complex enough, it greatly increases the code size and difficulty of CSS, making it difficult to maintain and modify.
Images called by CSS Sprite cannot be printed
Images called by CSS Sprite cannot be printed unless a print statement is specifically added to @media.
Wrong use of Sprites affects accessibility
Some developers who are just getting started will treat all images as background images in order to save HTTP requests (a benefit that CSS Sprite has always emphasized) – even those that convey important information. The result is a site that lacks accessibility and reduces the potential benefits of title and alt in HTML.
So CSS sprites are fine by themselves, and don't cause accessibility issues (in fact, using them correctly can improve accessibility). But overusing sprites right or wrong can hinder the process of building web pages in terms of accessibility and productivity.