Об этом инструменте
CSS спрайт-лист упаковывает целый набор мелких изображений — иконок, элементов интерфейса, эмодзи — в один большой файл изображения, а затем с помощью CSS-свойства background-position показывает именно нужный фрагмент для каждого элемента. До появления мультиплексирования в HTTP/2 это было действительно значимым приёмом оптимизации: браузеру, открывающему дюжину отдельных соединений для дюжины крошечных файлов иконок, требовалось больше времени, чем при открытии одного соединения для одного объединённого изображения, и эта разница всё ещё может иметь значение на соединениях HTTP/1.1, при жёстких лимитах CDN на количество запросов или просто при стремлении сократить количество запросов, блокирующих рендеринг, в медленной сети.
Этот инструмент собирает обе части за вас, полностью в вашем браузере: перетащите файлы иконок, выберите, располагать ли их в один ряд или в один столбец, и какой прозрачный отступ должен их разделять, а затем инструмент рисует их на одном холсте, кодирует в PNG (чтобы сохранить прозрачность) и генерирует точное CSS-правило background-position для каждой иконки — скопируйте его прямо в свою таблицу стилей. Тем не менее спрайты — это более старая техника: для большинства новых проектов встроенный SVG или SVG-шрифт иконок обычно проще в поддержке и чище масштабируется при любом размере, так что относитесь к этому как к ещё одному инструменту в наборе, а не единственно верному решению — обращайтесь к нему, когда у вас уже есть набор растровых иконок (PNG, а не векторных) и вы хотите сократить число запросов.
Частые вопросы
Актуальны ли ещё CSS-спрайты, или мне стоит использовать SVG-иконки вместо них?
Для большинства новых проектов встроенный SVG или шрифт/спрайт SVG-иконок обычно является более современным выбором (чёткость на любом уровне масштабирования, легко перекрашивается с помощью CSS, нет проблем с выравниванием по фиксированной пиксельной сетке). CSS-спрайты остаются действительно полезными для фотографических/растровых наборов иконок, которые нельзя представить в виде векторных фигур, для устаревших кодовых баз, уже построенных вокруг этой техники, или просто как быстрый, независимый от зависимостей способ упаковать небольшой набор иконок с минимальным количеством HTTP-запросов. Используйте то, что подходит вашим реальным ограничениям — этот инструмент здесь на случай, когда растровый спрайт-лист является правильным инструментом для работы, а не утверждение, что он всегда лучший выбор.
Почему после последнего изображения не добавляется конечный отступ?
Это сохраняет общий размер листа максимально малым — настройка отступа существует для предотвращения растекания текстуры МЕЖДУ соседними иконками при масштабировании листа, что важно только для краёв, общих для двух иконок; собственный внешний край листа не имеет соседней иконки с другой стороны, поэтому дополнительное пространство там не служило бы этой цели и просто увеличило бы размер файла, добавив непоследовательность в том, насколько далеко каждая иконка находится от абсолютного края листа в зависимости от её позиции.