Using sprite technology

A sprite is a large image consisting of dozens of small ones. A sprite is created by placing all the icons on one picture, similar to sticking stickers on a blackboard. This was done in order to reduce the number of requests to the server and speed up page loading. 30 images of 2 kilobytes are loaded many times slower than one image per 60 kilobytes.

The sprite is used as follows: the background of the HTML element indicates a sprite image, and then this background is shifted so that only a certain icon is visible in the picture.

But this technology has a number of drawbacks:

To optimize a sprite for different devices, you need to write additional CSS code. When using the data url, you specify only the background and the filling style “background-size: contain;”. When using a sprite, specify the background, the size of the element (it must be strictly specified), the scale as a percentage (for example, “background-size: 50%;”, background positioning “background-position”.
Difficult to support. Positioning a sprite as a background requires the programmer to be more careful. And if the size of the element changes in the layout, you will need to edit the sprite itself, which is used in dozens of places on the site, and re-debug the appearance of the element. If, due to a programmer error, the size of the element changes by 1px, the element will not be displayed correctly. When using dataURL, a small smudge will not affect the appearance.
Sprites are not verifiable by our service. And this means that you will have to check everything manually.

◀ The original and displayed size of the images Recompressed images ▶

Any comments or additions? Send us an email admin@site-alarm.com .

Check your website