Car Image API

Anwendungsfälle · Autovermietung

Fahrzeugbilder für Seiten von Mietwagenflotten

Zeigen Sie jede Mietwagenklasse auf dieselbe Weise: ein repräsentatives Modell pro Klasse, identischer Bildausschnitt mit Zuschnitt, Innenabstand und Einpassung, eine benannte Lackfarbe und URLs, die Sie cachen.

Eine Anleitung auf Grundlage des dokumentierten Verhaltens der API; sie nennt keinen Kunden. Veröffentlicht am .

Das Problem: Vermietet wird eine Klasse, kein bestimmtes Auto

Mietwagenkunden buchen eine Fahrzeugklasse – Kompaktwagen, Mittelklasse-SUV, Minivan – und fahren mit dem Wagen dieser Klasse los, der gerade auf dem Hof steht. Die Buchungsseite braucht trotzdem für jede Klasse ein Bild, und üblich ist ein repräsentatives Modell mit dem Zusatz „oder ähnlich“.

Diese Bilder stammen meist von dort, wo sich gerade eines finden ließ: hier ein Pressefoto, dort ein Händlerfoto, unterschiedliche Blickwinkel, unterschiedliche Hintergründe, Autos, die ihre Karten unterschiedlich ausfüllen. Ein so zusammengestelltes Raster wirkt zusammengestückelt. Eine Flottenseite braucht das Gegenteil: jede Klasse auf dieselbe Weise dargestellt, sodass sich von Karte zu Karte nur das Auto ändert.

So sieht die Integration aus

  • Ein repräsentatives Modell pro Klasse, gespeichert als Fahrzeug-ID aus dem Katalog, mit „oder ähnlich“ in der Beschriftung und niemals im Bild.
  • Ein einheitliches Request-Format für jede Karte: dieselbe Ansicht, Box, Einpassung, Zuschnitt, Innenabstand, Lackfarbe, Hintergrund und dasselbe Format.
  • Höchstens zwei Bilder pro Klasse: die Karte im Raster und das Hero-Bild auf der Klassenseite.
  • Gecacht, weil das Raster für alle Besucher gleich ist: Dateien auf Ihrem CDN oder signierte URLs, die einmal erstellt und wiederverwendet werden.

Schritt 1: ein repräsentatives Modell pro Klasse wählen, per ID

Wählen Sie das Modell, unter dem jede Klasse angeboten wird, und ermitteln Sie sein aktuelles Modelljahr. GET /api/v1/vehicles?make=&model= ist kostenlos und öffentlich und listet jedes Jahr eines Modells auf, jeweils mit der stabilen Fahrzeug-ID, die Sie speichern; POST /api/v1/images/resolve macht dasselbe anhand einer Phrase wie „2026 toyota rav4“.

Die ID eines Modelljahrs
# one model's years, each with its vehicle id (free, public)
curl -s "https://carimage.dev/api/v1/vehicles?make=toyota&model=rav4" | jq -c '.data.vehicles[] | select(.year == 2026)'
# {"year":2026,"id":"veh_e5w75c93f6cvk"}
fleet.ts
// One representative model per class: its current model year, by catalog id.
// "or similar" lives in the label; the picture never promises the car on the lot.
export const CLASS_IMAGES = {
  compact:        { vehicle: "veh_fy7r2yvwt4p1v", label: "Toyota Corolla or similar" },    // 2026 Toyota Corolla
  "midsize-suv":  { vehicle: "veh_e5w75c93f6cvk", label: "Toyota RAV4 or similar" },       // 2026 Toyota RAV4
  "fullsize-suv": { vehicle: "veh_9mzh9ejqjye43", label: "Chevrolet Tahoe or similar" },   // 2026 Chevrolet Tahoe
  minivan:        { vehicle: "veh_9jck7rrybf35p", label: "Chrysler Pacifica or similar" }, // 2026 Chrysler Pacifica
};

