PNG или JPEG для карточки товара: прозрачность, вес и проверка перед загрузкой

Когда начинать с PNG, а когда с JPEG

PNG использует сжатие без потерь и поддерживает прозрачность. Обычный JPEG сжимает изображение с потерями и не сохраняет альфа-канал. Для фотографии JPEG часто удобен; для схемы с резкими границами, мелкими буквами или прозрачным фоном полезно сравнить результат с PNG. Эти свойства форматов описаны в документации MDN ^[1].

Это не требования конкретного маркетплейса. Перед загрузкой проверьте в его действующей справке допустимые расширения, размеры, пропорции и вес. Поддержка формата браузером не означает, что форма загрузки площадки его примет. Если вы готовите несколько карточек, запишите требования один раз рядом с исходниками и дату проверки.

Пять проверок до выбора формата

• Размеры в пикселях. Сравнивайте экспорты одинакового размера, иначе нельзя понять, связан ли результат с форматом или уменьшением изображения.
• Фон. Решите, нужен ли он прозрачным для дальнейшей сборки или должен быть частью готовой карточки. Шахматная сетка редактора — это обозначение прозрачности, а не фон товара.
• Текст. Проверьте самые мелкие подписи, цифры объёма, размеры и единицы измерения. Ошибка в одной цифре важнее небольшой разницы в весе файла.
• Края предмета. Рассмотрите ручку, ремешки, стекло и тонкие выступающие детали. Отдельно проверьте, не остался ли светлый ореол от удалённого фона.
• Вес файла. Сверьте его с ограничением места загрузки. Не уменьшайте качество по произвольному совету, если файл уже проходит и выглядит хорошо.

Учебный пример: карточка термокружки 1200 × 1600

Предположим, у вас есть фотография кружки на спокойном фоне, заголовок и подпись объёма. Размер макета — 1200 × 1600 пикселей, пропорция 3:4. Это условия примера, а не обязательный стандарт площадки. Сохраните редактируемый исходник и сделайте два экспорта: PNG и JPEG. Назовите их mug-front-v01.png и mug-front-v01.jpg, чтобы не перепутать с другой версией.

Откройте оба файла при одинаковом масштабе. Сначала рассмотрите подпись объёма и контур крышки, затем уменьшите изображение до размера карточки на экране телефона. Запишите фактический вес каждого файла. Если в JPEG буквы потеряли чёткость, попробуйте другой уровень качества из исходника и повторите сравнение. Если оба варианта читаются одинаково, выбирайте допустимый для площадки файл, учитывая его вес и нужную прозрачность.

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

Четыре ошибки, которые мешают сравнению

• Переименовать .jpg в .png. Расширение имени не выполняет конвертацию: используйте экспорт редактора.
• Сравнить большой PNG с сильно уменьшенным JPEG. Сначала выровняйте размеры в пикселях и масштаб просмотра.
• Исправлять уже сжатую копию вместо исходника. Храните отдельный редактируемый файл и создавайте новые варианты из него.
• Оценить только фотографию. Проверьте весь макет: подписи, единицы измерения, фон и важные детали после кадрирования.

Что сделать сейчас

Выберите один готовый экспорт и проверьте его параметры в инструменте ниже. Файл обрабатывается в вашем браузере и не отправляется на сервер Варупа. Проверка не определяет права на изображение, достоверность характеристик, качество света или соответствие всем правилам маркетплейса — эти пункты остаются за вами.

Если размеры и пропорции подходят, переходите к сборке серии: обложка, размеры, комплектация, применение и ограничения. В связанном разборе брифа есть порядок работы над пятью слайдами. Шаблоны карточек LADIVO можно использовать как основу оформления; наличие шаблона не заменяет проверку фактов о товаре.