Если вам кажется, что для уменьшения размера иконки вам понадобится отдельное изображение, то вы ошибаетесь. И вот почему:
Как уменьшить размер 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; }
То есть, общее изображение и стили у нас будут одинаковыми, но по второму классу мы будем менять позицию:
.ico-soc.ico-soc-fb { background-position: 0 -50px; }
Теперь представим ситуацию, когда иконка будет идентичная, но чуть меньше в размерах. Чтобы не увеличивать размер файла мы добавляем новое правило для таких случаев:
.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; -moz-transform: scale(0.75); -moz-transform-origin: 0 0; }
В .ico-soc-mini – уменьшился размер с 40px до 30px. Значит – в процентах это -25%, именно эту величину мы отобразили в соответствующем свойстве – 0.75. Меняются только zoom и -moz-transform.
Давайте теперь уменьшим до 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; -moz-transform: scale(0.5); -moz-transform-origin: 0 0; }
Теперь 0.5, думаю вы понимаете почему.
Таким вот образом, используя одно и тоже изображение, и не добавляя в него уменьшенные иконки, мы при помощи CSS просто создаем разные правила.
Используете ли вы такой метод в своих проектах? Или у вас есть решение получше? 🙂 Если да, делитесь им в комментариях.