Die IDs ändern sich nie, daher ist diese Zuordnung die einzige Stelle, die eine Flottenänderung betrifft: Wenn die Mittelklasse zu einem anderen Modell oder zum nächsten Modelljahr wechselt, ersetzen Sie eine ID, und jede Karte, jedes Hero-Bild und jede E-Mail, die die Zuordnung liest, zieht nach.

Schritt 2: ein Anfrageformat für alle Klassen

Die 8 Kameraansichten sind für jedes Fahrzeug im Katalog identisch gerahmt – deshalb fügt sich ein Raster sauber zusammen. Der Rest der Karte besteht aus einer Handvoll Parametern, die einmal festgelegt werden:

  • view=side für die Karten: Jedes Auto zeigt in dieselbe Richtung und steht auf derselben Grundlinie. Zu jedem linksseitigen Winkel gibt es ein -right-Gegenstück (side-right), sodass die Karten ins Layout hinein ausgerichtet werden können. Die Klassenseite verwendet front-3-4, den Hero-Winkel.
  • w=640&h=320&fit=contain: genau 640×320 für jede Klasse, das ganze Fahrzeug sichtbar. X-Image-Width und X-Image-Height in der Antwort bestätigen die Bildfläche.
  • trim=1&padding=6: Das Bild wird vor dem Einpassen auf das Auto zugeschnitten, mit 6 % seiner längeren Seite als Rand. So füllen ein Corolla und ein Tahoe ihre Karten gleich aus, statt im quadratischen Ausgangsbild zu schweben.
  • background=f4f4f4 setzt die Karte direkt auf das Grau der Übersicht. Lassen Sie den Parameter weg, um den transparenten Hintergrund zu behalten und die Farbe der Karte durchscheinen zu lassen.
  • format=webp für gespeicherte Dateien; format=auto bei signierten URLs, das jedem Browser WebP oder PNG ausliefert.
Eine Karte und ein Hero-Bild für eine Klasse
# the class card: the same box, view, crop, paint and backdrop for every class
curl --fail-with-body -H "Authorization: Bearer $CAR_IMAGE_API_KEY" \
  "https://carimage.dev/api/v1/images/car?vehicle=veh_e5w75c93f6cvk&view=side&color=white&w=640&h=320&fit=contain&trim=1&padding=6&background=f4f4f4&format=webp" \
  -o midsize-suv-card.webp

# the class page's hero: the three-quarter view, the full width the API delivers
curl --fail-with-body -H "Authorization: Bearer $CAR_IMAGE_API_KEY" \
  "https://carimage.dev/api/v1/images/car?vehicle=veh_e5w75c93f6cvk&view=front-3-4&color=white&w=1024&format=webp" \
  -o midsize-suv-hero.webp

Schritt 3: eine benannte Lackfarbe für das ganze Raster

