Use Sprite CSS Sprite Wizard | Speed up Web page responsiveness

What are CSS sprite sprites?

is used for the front end of a picture application technology, usually, our development of the page may have a lot of pictures, if there are more than 50 small images on a page, which means that the browser to download 50 images individually. CSS Sprite It allows you to include all the scattered images of a page in a single image, so that when you visit a page, you only need to download 1 images, which obviously greatly reduces the pressure on the server request.

This technology accelerates the response speed of web pages, the key to accelerating is not to reduce quality, but to reduce the number. Traditional cut drawings pay attention to fine, picture specifications smaller the better, the smaller the weight of the better, in fact, size does not matter, computer unification is calculated in bytes. The client sends a request to the server for each picture that is displayed. As a result, the more images you request, the greater the likelihood of delay.

What is sprite diagram?

Sprite diagram is a lot of small pictures in the Web page is merged into a picture, then this picture is called Sprite chart, for example:

Can be used to combine animation frames and other uses, most often in the Web game application

how to make a sprite diagram effortlessly and use it?

Go to CSS Sprites online tool address: https://www.toptal.com/developers/css/sprite-generator

Importing the required images into the online Web tool will automatically generate sprite maps, such as

You can see the online tool automatically generated sprite map you can click to download, and then also generated a CSS style, will be the basic page you should naturally use

We download generated sprite graphs to get:

example of effect after use:

Case from: http://mc.163.com/index.html My World website

I do not develop it, I just take this as an example.

Css Sprite principle:

CSS sprites is actually to integrate some of the background image into a picture file, and then use the CSS "Background-image", "Background-repeat", "Background-position" The combination of the background positioning, background-position can be used to pinpoint the position of the background image.

Sprite Chart Usage Summary

Advantages

• The use of CSS sprites can greatly reduce the HTTP request of the Web page, thus significantly improve the performance of the page, which is the greatest advantage of CSS sprites, but also its widely spread and application of the main reason;

• CSS sprites can reduce the number of bytes of the picture, once compared to 3 pictures merged into 1 pictures of the byte is always less than the total number of bytes of these 3 pictures.

• Solve the web designer in the image naming problems, just a set of pictures named on it, do not need to name every small element, thus improving the production efficiency of the page.

• Changing style is convenient, just need to change the color or style of the picture on one or fewer pictures, the whole page style can be changed. More convenient to maintain.

If you do not use this online build tool, then it will be a hassle, of course, this is a full-time developer must be a tool

Use Sprite CSS Sprite Wizard | Speed up Web page responsiveness