Спрайты и оптимизация графики через препроцессоры

Почему спрайты — это магия производительности? ✨

Когда браузер загружает сайт, каждое изображение — это отдельный HTTP-запрос. Спрайты объединяют множество мелких изображений в один файл, сокращая количество запросов и ускоряя загрузку страницы.

/* Было: 10 иконок = 10 запросов */
.icon-home { background-image: url('home.png'); }
.icon-settings { background-image: url('settings.png'); }

/* Стало: 1 спрайт = 1 запрос! */
.sprite {
  background-image: url('icons-sprite.png');
  background-repeat: no-repeat;
}

Как создать спрайт? 🛠️

1. Подготовка графики

Соберите все иконки/элементы в один файл (например, в Figma или Photoshop), соблюдая равные промежутки между ними.

2. Генерация спрайта автоматически

Используйте препроцессоры — они сделают всю рутину за вас:

# Пример для Node.js и `sprite-webpack-plugin`
npm install sprite-webpack-plugin --save-dev

Sass + Compass: спрайты на автопилоте 🚀

Compass — это мощный инструмент для автоматизации спрайтов прямо из Sass. Вот как это работает:

@import "compass/utilities/sprites";
@import "icons/*.png"; // Импортируем все PNG-иконки из папки

@include all-icons-sprites; // Генерирует CSS для всех иконок!

Что происходит под капотом:

Compass объединяет все PNG-файлы из папки icons в один спрайт.
Автоматически рассчитывает background-position для каждой иконки.

💡 Совет: Настройте $icons-spacing (например, 2px) для контроля расстояния между элементами спрайта.

Оптимизация: меньше веса — больше скорости ⚡

1. SVG-спрайты

Идеально для векторных иконок. Используйте symbol для создания спрайта:

<svg style="display:none;">
  <symbol id="icon-arrow" viewBox="0 0 24 24">
    <path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"/>
  </symbol>
</svg>

<!-- Использование -->
<svg class="icon"><use xlink:href="#icon-arrow"/></svg>

2. Оптимизация PNG/JPEG

TinyPNG: Сжимает без потери качества.
ImageOptim: Удаляет метаданные из файлов.

# Оптимизация через командную строку
npm install -g imagemin-cli
imagemin images/* --out-dir=optimized

Реальный пример: кнопка с иконкой 🎯

// _sprite.scss
$icons: sprite-map("icons/*.png", $spacing: 10px);

.button-cta {
  background: sprite($icons, "arrow-right") no-repeat 95% center;
  padding-right: 40px;
}

Результат в CSS:

.button-cta {
  background: url('icons-sprite.png') no-repeat -120px -45px;
  background-position: 95% center;
}

Когда НЕ использовать спрайты? 🚧

Большие изображения (например, hero-баннеры).
Анимированные элементы (GIF/APNG лучше оставить отдельно).
Иконки, которые редко используются на странице.

⚠️ Важно: Для HTTP/2 множественные запросы менее критичны, но спрайты всё ещё полезны для часто используемых элементов!

Практика: создаём спрайт за 5 минут ⏱️

1. Установите Compass:

gem install compass

2. Создайте структуру проекта:

assets/
  ├── scss/
  │   └── styles.scss
  └── icons/
      ├── facebook.png
      └── twitter.png

3. Добавьте в styles.scss:

@import "compass/utilities/sprites";
@import "icons/*.png";
@include all-icons-sprites;

4. Запустите компиляцию:

compass compile

Готово! В папке images появится icons-sprite.png, а CSS будет содержать готовые стили для всех иконок.

Итоги: что запомнить? 📌

Спрайты = меньше запросов → быстрее загрузка.
Автоматизация через Sass/Compass или Webpack-плагины.
SVG-спрайты — современная альтернатива для векторной графики.
Оптимизируйте итоговый файл (TinyPNG, ImageOptim).