Один параметр между парением и стоянием

Машина, парящая на белом фоне, — самый распространённый признак того, что объявление было собрано, а не сфотографировано. Перетащите ползунок и посмотрите, как тот же автомобиль приземляется на страницу.

Без тениПадающая теньVolkswagen Golf без тениVolkswagen Golf с тенью студии

Обе половины — это неотредактированные ответы API для одного и того же автомобиля. Единственная разница между ними — это ?shadow=true. Работают и стрелки клавиатуры.

Никто не смотрит на объявление и думает "этот автомобиль без контактной тени". Просто ему доверяют чуть меньше.

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

Пять способов выделиться

Тот же самый запрос, но с одной измененной вещью. Какое решение правильное — зависит не столько от вкуса, сколько от того, где будет размещаться изображение.

Volkswagen Golf, простой

Простой

без параметра

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

Volkswagen Golf, тень

Падающая тень

?shadow=true

Мягкая студийная тень под автомобилем. Это именно то, что хотят большинство страниц с объявлениями: её бесплатно запросить, и она делает разницу между автомобилем, который парит, и тем, который стоит. Используйте её для главных изображений и страниц с деталями.

Volkswagen Golf, с тенью

На земле

?ground=true

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

Volkswagen Golf, на полу салона

Пол шоурума

?mirroring=true

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

Volkswagen Golf, чистое отражение

Чистое отражение

?mirroring=clean

То же отражение, но без контажной тени. Ничего не темнеет под автомобилем, поэтому результат выглядит более графически, чем фотографически. Это то, что нужно использовать, когда автомобиль стоит на цветной панели или рядом с текстом, где тень будет выглядеть как грязь.

Шестой вариант — это отсутствие фона

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

Volkswagen Golf на прозрачном фоне, показан на тёмной поверхности

GET /api/Volkswagen/Golf/2024/Basis/base/front_left?transparency=true&format=webp

Почему прозрачность и тень исключают друг друга

Тень отбрасывается на что-то. Уберите поверхность — и не останется ничего, на что она могла бы падать, поэтому картинка с прикреплённой тенью будет изображением физически невозможной ситуации. API отказывается возвращать её, что экономит вам двадцать минут размышлений о том, почему она выглядит неправильно.

Если нужно и то, и другое, ответ — композитинг: запросите ?transparency=true, поместите автомобиль на свою сцену и пусть ваша поверхность несет тень. Это нормальный путь для кампаний, и поэтому существует вырезка.

По формату берите WebP с альфа-каналом, если что-то дальше по цепочке не требует PNG. Такая же прозрачность, примерно пятая часть байтов, и ни один браузер, используемый сегодня, не нуждается в PNG. Альфа — это единственное, что не сжимается хорошо, поэтому вырезка остается самой тяжелой из пяти, какой бы формат вы ни выбрали.

Что просить, и где

Сетка результатовпростойДесятки маленьких плиток. Тень под каждой из них превращается в серую кашу при размере миниатюры, а страница выглядит спокойнее без них.
Главное изображение страницы деталей?shadow=trueОдин автомобиль, крупный, с пространством вокруг. Вот где тень оправдывает себя и где плавающий автомобиль наиболее заметен.
Таблицы сравнения?ground=trueНесколько автомобилей в ряд среднего размера. Тесная контактная тень удерживает их на одной линии, не конкурируя за внимание.
Кампания и посадочная страница?mirroring=trueОдин автомобиль несет страницу. Отражение читается как пол в шоуруме и добавляет немного лоска бесплатно.
На цветной панели?mirroring=cleanАвтомобиль стоит на цветном фоне или рядом с заголовком. Отражение остается, контажная тень исчезает, потому что на цветной поверхности тень выглядит как размазанное пятно.
Ваша собственная сцена?transparency=trueЛюбое изображение с собственным фоном: тёмная тема, цвет бренда, фотография дороги. Скомпонуйте его самостоятельно и добавьте свою тень.

Прежде чем спросить

Можно ли получить тень и прозрачный фон?

Нет, и не из-за ограничения. Тень отбрасывается на поверхность. Уберите поверхность — и не на что будет отбрасывать тень, поэтому тень под вырезкой была бы изображением чего-то невозможного. Запросите прозрачность и создайте свою собственную.

Вырезка — это PNG?

Может быть, но WebP с альфа-каналом примерно в пять раз меньше по размеру, и все современные браузеры его читают. Запрашивайте PNG, если что-то на выходе требует этого, в противном случае берите меньший файл.

Как выглядят края на темном фоне?

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

Можно ли получить тень другого типа, мягче или жестче?

Четыре обработки поверхности — это то, что API предоставляет сегодня. Если вам нужен особый вид для кампании, расскажите, что должно рядом с ним находиться, и мы скажем, является ли это параметром или разговором.

Все это стоит дополнительных денег?

Нет. Это параметры одного запроса, а не отдельные продукты. Различается размер файла, и вырезка — самая тяжелая из них, потому что альфа не сжимается так хорошо.

Попробуйте на вашем худшем объявлении

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