Reduce picture requests with CSS Sprites

Sprites are ghosts, goblins, naughty ghosts, the first to listen to the name of this high-end foreign flavor I was shocked to live, step by step to uncover the veil after the very simple things, the role is very big

What isCSS Sprites

CSS sprites refers to a lot of small images (many icon files) in the Web page into a large map arranged by law, when displayed by Background-image, Background-position shows the effect that a particular part of a picture achieves and disperses a small picture.

jQueryUI the following

many pages commonly used small icons, but we look at each small icon of the source of the time will find that these small icons of src It's the same file, it's the big picture.

Why to useCSSSprites

Let's just take a look at how this works, and we'll start with a good way of doing it. It doesn't have to be in this weird way, there's a certain amount of overhead in code writing and readability, so what's good for people to abandon ease CSS Sprites it?

• Browser loading pictures as blocking form

       we know that when the browser loads the Web page, the picture file and the externalJS,CSSfiles need to be downloaded separately,butJSis cloggedHTMLof the download process, the picture is another open process to download, different browser download the number of pictures at the same time limitgenerally forone or five or 10, so if you have a page full of pictures, or a series of web pages, even if you have a fast speed, you need to download these pictures in batches.

• image download for a full http request

           the download of each picture is a completeHTTPRequest-Response. And put a lot of small pictures on a picture so that only need aHTTPRequest-response, under the current speed conditions do not exceed200kPicture download speed is similar, downloaded once after the page or other pages of the site use the image contained in this large map can use the cache, does not bring the cost of repeated downloads, so there is only oneHTTPRequest-Response.

• Sprites reduced HTTP Request

so use CSS Sprites the biggest benefit is to reduce HTTP requests to speed up website response and improve website performance. you might ask , how many HTTP requests are really that serious? If you use a large image, then it is likely that there are a few pictures in the large image can not be used, this is not additional content, and several times the HTTP request cost gap is so large?

CSSSpritesImplement

First Look at CSS of the background-position

background-position Sets or retrieves the background image position of the object. You must first specify the background-image property.

Grammar:

Background-position:length | | Length

background-position:position | | Position

Value:

Length: percent | the length value consisting of floating-point numbers and unit identifiers.

Position:top | Center | Bottom | Left | Center |right

such as:/* states and images */.ui-icon {width:16px; height:16px; Background-image:url (images/ui-icons_222222_256x240.png); }.ui-widget-content. Ui-icon {background-image:url (images/ui-icons_222222_256x240.png);} /* Positioning */.ui-icon-carat-1-n {background-position:0 0;}. Ui-icon-carat-1-ne {background-position: -16px 0;}

We see the use of the URL for the same picture, when knowledge postion, the lock position of the picture is changed.

Summary:

CSS Sprites disadvantage: There are disadvantages in everything. Some people may like, some people do not like, because every time the picture changes to the image to add content, the coordinates of the image to be very accurate, will be slightly cumbersome. Coordinate positioning is fixed to an absolute value, so you lose Some of the flexible properties like center.

CSS Sprites has advantages and disadvantages. Should not use, depends on the page to load the speed of the main or to maintain easy-oriented.

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

Reduce picture requests with CSS Sprites