synonymcss sprite(Web page image application processing method) Generally refers to CSS Sprite
CSS SpriteCSS Sprite, some people call it CSS sprite, which is a CSS image merging technology. This method is to merge small icons and background images into a picture, and then usecssTo display the part of the picture that needs to be displayed.
The basic principle of CSS Sprite is to integrate some images used on your website into a single image, so as to reduce theHTTP Requestnumber.The image is rendered using CSS background and background position attributes, which means that your tags become more complex. The image is defined in CSS, not<img>tags.
A simple example:
One picture makes three states of one button
A link is made into a button style using CSS. We can use the same image to complete the three states of the button,a:link，a:hover，a:active。
<a class="button" href="#">Links</a>
The picture on the right side is button.png, which is a combination of three button pictures of 200px × 65px. From top to bottom, it is the normal, mouse over and mouse click state of the button.You can define it using CSS.
Background position: 0 0;/* Define the general state of the link. At this time, the image shows the top part */}
a:hover {background-position:0 -66px; /*Define the sliding state of the link. At this time, the middle part is displayed, and the negative value is taken downwards */}
a:active {background-position:0 -132px; /*Define the general status of the link. At this time, the bottom part is displayed, and the negative value is taken downward */}
Beginner friends can try the effect.
More CSS Sprite, more complex pictures, more accurate background positioning.A large number of values may be used, such as: background: url (nav. png) - 180px 24pxno repeat;To achieve more precise positioning.
advantage
Announce
edit
Reduce the number of requests to the server when loading web page pictures
Most background images and small icons can be combined to facilitate use in any location. In this way, requests from different locations only need to call one image, thus reducing the number of requests to the server, reducing server pressure, improving the page loading speed, and saving server traffic.
Increase page loading speed
One of the advantages of sprite technology is the loading time of images (when there are many sprites, the loading time of a single image).The size of a GIF image made up of the required images will be significantly smaller than the size of all the images before they are put together.A single GIF has only one color table related to it, while each GIF separated 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 the image obtained by dividing one image into multiple images.
Reduce some bugs that the mouse slides over
IE6 will not actively preload the background image in a: hover when the mouse slides over it. Therefore, if multiple images are used, the mouse will flash white when it slides over.With CSS Sprite, this will not happen because one picture is enough.
Insufficient
Announce
edit
The biggest problem with CSS Sprite is memory usage
Unless the Sprite image is carefully organized, you will eventually use a lot of useless white space.An example is the website from WHIT TV.Note that this is a PNG picture with 1299 × 15000 pixels.It is also compressed well - the actual download size is only about 26K - but the browser will not render the compressed image data.When the image is downloaded and decompressed, it will occupy about 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 will discuss 55MB.Most of this picture is actuallyblankThere is nothing there, nothing useful.Just loading the WHIT homepage will cause your browser's memory usage to rise to at least 75+MB, just because of that picture.(PS: Unfortunately, the website has been revised recently, and the pictures mentioned in the article no longer exist.)
Affects the browser's zoom function
If a page using CSS Sprite is zoomed using the full page zoom function provided by some browsers, the browser needs to do some additional work to correct the behavior of these image edges - basically, to avoid adjacent images in Sprite being "exposed".This is no problem for small images, but it will cause performance degradation for large images.
Maintenance of jigsaw puzzle is troublesome
It takes patience to put together so many pictures.At the same time, we should always think about how to use this picture without mutual influence.It is not easy to put thin and tall pictures and wide and short pictures together.If you want to modify a picture in Sprite, you need to modify the whole 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.
The picture called by CSS Sprite cannot be printed
The pictures called by CSS Sprite cannot be printed unless a print declaration is specifically added in @ media.
Incorrect use of Sprites affects accessibility
Some new developers will treat all images as background images - even those that convey important information - in order to save the number of HTTP requests (which is the advantage that CSS Sprite has always emphasized).The result will be a website that lacks accessibility, and the potential benefits of title and alt in HTML will be reduced.
Therefore, CSS sprite itself is correct, and it will not cause accessibility problems (in fact, correct use will improve accessibility).However, excessive use of sprite regardless of right or wrong will hinder the process of web page construction with accessibility and productivity.
Practical Skills
Announce
edit
Don't wait until you finish slicing to start sprite
If you write CSS while cutting pictures, and then splice these pictures into a sprite after you finish the whole website, you will have to completely rewrite your CSS, and you will also have to spend a lot of time splicing a large number of pictures with PS - this is a very confusing thing.However, it will be easier if the edge cut graph is integrated at the same time.
Put the picture in the opposite place where it is to be displayed
This little skill seems difficult to understand.I didn't understand this until I created a relatively large sprite.For example, if we want an image to appear on the left side of an element: put that image on the right side of the sprite image (the sprite image at the beginning of this article).In this case, when you move the position of the background image through CSS, it is basically impossible for other small images to appear near it unexpectedly.A common problem when using Sprite is that images will appear in places where they shouldn't appear.
Avoid using bottom or right when positioning
When using CSS sprite, only use background position: bottom - 300px or background position: right - 200px;Very easy.This is feasible at first, but the problem is that when you expand the relevant sprite image in width or height, the original position may be wrong, because that image is no longer at the bottom or right of the sprite image.Use the exact location to avoid this problem.
Give each picture enough space
As you can see in the example image at the top of this article, those small images have enough space reserved.Why not put them together to make sprite images smaller?Because the elements that use these images usually have a lot of content and may need extended spacing, other images will not appear unexpectedly.
Don't worry about the pixel size of the Sprite image
If your website is well designed, you will have a lot of images to integrate into the sprite, so you need a very large sprite to properly place these images.This is very good.The white space in sprite will not occupy too much file size.The Sprite image used on a foreign shopping website is 1000 px × 2000 px, but the size of the image is only16.7kb!
