Using sprite technology

A sprite is a large image containing 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 group image of 60 kilobytes in size.

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:

Sprite is difficult to support. Positioning a sprite as a background requires the programmer to be more careful.
The sprite is more difficult to optimize for several different device sizes and screens. You may need to make copies of images in different sizes so that the icons look good on all screens.

Compare the result and the source code of the sprite technology and the data URL:

Demonstration

HTML code

Open a demo Download the example code

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            .bg-envelope {
                width: 64px; height: 64px;
                background: url('css_sprites.png') -4px -4px;
            }
            .bg-user {
                width: 64px; height: 64px;
                background: url('css_sprites.png') -76px -4px;
            }
            .bg-search {
                width: 64px; height: 64px;
                background: url('css_sprites.png') -4px -76px;
            }
            [class^="svg-"],
            [class*=" svg-"] {
                width: 40px;
                height: 40px;
            }
            .svg-envelope {
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 1H5a5.006 5.006 0 0 0-5 5v12a5.006 5.006 0 0 0 5 5h14a5.006 5.006 0 0 0 5-5V6a5.006 5.006 0 0 0-5-5ZM5 3h14a3 3 0 0 1 2.78 1.887l-7.658 7.659a3.007 3.007 0 0 1-4.244 0L2.22 4.887A3 3 0 0 1 5 3Zm14 18H5a3 3 0 0 1-3-3V7.5l6.464 6.46a5.007 5.007 0 0 0 7.072 0L22 7.5V18a3 3 0 0 1-3 3Z'/%3E%3C/svg%3E");
            }
            .svg-user {
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12a6 6 0 1 0-6-6 6.006 6.006 0 0 0 6 6Zm0-10a4 4 0 1 1-4 4 4 4 0 0 1 4-4ZM12 14a9.01 9.01 0 0 0-9 9 1 1 0 0 0 2 0 7 7 0 0 1 14 0 1 1 0 0 0 2 0 9.01 9.01 0 0 0-9-9Z'/%3E%3C/svg%3E");
            }
            .svg-search {
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m23.707 22.293-5.969-5.969a10.016 10.016 0 1 0-1.414 1.414l5.969 5.969a1 1 0 0 0 1.414-1.414ZM10 18a8 8 0 1 1 8-8 8.009 8.009 0 0 1-8 8Z'/%3E%3C/svg%3E");
            }
        </style>
    </head>
    <body style="font-family: sans-serif;">
        <p>Спрайтовые кнопки. Размер фиксированный 64 пикселя.</p>
        <div class="bg-envelope"></div>
        <div class="bg-user"></div>
        <div class="bg-search"></div>
        <p>Data URL кнопки. Размер резиновый.</p>
        <div class="svg-envelope"></div>
        <div class="svg-user"></div>
        <div class="svg-search"></div>
    </body>
</html>

Lessons

Using sprite technology

PRO subscription for working with the service