Use css sprites to Reduce image requests

Use css sprites to Reduce image requests

 

Sprites is a ghost, a little goblin, and a naughty ghost. I was shocked when I first heard of this high-end foreign name. After I opened its veil step by step, I found that something very simple has a great effect.

 

What is CSS Sprites?

CSS Sprites refers to making many small images (many Icon files) on a webpage into a regular chart, you can use background-image and background-position to display a specific part of the image to achieve the same effect as a scattered small image.

JqueryUI's

Many small icons are commonly used on pages. However, when we look at the source code of each small icon, we will find that the src of these small icons is the same file, which is a big image.

 

Why use CSSSprites?

No matter how it is implemented, let's first take a look at the good method. It doesn't need to use this weird method, and there is a certain amount of overhead in code writing and readability, what are the benefits of doing so that people can give up on their comfortable practices to use CSS sprites?

 

The browser loads images in blocking mode.

 

We know that when a browser loads a webpage, image files and external JS and CSS files need to be downloaded separately, but JS blocks the HTML download process, and images can be downloaded through another process, the maximum number of images to be downloaded in different browsers is one or five or ten, even if your network speed is faster, you need to download these images in batches.

 

Image download is a complete http Request

 

The download of each image is a complete HTTP request-response. However, when many small images are concentrated on one image, only one HTTP request-response is required. The download speed of images with a speed of no more than K is almost the same under the current network speed conditions, after a download, you can use the cache when using images contained in this large image on the page or other pages of the site, without the overhead of repeated downloads, therefore, there is only one HTTP request-response.

 

Sprites reduces HTTP requests

 

Therefore, the biggest advantage of using CSS sprites is to reduce HTTP requests, speed up website response, and improve website performance. May I ask, how many more HTTP requests will be so serious? If you use a large image, it is very likely that several images will not be used in the big image. Isn't it because of loading more content? Is there a big gap between the overhead of multiple HTTP requests?

 

CSS Sprites implementation

First, let's take a look at the CSSBackground-position

Set or retrieve the background image position of an object. The background-image attribute must be specified first.

Syntax:

Background-position: length | length

Background-position: position | position

Valid value:

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

Position: top | center | bottom | left | center | right

 

For example:/* 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 can see that the url used is the same image. When the knowledge is postion, the lock position of the image changes.

 

Summary:

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.