Use css sprites to reduce image requests

Css sprites: most website front-end developers call it the "css Genie". The common understanding is to combine multiple small images into a large image, reducing the number of http requests and accelerating the webpage. The following uses Taobao as an example to explain how css sprites is implemented. For example, we want to display the "Today's Taobao activity" picture on the webpage.

 

Implementation code:

<Div style = "width: Pixel px; height: 134px; background: url(sprites.gif) no-repeat-133px-153px"> </div>

Width: the width of the image to be located. Height: the height of the image. (Css sprites must define the container size. Otherwise, an error will be displayed)

Background: url (sprites.gif) path of the background image. No-repeat: the background is unique. -133px: the position of the X coordinate,-153px: the position of the y coordinate.

Some people may not understand how the-133px and-153px come from. The coordinates are the x coordinates of the small image and the y coordinate on the left, as shown in the following figure, the coordinates of the red points are on the big graph. The x coordinate is 133px, and the y coordinate is 153px. (The coordinates can also be expressed in percentages, for example, 50% 50%.) someone may ask why the coordinates are positive but you have written them as negative numbers? Because background is used to define the background image, the default x y coordinate is 0. As shown in the following figure, the coordinates of today's Taobao activity images are 133px 153px. Therefore, you must use-133px-153px to return to zero to display the images correctly.

 

Advantages of css sprites: it can reduce the number of http requests. For example, 10 individual images will send 10 http requests and be merged into a large image, only one http request is sent, which increases the webpage loading speed.

Disadvantages of css sprites: there must be disadvantages in everything. Some may like it, but others do not like it, because the content of the image must be added to the image every time the image is changed. The coordinate positioning of the image must be accurate, which is a little complicated. Coordinate positioning must be fixed to an absolute value, so some flexible attributes such as center will be lost.

Css sprites has advantages and disadvantages. Whether to use it or not depends on whether the webpage is mainly loaded at a speed or easily maintained.