Um parâmetro entre pairar e ficar em pé

Um carro flutuando em um fundo branco é o sinal mais comum de que um anúncio foi montado e não fotografado. Arraste o controle deslizante e veja o mesmo veículo pousar na página.

Sem sombraSombra projetadaVolkswagen Golf sem sombraVolkswagen Golf com sombra de estúdio

Ambas as metades são respostas não editadas da API para o mesmo carro. A única diferença entre elas é ?shadow=true. As teclas de seta também funcionam.

Ninguém olha um anúncio e pensa "esse veículo não tem sombra de contato". Eles apenas confiam nele um pouco menos.

Esta é a camada de trabalho de imagem que costumava ocupar a tarde de um retocador: recorte o carro, construa uma sombra, coloque no fundo, faça novamente para os próximos quatrocentos veículos. Nunca escalou, então a maioria dos catálogos desistiu disso e enviou o que saiu do pátio. Aqui é um parâmetro de consulta, o que significa que escala para todo o estoque ou para nenhum, e custa o mesmo de qualquer maneira.

Cinco maneiras de se destacar

A mesma solicitação com uma coisa alterada. Qual é a certa depende menos do gosto do que de onde a imagem vai ficar.

Volkswagen Golf, simples

Simples

sem parâmetro

Apenas o carro. Ideal para uma grade densa de pequenas imagens, onde uma sombra sob cada miniatura se torna ruído visual, e ideal para quem pretende compor o veículo por conta própria.

Volkswagen Golf, sombra projetada

Sombra projetada

?sombra=true

Uma sombra de estúdio suave abaixo do carro. Esta é a que a maioria das páginas de anúncios quer: não custa nada pedir e faz a diferença entre um veículo que flutua e um que está em pé. Use-a para imagens principais e páginas de detalhes.

Volkswagen Golf, com efeito de solo

Sem sombra

?ground=true

Uma sombra de contato mais apertada onde os pneus encontram a superfície. Menos teatral que a sombra de queda e mais física, então é adequada para páginas que já carregam muito estilo e não precisam que o carro seja dramático também.

Volkswagen Golf, piso de showroom

Piso de showroom

?espelhamento=true

Um reflexo sob o veículo, como um piso polido se comporta, com uma sombra de contato onde os pneus o tocam. Ele transmite sofisticação e esforço, por isso funciona em páginas de destino e banners de campanha e raramente em uma lista de resultados.

Volkswagen Golf, reflexo limpo

Reflexo limpo

?mirroring=clean

O mesmo reflexo com a sombra de contato removida. Nada escurece abaixo do carro, então o resultado é mais gráfico do que fotográfico. Esta é a opção a usar quando o veículo está sobre um painel colorido ou ao lado de texto, onde uma sombra seria interpretada como sujeira.

A sexta opção é sem fundo

Este é o mesmo veículo novamente, recortado, posicionado diretamente sobre esta seção. Nada foi mascarado para chegar aqui e não há borda branca ao longo da linha do teto, pois o fundo nunca esteve presente.

Volkswagen Golf com fundo transparente, mostrado em uma superfície escura

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

Por que transparência e sombra se excluem

Uma sombra é projetada sobre algo. Tire a superfície e não há nada para ela cair, então um recorte com uma sombra anexada seria uma imagem de uma situação fisicamente impossível. A API diz não em vez de devolvê-la, o que economiza os vinte minutos de se perguntar por que parece errado.

Se precisar dos dois, a resposta é compor: peça ?transparency=true, coloque o carro na sua própria cena e deixe sua própria superfície carregar a sombra. Esse é o caminho normal para o trabalho de campanha, e é por isso que o recorte existe.

Sobre o formato, use WebP com um canal alpha, a menos que algo a jusante exija PNG. Mesma transparência, aproximadamente um quinto dos bytes, e nenhum navegador em uso hoje precisa do PNG. Alpha é a única coisa que não se comprime bem, então o recorte permanece o mais pesado dos cinco, qualquer que seja a sua escolha.

O que pedir e onde

Grade de resultadossimplesDúzias de pequenos azulejos. Uma sombra sob cada um deles vira uma massa cinza no tamanho da miniatura, e a página fica mais calma sem elas.
Hero da página de detalhes?sombra=trueUm carro, grande, com espaço ao redor. É aqui que a sombra se justifica e onde um veículo flutuante é mais óbvio.
Tabelas de comparação?ground=trueVários carros em fila com tamanho médio. A sombra de contato apertada os mantém na mesma linha sem competir por atenção.
Campanha e página de destino?espelhamento=trueUm veículo carregando a página. O reflexo parece um piso de showroom e ganha um pouco de polimento de graça.
Sobre um painel colorido?mirroring=cleanO veículo está sobre uma cor de marca ou ao lado de um título. O reflexo permanece, a sombra de contato some, pois em uma superfície colorida uma sombra é interpretada como uma mancha.
A sua própria cena?transparência=trueQualquer coisa com um fundo próprio: um tema escuro, uma cor de marca, uma fotografia de uma estrada. Componha você mesmo e adicione sua própria sombra.

Antes de perguntar

Posso ter uma sombra e um fundo transparente?

Não, e não por causa de uma limitação. Uma sombra é projetada sobre uma superfície. Remova a superfície e não há nada para projetar, então uma sombra flutuando sob um recorte seria uma imagem de algo impossível. Peça transparência e compõe a sua.

O recorte é um PNG?

Pode ser, mas WebP com canal alfa é aproximadamente um quinto do tamanho e todos os navegadores em uso hoje o leem. Peça PNG quando algo a jusante insiste nisso, caso contrário, pegue o arquivo menor.

As bordas se mantêm em um fundo escuro?

É esse o caso que vale a pena testar, pois um recorte malfeito mostra um halo branco ao longo da linha do telhado assim que é colocado sobre algo escuro. Esses são renderizados e não mascarados, então não há halo para remover.

Posso obter uma sombra personalizada, mais suave ou mais dura?

Os quatro tratamentos de superfície são o que a API expõe hoje. Se precisar de um visual específico para uma campanha, avise o que ele precisa acompanhar e diremos se é um parâmetro ou uma conversa.

Algo disso tem custo extra?

Não. São parâmetros na mesma solicitação, não produtos separados. O que difere é o tamanho do arquivo, e o recorte é o mais pesado deles porque o alfa não se comprime tão bem.

Experimente com seu anúncio mais problemático

Escolha a página com a qual você está menos satisfeito, envie-nos os veículos nela, e retornamos com os mesmos carros em qualquer um dos cinco tratamentos que se adapta a ela. Depois, coloque as duas páginas lado a lado.