Use css sprites to reduce image requests_html/css_WEB-ITnose

Sprites means ghosts, goblins, naughty ghosts. When I first heard this high-end and foreign name, I I was shocked, and after lifting the veil step by step, I found that a very simple thing has great effects

What are CSS Sprites

CSS Sprites refers to making many small pictures (many icon files) in the web page into a large picture arranged in a regular manner. When displaying, the specific part of the picture is displayed through background-image and background-position to achieve the same goal. The same effect as scattered small pictures.

The rendering of JqueryUI is as follows

There are many small icons commonly used on pages, but when we look at the source code of each small icon, we will find that these small icons The src of the icon is the same file, both are this big picture

Why use CSSSprites

Let’s ignore it for now How is this implemented? Let's first understand the good method. Why do we use this weird method? There is a certain degree of overhead in code writing and readability. What are the benefits of doing this to make people What about giving up the comfort zone and using CSS sprites?

The browser loads images in a blocking mode

We know that when the browser loads the web page, image files and external JS and CSS files are blocked. It needs to be downloaded separately, but JS blocks the HTML download process, and pictures are downloaded by opening a separate process. The limit on the number of pictures downloaded by different browsers at the same time is generally one, five, or ten, so if one is spread all over the picture A web page, or a series of web pages, requires downloading these images in batches, no matter how fast your internet speed is.

Image download is a complete HTTP request

Each image download is a complete HTTP request-response. Concentrating many small pictures into one picture only requires one HTTP request-response. Under the current network speed conditions, the download speed of pictures not exceeding 200k is about the same. After downloading once, it will be used on this page or other pages of the site. Caching can be used when images are included in this large image, without the overhead of repeated downloads, so there is only one HTTP request-response.

Sprites reduce HTTP requests

So the biggest benefit of using CSS sprites is to reduce HTTP requests, speed up website response speed, and improve website performance. You may ask, will a few more HTTP requests really be that serious? If you use a large image, then it is very likely that several images in the large image will not be used. Isn't this more content loaded? Is the difference between the overhead of multiple HTTP requests so big?

CSS Sprites implementation

First understand CSS’s background-position

background-position sets or retrieves the background image position of the object. The background-image attribute must be specified first.

Syntax:

background-position: length || length

background-position: position || position

Values:

length : Percent | A length value consisting of a floating point number and a unit identifier.

position :top | center | bottom | left | center |right

如： /* 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 that the url used is the same picture. When posting, the picture The lock position has changed.

Summary:

Disadvantages of CSS Sprites: Everything has advantages and disadvantages. Some people may like it, and some may not, because every time the image is changed, content must be added to the image, and the coordinate positioning of the image must be very accurate, which is a bit cumbersome. The coordinate positioning must be fixed to an absolute value, so some flexible properties such as center will be lost.

CSS Sprites have advantages and disadvantages. Whether or not to use it depends on whether the loading speed of the webpage is the main priority or the convenience and ease of maintenance.

Copyright statement: This article is an original article by the blogger and may not be reproduced without the blogger's permission. .