Основные технические рекомендации
Как собирать HTML-сет и оптимизировать ресурсы, чтобы пройти модерацию площадки с ограничением в 150кб
Iana Nosova
Последнее обновление год назад
- Используйте в сете изображение (KV – key visual) в формате JPG (если нет необходимости сохранить прозрачный фон). Этот формат намного лучше поддается компрессии при экспорте, чем PNG.
- При необходимости использования формата PNG перед загрузкой в deaz.io предварительно уменьшите вес через tinypng.com (практически не ухудшает качество, но сильно уменьшает вес картинки).
Не используйте изображения с избыточным соотношением сторон (например, 4000 × 5000 пикселей).
Перед загрузкой в сет рекомендуется предварительно оптимизировать изображение, исходя из наибольшего формата в наборе. Если, например, в сете самым крупным форматом является 300 × 600, то изображение следует подготовить с небольшим запасом относительно этих размеров.Рекомендуемый максимальный вес основного растрового изображения — не более 60–80 КБ. Конкретный размер зависит от количества дополнительных элементов в креативе: чем их больше, тем меньший объём допустим для главной картинки.
Изображение можно предварительно обрезать под конкретные форматы баннеров. Например, подготовить отдельные кропы для горизонтальных, вертикальных и квадратных размеров.
Шейпы, градиенты, логотипы и плашки рекомендуется загружать в формате SVG. Исключение — случаи, когда логотип содержит множество мелких деталей: чем их больше, тем выше итоговый вес файла. В таких случаях рекомендуется сравнить размер SVG- и PNG-версий и выбрать наиболее оптимальный вариант.
Если разница в весе несущественна, предпочтение следует отдать SVG — он эффективнее сжимается при упаковке в финальный архив.- Если у вас не фотография, а иллюстрация, созданная в графическом редакторе — ее также стоит выгружать в SVG формате.
- Не используйте много слайдов с разным наполнением — максимум 2, а для наилучшего качества лучше ограничиться одним изображением на все слайды (особенно, если это фотография на весь баннер).
- Если в сете используется кнопка — создавайте её с помощью внутреннего инструмента Buttons.
- Если у вас очень большой и ёмкий дисклеймер, который занимает весь кадр — загружайте его в сет в формате PNG, так как большой объёмный текст после экспорта будет много весить в SVG.
- Как вариант можно использовать атлас спрайтов — слить все фоновые изображения в одну картинку и использовать в таком виде, это тоже поможет сэкономить место.
Для таких площадок, как Яндекс, есть ограничение до 20 файлов в архиве.
Отсюда наши основные рекомендации:
Количество слоев в композиции — не более 15
Желательно использовать объединение в один файл, если изображений в композиции получилось больше 15
Учитывайте наличие текстовых слоёв — при экспорте каждый из них конвертируется в отдельный SVG-файл
Рекомендации при создании импорта из Figma
Для корректной работы deaz.io и переноса макетов из Figma, рекомендуем доставать тексты из компонентов, групп, фреймов внутри фрейма, чтобы они лежали в корне основного фрейма креатива. Иначе тексты будут импортироваться как нередактируемые SVG- или PNG-элементы/слои.
Пример правильного расположения элементов внутри фрейма:
Пример НЕправильного расположения элементов внутри фрейма:
