Язык: RU
Начать бесплатно

Фото товаров Webflow: достаточно лёгкие для загрузки.

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

Флакон духов с золотой филигранью на мраморном блоке · Предметная студия
Исходное фото: Фото товара. Создано в Herofab · Предметная студия
Стоит знать

Где Webflow устанавливает ограничения.

  1. 1

    Ограничение по весу, а не размеру

    В Webflow можно загрузить изображение любого размера, если вес файла не превышает лимит. PNG с детализированной сценой может быть тяжёлым: файл 2K иногда превышает ограничение, а 4K ещё больше. JPG надёжнее. Перед загрузкой проверьте вес каждого файла; значение лимита приведено в таблице на этой странице.

  2. 2

    Основное изображение и дополнительные фото

    У товара Webflow есть одно поле Main image и поле More images для ограниченного числа дополнительных фото. SVG запрещён в полях изображений товара и его вариантов. В Main image поместите наиболее простой снимок товара целиком; дополнительные поля подойдут для других ракурсов, оформленной сцены и крупного плана детали, созданных по одному исходному фото.

  3. 3

    Адаптивные версии, кроме импорта

    Для достаточно широких загружаемых изображений Webflow создаёт набор уменьшенных вариантов форматов JPG, PNG и WebP. При добавлении через CSV-импорт или API такие варианты не создаются; Webflow указывает, что файлы уже должны иметь подходящий размер и быть оптимизированы. Поэтому для импортируемого каталога файлы нужно подготовить заранее.

Размер файла
Не более 4 MB на каждое изображение
Размер
Можно загрузить изображение любого размера, если файл меньше лимита 4 MB; у изображений WebP длина стороны ограничена 16 383 пикселями
Форматы
PNG, JPEG, SVG и WebP названы лучшими форматами для загрузки
Запрещено
Изображения SVG в полях изображений товара и варианта, а также анимированные файлы AVIF
Количество
У товара есть одно поле Main image и поле для нескольких изображений More images, в котором помещается до 25 изображений
Адаптивные изображения
Для изображения шире 3 200 пикселей Webflow создаёт 7 вариантов шириной 3 200, 2 600, 2 000, 1 600, 1 080, 800 и 500 пикселей; варианты создаются для встроенных изображений JPG, PNG и WebP
Импорт через CSV и API
Изображения, добавленные через импорт CSV или API, адаптивных вариантов не получают, поэтому они должны быть уже нужного размера и оптимизированы
WebP и AVIF
Ресурсы JPEG и PNG можно конвертировать в WebP или AVIF встроенным инструментом; конвертация идёт с потерями и заменяет исходный файл
Alt-текст
Alt-текст можно задать для каждого изображения, в том числе для каждого изображения в поле с несколькими изображениями; Webflow AI может создавать его для JPG, PNG, GIF, WebP и AVIF
Имена файлов
Короткие имена файлов — 100 символов или меньше, включая расширение
Исходное фото

Фото, которое лежит в основе страницы товара Webflow.

  • Сделайте один снимок товара целиком и один — крупным планом его самой мелкой детали: застёжки, циферблата или пришитой этикетки. В More images есть место для дополнительного ракурса рядом с основным.
  • Оставьте все края товара в кадре и сохраните вокруг него поля. Если часть обрезана рамкой фото, достоверно восстановить её позже нельзя, какой бы ни была выбранная сцена.
  • Пока товар у вас в руках, запишите его название, материал и цвет: в Webflow можно указать alt-текст для каждого изображения, включая каждое фото в More images.

Ограничение веса, способы импорта и отсутствующие варианты

Для изображений товара установлено только одно точное ограничение — вес; детальный PNG легко превышает его. Размер в пикселях не поможет файлу, который уже тяжелее максимума. Поля изображений товара и его вариантов не принимают SVG, а анимированный AVIF тоже запрещён.

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

Главное изображение, дополнительные изображения и детальные ракурсы

В поле Main image поместите самый чёткий полный вид: «Предметная студия» создаёт его на студийном фоне или в сцене, в квадратной либо вертикальной форме. В поле More images добавляются остальные виды — три четверти, сбоку и сверху по тому же исходнику, сцена на мраморе или дереве и крупные планы циферблата или застёжки из «Детального снимка».

Для каждого изображения в поле с несколькими снимками можно задать собственный альтернативный текст вручную или создать его ИИ-функцией платформы для JPG, PNG, GIF, WebP и AVIF. Загрузки Herofab доступны в PNG или JPG, поэтому подходят оба способа; в альтернативном тексте крупного плана можно точно назвать показываемую деталь.

Настройка компрессора и порог ширины для 4K

Для файлов шире заданной величины описано создание полного набора из семи адаптивных вариантов. Квадратный вывод 4K превышает этот порог, квадратный 2K — нет. Поэтому изображение 4K получает полную линейку размеров, но весит больше; загружайте JPG или сжатую копию.

Бесплатная настройка компрессора сохраняет JPG в пределах ограничения веса, сначала снижая качество и только при необходимости — число пикселей. Поскольку правила не устанавливают минимальный размер, уменьшение прекращается, когда ширина становится менее четверти оригинала. Новый файл теряет встроенный в изображения Herofab ИИ-маркер. Для импорта через CSV или API заранее закажите размер, требуемый макетом.

Вопросы

Фото товаров для Webflow: ответы на вопросы.

Что загрузить в магазин Webflow — PNG или JPG?

В большинстве случаев — JPG. Webflow ограничивает вес каждого файла изображения; PNG в 2K от Herofab может превысить этот предел, тогда как JPG того же фото легче. Webflow называет и PNG, и JPEG среди форматов загрузки. Если нужен PNG, сначала проверьте его вес: бесплатная проверка размера изображения сравнивает файл с опубликованным Webflow ограничением прямо в браузере.

Можно ли использовать инструмент конвертации Webflow для изображений Herofab?

Встроенный инструмент Webflow конвертирует ресурсы JPEG и PNG в WebP или AVIF. Webflow описывает конвертацию как формат со сжатием с потерями и отмечает, что исходный файл заменяется. Перед преобразованием сохраните скачанный из Herofab файл за пределами Webflow как мастер-копию, а после конвертации проверьте мелкий текст на товаре.

Сколько изображений можно добавить к товару Webflow?

Одно в поле Main image и установленное число дополнительных фото в More images; количество указано в таблице на этой странице. Студия товаров по одному исходному фото показывает товар спереди, под углом, сбоку или сверху — на простом фоне либо в сцене. Каждое дополнительное фото является отдельным файлом, который должен укладываться в ограничение по весу; для него также можно задать собственный alt-текст.

Получает ли изображение товара 4K адаптивные варианты?

Да, если оно добавлено как встроенное изображение и шире установленного порога: квадратный вывод 4K превышает его и получает семь вариантов вплоть до минимальной указанной ширины. Изображения, добавленные через CSV или API, не получают ни одного варианта независимо от ширины.

Какой максимальной длины может быть имя файла изображения товара?

Не более ста символов, включая расширение. Перед загрузкой изображение можно переименовать по короткому шаблону: товар, цвет и ракурс. Так имя остаётся понятным в панели ресурсов и укладывается в ограничение.

Сколько это стоит?

4 кредита за изображение, плюс один кредит за 4K. В долларах США это от 0,16 $ до 0,48 $ за изображение до уплаты налогов, от самого большого тарифа до самого маленького пакета кредитов. Стоимость видна до генерации, а если задание не удалось, кредиты возвращаются. 20 бесплатных кредитов при регистрации хватает на 5 изображений этим инструментом.

Примеры по товарам
Начало работы

Новая коллекция в кадре уже на этой неделе.

20 кредитов при регистрации, карта не нужна. На изображениях, созданных за бесплатные кредиты, есть водяной знак.