悬浮和站立之间的一个参数

悬浮在白色背景上的车辆是列表被拼凑而非拍摄的最常见标志。拖动手柄,观察同一车辆降落在页面上。

无阴影投影阴影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,将车辆放在你自己的场景中,让你自己的表面承载阴影。这是活动工作的正常路径,也是切割存在的原因。

在格式上,除非下游坚持使用PNG,否则带有alpha通道的WebP是最好的选择。相同的透明度,大约五分之一的字节数,而且今天在使用的浏览器都不需要PNG。alpha是唯一不压缩的东西,所以无论你选择哪种格式,切割都会是最重的。

如何请求,以及在哪里请求

结果网格普通数十个小图块。每个图块下方的阴影在缩略图大小时变成灰色糊状,没有阴影的页面看起来更加平静。
详情页英雄图?shadow=true一辆大车,周围有空间。这是阴影发挥作用的地方,也是悬浮车辆最明显的地方。
对比表格?ground=true一排中等大小的车辆。紧密的接触阴影使它们保持在同一行上,而不会相互争夺注意力。
活动和落地页?mirroring=true一辆车承载整个页面。反射看起来像展厅地板,免费增加了一些光泽。
在彩色面板上?mirroring=clean车辆放置在品牌颜色上或标题旁边。反射保留,接触阴影去掉,因为在彩色表面上阴影会显得像污渍。
你自己的场景?transparency=true任何带有自己的背景的东西:深色主题、品牌颜色、道路的照片。自己合成它,并添加自己的阴影。

在你问之前

我可以有阴影和透明背景吗?

不可以,也不是因为有限制。阴影投射在表面上。去掉表面就没有东西可以投射,所以悬浮在切割下方的阴影是不可能的画面。请求透明度并合成你自己的。

切割是 PNG 吗?

可以是,但带有 alpha 通道的 WebP 大小大约是它的五分之一,而且今天使用的每个浏览器都可以读取它。当下游需要时请求 PNG,否则选择较小的文件。

边缘在深色背景上表现如何?

这是需要测试的情况,因为一个不好的切割会在车顶线与任何深色背景接触时显示出白色光晕。这些图像是渲染出来的,而不是遮罩,因此没有光晕需要去除。

我可以得到一个自定义的阴影,柔和一些或硬一些吗?

API目前提供的四种表面处理。如果你需要特定的效果来进行活动,告诉我们它需要与什么搭配,我们会告诉你是参数还是对话。

这些有额外费用吗?

不。它们是同一请求的参数,不是独立的产品。不同之处在于文件大小,剪切是最重的,因为alpha无法很好地压缩。

在最差的车辆信息上试试

选择你最不满意的页面,把上面的车发给我们,我们会用五种处理方式中的一种返回相同的车。然后将两个页面并排放置。