Как в CSS масштабировать спрайты?

Многие думают, что для уменьшения иконки в CSS спрайте нужно загружать отдельное изображение. Но это не так! Рассказываем, как менять размер иконок без лишних HTTP-запросов.

Что такое CSS спрайты и зачем они нужны?

CSS спрайт – это объединение нескольких изображений в один файл. Это сокращает количество запросов к серверу и ускоряет загрузку страницы.

Пример стандартного CSS для спрайта:

.ico-soc {
    background: url('../img/icons_sprite.webp') no-repeat 0 0;
    display: inline-block;
    vertical-align: middle;
    width: 40px;
    height: 40px;
    border-radius: 50px;
}

Позиция иконки меняется через background-position:

.ico-soc.ico-soc-fb {
    background-position: 0 -50px;
}

Как уменьшить иконку без нового изображения?

Допустим, нам нужна та же иконка, но размером 30px вместо 40px. Вместо загрузки нового файла используем CSS-масштабирование:

.ico-soc-mini {
    background: url('../img/icons_sprite.webp') no-repeat 0 0;
    display: inline-block;
    vertical-align: middle;
    width: 30px;
    height: 30px;
    border-radius: 50px;
    transition: 0.3s all;
    zoom: 0.75; /* Уменьшение на 25% */
    -moz-transform: scale(0.75);
    -moz-transform-origin: 0 0;
}

Как это работает?

• Исходный размер: 40px → новый: 30px (разница: -25%).

• zoom: 0.75 и transform: scale(0.75) уменьшают элемент.

Пример уменьшения до 20px

.ico-soc-minimal {
    background: url('../img/icons_sprite.webp') no-repeat 0 0;
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    border-radius: 50px;
    transition: 0.3s all;
    zoom: 0.5; /* Уменьшение на 50% */
    -moz-transform: scale(0.5);
    -moz-transform-origin: 0 0;
}

Вывод:
Используя CSS-трансформации, можно менять размер иконок без лишних изображений. Это улучшает производительность сайта и SEO!