Для кого: дизайнеров интерфейсов и фронтенд-команд, которые отдают растровые наборы иконок и UI-плиток либо как единый PNG-спрайт с координатами в CSS (background-position), либо как пакет отдельных файлов с тем же визуальным результатом. Нужны целочисленная сетка, согласованные @2x / @3x и воспроизводимая пакетная приёмка на macOS — удобно вынести на удалённый Mac mini M4, чтобы не блокировать ноутбук длинными циклами экспорта и проверок.
Ниже — матрица решений с шагами и критериями приёмки; углубление по Figma, SVG→PNG и цвету — через внутренние ссылки в соответствующих разделах.
Содержание
Параметры экспорта PNG-спрайта
Спрайт — это один растровый лист с фиксированной сеткой ячеек. От дизайна к фронтенду передаются размеры листа, шаг сетки (ширина и высота ячейки включая отступы), координаты каждого кадра в пикселях от левого верхнего угла и соглашение об якоре (обычно верхний левый угол ячейки совпадает с «логическим» кадром иконки).
Исполняемые шаги (дизайн):
- Сетка целыми пикселями: ширина и высота каждой ячейки, шаг по горизонтали и вертикали — целые числа. Любая дробь в макете до экспорта устраняется (см. чеклист Figma Auto Layout и PNG).
- Внутренний зазор (padding): минимум 1 px между соседними глифами на финальном масштабе спрайта, лучше 2 px, если есть полупрозрачные края — снижает риск «подсоса» соседнего пикселя при фильтрации в браузере.
- Прозрачность: экспорт PNG-32 с альфой; без заливки «под иконку», если фронт ожидает прозрачный фон.
- Цвет: встроенный профиль по политике продукта — чаще sRGB; детали и проверки — в чеклисте sRGB и Display P3; P3 для веба — только при явном требовании и документированном преобразовании.
- Именование: например
[email protected],[email protected]; в манифесте — таблицаid → row,col → x,y → w,hв пикселях для каждого масштаба.
Критерии приёмки (дизайн → передача): размеры листа кратны шагу сетки; все координаты кадров в JSON/CSV совпадают с визуальными направляющими; нет обрезанных полупрозрачных краёв у границы ячейки; файл открывается в Preview на 100% без неожиданного гамма-сдвига относительно эталона.
@2x / @3x и пиксельное выравнивание
Для CSS спрайт показывается в блоке с логическим размером 1× (в CSS px), а картинка подаётся в физических пикселях экрана. Правило: background-size должен масштабировать весь лист так, чтобы одна логическая ячейка соответствовала целому числу физических пикселей на целевом DPR.
Шаги согласования с фронтендом:
- Зафиксируйте базовый размер иконки в CSS (например 24×24 логических px).
- Экспортируйте спрайт так, чтобы при
background-size: [W]px [H]px(где W,H — ширина/высота листа в логических единицах для 1×-варианта или пропорционально для @2x) каждая ячейка на экране @2x занимала ровно 48 px, на @3x — 72 px, без дробных остатков. background-positionзадавайте в тех же единицах, что иbackground-size, либо в px с целыми значениями после пересчёта; избегайте дробныхem, если они дают субпиксель на целевых DPR.- Проверьте иконки с 1 px штрихом на чётность толщины в логических пикселях — иначе на @2x линия станет «мыльной» или смещённой на полпикселя.
Дополнительная математика масштабов для смешанных пайплайнов (SVG → PNG) — в матрице растровизации Retina.
Пакетная обработка: команды и параметры инструментов
На удалённом M4 удобно собирать спрайт из отдельных PNG (после выравнивания имён и размеров), нормализовать профиль и прогнать lossless-сжатие перед выдачей в репозиторий.
| Задача | Инструмент (macOS) | Параметры / пример | Критерий «принято» |
|---|---|---|---|
| Сборка сетки N×M из одноразмерных PNG | ImageMagick 7 (magick) |
magick montage *.png -tile NxM -geometry +0+0 -background none sheet.png (порядок файлов — из списка/манифеста) |
Итоговый sheet.png: ширина = N×w, высота = M×h; альфа сохранена; без обрезки по bbox, если ячейки фиксированы |
| Вырезать кадр для регрессионного теста | ImageMagick | magick sheet.png -crop WxH+X+Y +repage tile.png |
Размеры W×H совпадают с манифестом; повторный crop даёт байт-в-байт тот же файл при фиксированных входных данных |
| Проверка / назначение ICC | sips |
sips -g profile sheet.png; при политике sRGB: sips -m /System/Library/ColorSync/Profiles/sRGB Profile.icc sheet.png |
Вывод профиля соответствует регламенту; дельта визуально на эталонном мониторе в допуске |
| Lossless сжатие PNG | oxipng | oxipng -o 4 --strip safe sheet.png |
Декодированное изображение идентично исходному; размер файла ≤ исходного; метаданные — по политике («safe» или без strip) |
| Быстрая валидация структуры PNG | pngcheck / libpng | pngcheck -v sheet.png |
Нет ошибок; при необходимости — контроль наличия/отсутствия iCCP в логе |
| Манифест и повторяемость | shell + shasum -a 256 |
JSON: file, sha256, width, height, dpr на каждый артефакт |
Повторный прогон того же входа даёт те же хэши; расхождения только у явно изменённых слоёв |
Оркестрацию каталогов (inbox → validate → ready) и автоматические повторы оформляйте в том же духе, что и прочие пайплайны PNG на узле: единый лог, манифест и пороги по размеру файла.
Кросс-платформенное превью и приёмка
Чеклист приёмки (минимум):
- Safari и Chrome на macOS: масштаб страницы 100%, сравнение с эталонным макетом в Figma/Sketch в режиме пиксель-превью.
- Эмуляция DPR в DevTools: 2 и 3; убедиться, что иконки не «пляшут» на границах ячеек и нет цветовых ореолов от соседних тайлов.
- Реальное устройство: хотя бы один iPhone с @3x и один дисплей @2x для регресса по тонким линиям.
- Тёмная тема: если спрайт общий — проверить контраст и отсутствие светлых ореолов на границах альфы.
- Зум ОС 125 % / 150 % (Windows) при веб-доставке: нет смещения background-position из-за округления, если используются дробные layout-пиксели — при сбое вернитесь к целым px в вёрстке для блока-носителя.
Критерий блокировки релиза: любая иконка с отклонением координат >1 px на эталонном DPR, видимый артефакт от соседней ячейки, или несоответствие профиля цвета регламенту.
Матрица: спрайт vs отдельные PNG vs вектор
| Подход | Когда уместен | Риски | Приёмка |
|---|---|---|---|
| Один PNG-спрайт + CSS | Много мелких одинаковых по стилю иконок; лимит HTTP/1.1; кеш одного файла | Большой перекачиваемый файл при маленьком изменении; ошибки координат; кэш-инвалидация всего листа | Манифест координат + визуальный дифф листа; размер файла в бюджете CDN |
| Отдельные PNG по файлу | HTTP/2+, независимые релизы иконок, проще code review ассетов | Больше запросов; нужна дисциплина имён и масштабов | Те же правила целых px и DPR, плюс линтер имён в CI |
| SVG / символы | Масштабируемый UI, анимации, тёмная тема через currentColor | Сложнее визуальная согласованность с растровыми фото; другой конвейер QA | Отдельный чеклист; там, где нужен растр — см. раздел Retina выше (SVG → PNG) |
FAQ
Нужен ли отступ «bleed» внутри ячейки спрайта? Для иконок с антиалиасингом — да, 1–2 px пустоты до границы ячейки снижают артефакты при билинейном масштабировании в редких кейсах.
Можно ли использовать один @2x-лист и уменьшать для 1×? Только если вёрстка и background-size явно задают масштаб и QA подтверждает читаемость 1×; иначе отдельный 1×-экспорт предсказуемее для тонких линий.
Почему координаты в CSS не совпадают с макетом? Чаще всего смешаны логические и физические пиксели или применён transform/scale родителя. Сверьте единицу измерения и DPR теста.
Стоит ли сжимать спрайт через lossy? Для UI-иконок с альфой — обычно нет; используйте lossless (oxipng и аналоги) после согласования политики сжатия с командой (GUI ImageOptim vs CLI в других материалах блога).
Спрайты и приёмка — на удалённом M4
Вынесите сборку спрайтов, проверку ICC и lossless-проходы на выделенный Mac mini M4: стабильная среда, SSH/VNC и гайды MacPng без обязательного входа для просмотра тарифов. Откройте главную MacPng, подберите пакеты аренды и тарифы и узлы, а по подключению и окружению — центр помощи. Другие статьи по дизайн-доставке — в разделе технические идеи.