Un parámetro entre flotar y estar de pie

Un coche flotando sobre un fondo blanco es la señal más común de que una lista se ha ensamblado en lugar de fotografiarse. Arrastra el control y observa cómo el mismo vehículo aterriza en la página.

Sin sombraSombra proyectadaVolkswagen Golf sin sombraVolkswagen Golf con una sombra de estudio

Ambas mitades son respuestas de la API sin editar para el mismo coche. La única diferencia entre ellas es ?shadow=true. También funcionan las teclas de flecha.

Nadie mira un listado y piensa "ese vehículo no tiene sombra de contacto". Simplemente lo confían un poco menos.

Esta es la capa de trabajo de imagen que solía vivir en la tarde de un retocador: recortar el coche, construir una sombra, colocarlo sobre el fondo, hacerlo de nuevo para los siguientes cuatrocientos vehículos. Nunca escaló, así que la mayoría de los catálogos renunciaron a ello y enviaron lo que salía del patio. Aquí es un parámetro de consulta, lo que significa que escala a todo el stock o a ninguno de ellos, y cuesta lo mismo de cualquier manera.

Cinco formas de destacar

La misma solicitud con una cosa cambiada. Cuál es la correcta depende menos del gusto que de dónde va a estar la imagen.

Volkswagen Golf, sencillo

Liso

sin parámetro

El coche y nada más. Ideal para una cuadrícula densa de pequeñas fichas, donde una sombra bajo cada miniatura se convierte en ruido visual, y adecuado para cualquiera que pretenda componer el vehículo por sí mismo.

Volkswagen Golf, con sombra proyectada

Sombra proyectada

?mirroring=true

Una sombra de estudio suave debajo del coche. Esta es la que la mayoría de las páginas de listado desean: no cuesta nada pedirla y es la diferencia entre un vehículo que flota y uno que se mantiene en pie. Úsala para imágenes principales y páginas de detalles.

Volkswagen Golf, con sombra natural

Con sombra de contacto

?ground=true

Una sombra de contacto más ajustada donde los neumáticos tocan la superficie. Menos teatral que la sombra de caída y más física, por lo que se adapta a las páginas que ya llevan mucho estilo y no necesitan que el coche sea dramático también.

Volkswagen Golf, piso de exposición

Suelo de sala de exposición

?mirroring=true

Una reflexión bajo el vehículo, como si fuera un suelo pulido, con una sombra de contacto donde los neumáticos lo tocan. Se lee como premium y se lee como esfuerzo, por eso funciona en páginas de destino y banners de campaña y rara vez en una lista de resultados.

Volkswagen Golf, reflexión limpia

Reflexión limpia

?mirroring=clean

La misma reflexión con la sombra de contacto eliminada. Nada oscurece debajo del coche, por lo que el resultado es más gráfico que fotográfico. Esta es la que usar cuando el vehículo está sobre un panel de color o junto a texto, donde una sombra se leería como suciedad.

La sexta opción es sin fondo

Este es el mismo vehículo, recortado, sentado directamente en esta sección. No se enmascaró nada para llegar aquí y no hay ningún borde blanco a lo largo de la línea del techo, porque el fondo nunca estuvo ahí en primer lugar.

Volkswagen Golf con fondo transparente, mostrado en una superficie oscura

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

Por qué la transparencia y la sombra se excluyen entre sí

Una sombra se proyecta sobre algo. Quita la superficie y no queda nada sobre lo que caiga, por lo que una imagen recortada con una sombra adjunta sería una imagen de una situación físicamente imposible. La API dice que no en lugar de devolverla, lo que te ahorra los veinte minutos de preguntarte por qué se ve mal.

Si necesitas ambas cosas, la respuesta es hacer un composite: pide ?transparency=true, coloca el coche en tu propia escena y deja que tu propia superficie lleve la sombra. Ese es el camino normal para el trabajo de campaña y es por eso que existe el recorte.

En cuanto al formato, usa WebP con canal alfa a menos que algo más adelante insista en PNG. La misma transparencia, aproximadamente una quinta parte de los bytes, y ningún navegador en uso hoy necesita el PNG. El alfa es la única cosa que no se comprime bien, así que el recorte se queda como el más pesado de los cinco, sea cual sea el que elijas.

Qué pedir y dónde

Cuadrícula de resultadossencilloDocenas de pequeños mosaicos. Una sombra bajo cada uno se convierte en una masa gris en tamaño de miniatura, y la página se lee más calmada sin ellas.
Héroe de la página de detalles?mirroring=trueUn coche, grande, con espacio alrededor. Aquí es donde la sombra justifica su existencia y donde un vehículo flotante es más evidente.
Tablas de comparación?ground=trueVarios coches en fila a un tamaño intermedio. La sombra de contacto estrecha los mantiene sentados en la misma línea sin competir por la atención.
Campaña y página de aterrizaje?mirroring=trueUn vehículo que lleva la página. La reflexión se lee como un suelo de showroom y gana un poco de brillo gratis.
Sobre un panel de color?mirroring=cleanEl vehículo está sobre un color de marca o al lado de un titular. La reflexión se queda, la sombra de contacto se va, porque sobre una superficie de color una sombra se lee como una mancha.
Tu propia escena?transparency=trueCualquier cosa con su propio fondo: un tema oscuro, un color de marca, una fotografía de una carretera. Compónlo tú mismo y agrega tu propia sombra.

Antes de preguntar

¿Puedo tener una sombra y un fondo transparente?

No, y no es por una limitación. Una sombra se proyecta sobre una superficie. Elimina la superficie y no queda nada sobre lo que proyectar, por lo que una sombra flotando bajo un recorte sería una imagen de algo imposible. Pide transparencia y compón la tuya propia.

¿El recorte es un PNG?

Puede serlo, pero WebP con canal alfa es aproximadamente una quinta parte del tamaño y todos los navegadores en uso hoy en día lo leen. Pide PNG cuando algo a continuación lo exija, de lo contrario toma el archivo más pequeño.

¿Se mantienen los bordes en un fondo oscuro?

Ese es el caso que vale la pena probar, porque un recorte malo muestra un halo blanco a lo largo de la línea del techo en cuanto se coloca sobre algo oscuro. Estos se renderizan en lugar de enmascararse, por lo que no hay halo que eliminar.

¿Puedo obtener una sombra personalizada, más suave o más dura?

Los cuatro tratamientos de superficie son los que expone la API hoy en día. Si necesitas un aspecto particular para una campaña, dinos con qué tiene que estar junto y te diremos si es un parámetro o una conversación.

¿Algo de esto tiene un costo adicional?

No. Son parámetros en la misma solicitud, no productos separados. Lo que cambia es el tamaño del archivo, y el recorte es el más pesado de ellos porque el alfa no se comprime tan bien.

Prueba con tu lista más difícil

Elige la página con la que menos contento estás, envíanos los vehículos que hay en ella, y te devolvemos los mismos coches en cualquiera de los cinco tratamientos que le vayan bien. Luego pon las dos páginas una al lado de la otra.