Для кого: дизайнеры и ops витрины, отдающие длинную деталь стопкой PNG-срезов с заданной высотой, именами, лимитом объёма и ленивой загрузкой без CLS. Пакет на удалённом Mac M4 даёт единый sRGB и журналы.
Структура: матрица «выпускать/стоп», чеклист приёмки, шаги экспорта и кромок, FAQ. Связка: товарные PNG и QA, PNG-8 и дизеринг, параметры Figma и др.
Содержание
Три провала без матрицы
- Декод и LCP: один огромный PNG грузит поток и бьёт по LCP в колонке детали.
- CLS: плейсхолдер не совпадает с высотой среза.
- Ops: хаотичные имена и разные пресеты в одной кампании без манифеста.
Длинные изображения на витрине: сценарии и риски производительности
Монолит заставляет декодировать всё сразу; нарезка даёт lazy ниже первого экрана и параллель CDN. Риски: шов, кайма на тёмной теме, лишний truecolor, коллизии имён без реестра партии.
Матрица «выпускать / доработать»:
| Сигнал | Зелёный свет | Красный (сначала исправить) |
|---|---|---|
| Стоимость декода | Срез ~2–4 Мп; над сгибом ≤2 файла до ключевой отрисовки | Один PNG >6 Мп или >1,5 МБ после lossless на мобиле без обоснования |
| Прокрутка и смысл | Рез по границам секций | Разрез через цену, мелкий текст, бейдж |
| Прозрачность | Альфа по контракту шаблона; матирование в README | «Белые» панели с альфой дают серость в тёмной теме |
| Следопытность для ops | Манифест: SKU, кампания, индекс среза, версия пресета | QA только «по папке» без версии пресета |
Высота среза и таблица брейкпоинтов
Баланс: число запросов, вес файла, целостность макета. Мобильный мастер обычно 750–1125 px ширины при @2x от 375; вертикаль — 1–2 экрана прокрутки, рез в отступы, не в глифы.
| Логическая ширина (CSS px) | Типичная ширина @2x | Стартовая высота среза (px) | Заметки |
|---|---|---|---|
| 375 | 750 | 1400–2000 | Короче, если герой и первый блок важны для LCP отдельно |
| 390 | 780 | 1500–2100 | Сверка с вырезами iPhone |
| 428 и выше | 856+ | 1600–2400 | Выше срезы, если байт-кап позволяет |
| Десктоп-компаньон | Часто 1200–1600 | Мобильные срезы или отдельный манифест | Без отдельного экспорта не растягивать шире интринсик |
Закрепите байт-бюджет по телеметрии, не только по макету. Дополнительно фиксируйте в ТЗ долю трафика с медленными сетями и порог отказа по числу параллельных запросов к CDN.
PNG-24 и индексированный цвет: пороги решений
Смешение плоских блоков и фото требует явной таблицы режимов.
| Визуальная характеристика | Рекомендуемый режим | Ворота QA |
|---|---|---|
| Градиенты, мягкие тени, тон кожи | PNG-24 и альфа при необходимости | 100%: без полос, сверка с мастером |
| Плоские иконки, ≤ 6 цветов, жёсткие края | Индексированный PNG до 256 цветов | Пресет pngquant; выборочный ΔE |
| Текст на фото с текстурой | PNG-24 | Субпиксель на эталоне sRGB |
| Повторяющиеся декоративные ряды | WebP/AVIF по CMS; PNG по требованию площадки | Колонка «кодек» в манифесте |
Удалённый Mac: структура каталогов пакетной обработки и логи
Удалённый Mac M4: отдельная папка на кампанию — проще дифф, ретраи и аудит без смешения с локальными рабочими каталогами.
Пример дерева:
~/batch/pdp-long/{campaignId}/{presetVer}/in/— исходники read-only после приёмаslice/— нарезка по манифестуopt/— выход на CDNlogs/run-*.jsonl— путь, байты, версии CLI, pass/failquarantine/— отказ по размеру, альфе, пикселям
Чеклист приёмки владельца партии:
- Манифест ↔ счётчик
opt/± документированные пропуски. - Макс. сторона файла ≤ согласованного лимита (часто 4096 px).
- Единая политика ICC, обычно sRGB, в README пресета.
failed.jsonlпуст или с тикетами.- 0,5–1% срезов — сверка швов на светлой/тёмной теме.
Перед релизом: ленивая загрузка и плейсхолдеры — FAQ
Плейсхолдер при lazy load?
Резерв по ширине и высоте среза (атрибуты или aspect-ratio); LQIP/цвет/скелетон — без растягивания миниатюры на всю высоту. Верхние срезы при LCP — без lazy.
Высота среза на мобильной PDP?
Ориентир 1,2–2,0 высоты вьюпорта в пикселях масштаба экспорта; рез между модулями; валидация по аналитике устройств.
PNG-24 vs палитра?
PNG-24 при градиентах, мягких краях, альфе на переменном фоне; палитра — после QA на полосы и кайму (см. статью про PNG-8).
Зачем удалённый Mac M4?
Стабильный пресет, нет троттлинга ноутбука, JSONL для аудита; забор opt/ по SSH/VNC и выкладка на CDN.
Исполняемые шаги: параметры экспорта, правило имён, максимум пикселей и прозрачные кромки
Пять шагов в пресете и README:
- Цвет: sRGB, встроенный ICC, 8 bpc, без interlace.
- Геометрия: ширина = эталон витрины; высота из матрицы; желательно чётная высота.
- Оптимизация: lossless на все; pngquant только по флагу в манифесте.
- Имя:
{tenant}_{skuOrCampaign}_{sliceIndex3}_w{width}px_h{height}px_{sliceKind}_srgb_v{preset}.png— нули в индексе, kind: hero/spec/story/legal, нижний регистр; переименование после QA → bumpv. - Кромки: не резать сквозь полутень; при двух срезах с альфой — 1 px overlap или полоска матта; вырез товара по возможности в одном файле.
Лимит стороны: 4096 px на веб-срез; 5K+ мастера — отдельно, для витрины даунскейл.
Удалённый Mac M4 для нарезки, оптимизации и приёмки партий
Арендуйте Mac mini M4 под конвейер PNG: единый sRGB, диски и SSH/VNC. Тарифы и помощь доступны без лишних шагов; в блоге — ещё материалы по дизайн-доставке для масштабирования витрины.