Use css sprites to reduce image requests

Source: Internet
Author: User
Tags http request

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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.