Die 15 Presets sind benannte Lackfarben: white, black, gray, silver, blue, red, green, brown, beige, tan, orange, yellow, gold, burgundy, purple. Standard ist silver, und grey wird als gray gelesen. Wählen Sie eine für alle Klassen, damit die Karten als Set wirken; oben ist white zu sehen. Jedes Preset behält sein eigenes Lackmuster statt der gleichnamigen CSS-Farbe (red ist #b3151b), und jede Lackfarbe, auch ein Hex-Wert, ist eine Umfärbung eines neutralen Renderings und kostet daher gleich viel: 1 Credit.

Schritt 4: die Dateien oder die URLs cachen

Das Klassenraster ist für jeden Besucher identisch und sollte daher pro Besuch so gut wie nichts kosten. Dafür gibt es zwei Wege:

  • Speichern Sie die Dateien. Rufen Sie jede Karte und jedes Hero-Bild einmal mit GET /api/v1/images/car ab und liefern Sie sie wie jedes andere Asset über Ihr CDN aus; ein kostenpflichtiger Tarif erlaubt Kopien auf Ihren eigenen Servern, um Ihr Produkt zu bedienen, und diese behalten ihre Lizenz auch nach dessen Ende. Bewahren Sie das ETag jeder Datei auf: Eine nächtliche erneute Prüfung mit If-None-Match liefert 304 und kostet nichts. Für die obige Flotte sind das 8 Credits, einmalig.
  • Oder erstellen Sie signierte URLs einmal und verwenden Sie sie wieder. POST /api/v1/image-urls nimmt bis zu 50 Bilder pro Aufruf entgegen und liefert URLs ohne Schlüssel, die bis zu 7 Tage gültig sind. Eine URL mit unbegrenzter Nutzung ist innerhalb ihrer Gültigkeitsdauer öffentlich cachebar; wenn also jeder Besucher dieselbe URL lädt, kommen wiederholte Abrufe kostenlos aus dem CDN. Fügen Sie renew: true hinzu, und eine gespeicherte URL funktioniert auch nach Ablauf ihrer Gültigkeitsdauer weiter, für 1 Credit pro Bild für jede weitere Woche, in der sie geladen wird: höchstens 8 Credits pro Woche für die oben genannte Flotte.

Beschränken Sie den Key, der die URLs erzeugt, im Dashboard auf Ihre Buchungsdomain, dann antwortet eine auf eine andere Website kopierte URL mit 403.

Die URLs der Fahrzeugübersicht, einmalig mit dem TypeScript SDK erzeugt
import { CarImageClient, type ImageParams } from "@meterapp/car-image-sdk";
import { CLASS_IMAGES } from "./fleet";

const client = new CarImageClient({ apiKey: process.env.CAR_IMAGE_API_KEY });

// Framed once, for every class.
const card = (vehicle: string): ImageParams => ({
  vehicle, view: "side", color: "white", width: 640, height: 320,
  fit: "contain", trim: true, padding: 6, background: "#f4f4f4", format: "auto",
});
const hero = (vehicle: string): ImageParams => ({ vehicle, view: "front-3-4", color: "white", width: 1024, format: "auto" });

// Every visitor sees the same grid: mint the URLs once and serve the stored ones.
// renew keeps each URL working past its 7-day lifetime, one credit per image
// for each further week in which it is loaded.
const classes = Object.entries(CLASS_IMAGES);
const { data } = await client.createImageUrls(
  classes.flatMap(([, entry]) => [card(entry.vehicle), hero(entry.vehicle)]),
  { ttlSeconds: 604800, renew: true, idempotencyKey: "class-grid-2026-10" }
);
await saveClassImages(
  classes.map(([key], index) => ({ key, card: data[2 * index].url, hero: data[2 * index + 1].url, renewsUntil: data[2 * index].renews_until }))
);

Schritt 5: die Buchungsbestätigung

Die Bestätigungs-E-Mail zeigt die gebuchte Klasse, und E-Mails werden geöffnet, wann immer der Mieter dazu kommt. Erstellen Sie ihr Bild als sich erneuernde URL: ttl_seconds auf dem Maximum von 7 Tagen, renew: true und renew_days bis über das Rückgabedatum hinaus. Wochen, in denen niemand die E-Mail öffnet, kosten nichts, und nach der Miete erneuert sich die URL nicht mehr. Ein Idempotency-Key pro Buchung sorgt dafür, dass ein wiederholter Versand die erste URL erneut liefert, statt eine zweite zu erstellen, und wenn Sie die URL bei der Buchung speichern, kann jeder spätere erneute Versand sie wiederverwenden. Unsere eigenen Lifecycle-E-Mails funktionieren genauso; die E-Mail-Story beschreibt den Mechanismus und das HTML.

Eine sich verlängernde URL für eine Buchungsbestätigung
// The booking confirmation: opened today, again at the counter, maybe never.
const { data: [classImage] } = await client.createImageUrls(card(booking.classVehicle), {
  ttlSeconds: 604800,
  renew: true,
  // A week past the return date, and no renewals after it (365 days at most).
  renewDays: Math.min(daysUntil(booking.returnDate) + 7, 365),
  // A retried send replays the first URL instead of minting a second one.
  idempotencyKey: `booking:${booking.id}:class`,
});
booking.classImageUrl = classImage.url; // later resends reuse it

CLI, SDK und MCP

  • CLI: npx @meterapp/car-image get --vehicle veh_… --view side --width 640 --height 320 --fit contain --trim --padding 6 --out card.webp schreibt eine Karte in eine Datei; car-image url --batch classes.json --renew erzeugt einen Stapel URLs.
  • SDK: client.vehicles({ make, model }) für die IDs, client.getImage(…) für Dateien, client.createImageUrls(…) für URLs.
  • MCP: Mit resolve_vehicle und create_car_image_urls kann ein Assistent eine Klassenkarte aus „Mittelklasse-SUV, RAV4 oder ähnlich“ entwerfen. Die Einrichtung finden Sie auf der MCP-Seite.

Häufig gestellte Fragen

Kann die Karte genau das Auto zeigen, das der Mieter bekommt?
Nein, und das sollte auch nicht versucht werden. Eine Klasse wird als „oder ähnlich“ vermietet, und ein Rendering zeigt eine Marke, ein Modell und ein Baujahr aus dem Katalog, nicht ein Auto auf Ihrem Hof. Zeigen Sie ein repräsentatives Modell mit „oder ähnlich“ in der Beschriftung. Sobald am Schalter ein bestimmtes Auto zugewiesen ist, lässt sich seine VIN kostenlos zum Katalogfahrzeug dekodieren, falls Sie stattdessen dieses Modell zeigen möchten.
Warum sind die Autos im Raster nicht maßstabsgetreu?
Weil trim jedes Rendering auf das Auto zuschneidet und fit=contain die Karte damit ausfüllt, füllen ein kompaktes und ein großes SUV ihre Karten gleich aus. So bleibt ein Raster aufgeräumt. Nennen Sie die Größe in Worten: Klassenname, Sitzplätze und Gepäckstücke.
Was kostet das Klassenraster?
Eine Flotte von 4 Klassen mit je einer Karte und einem Hero-Bild kostet 8 Credits. Speichern Sie die Dateien auf Ihrem CDN, dann ist das die gesamte Rechnung, inklusive kostenloser erneuter Prüfungen per ETag. Liefern Sie stattdessen sich erneuernde signierte URLs aus, sind es höchstens 8 Credits pro Woche, und nur für die Wochen, in denen die Seiten aufgerufen werden.
Welche Lackfarbe sollte die Fahrzeugübersicht verwenden?
Ein Preset für jede Klasse, damit die Karten als Einheit wirken. Die 15 Presets sind white, black, gray, silver, blue, red, green, brown, beige, tan, orange, yellow, gold, burgundy, purple, Standard ist silver; jeder Hex-Wert funktioniert ebenfalls, zum gleichen Preis. Der Mieter bekommt die Farbe, die auf dem Hof steht – eine bestimmte Farbe hat die Karte nie versprochen.
Was, wenn das Modell einer Klasse nicht im Katalog ist?
Ein nicht vorhandenes Fahrzeug liefert 404 mit Vorschlägen: die ähnlichsten Fahrzeuge im Katalog, jeweils mit ihrer ID. Verwenden Sie eines davon oder wünschen Sie sich das Fahrzeug auf dem öffentlichen Anfrageboard. Der Katalog ist Open Source.

Weiterlesen

Kundenstory · EntwicklertoolsSo betten Sie Fahrzeugbilder in E-Mails ein – mit signierten URLs, die nie ins Leere laufenUnsere eigenen Lifecycle-E-Mails betten das exakte erste Rendering jedes Kunden als live signierte URL ein, die sich ein Jahr lang selbst verlängert. So funktioniert das, und so können Sie es nachbauen.