Integrate our Vehicle Imagery API with just a few lines of code. We guide you through setup with practical examples.
This guide helps you integrate the Vehicle Imagery API from zero to production. You will create an API key, make your first requests and wire images into a modern frontend with best‑practice performance defaults.
1) Create an account and API key: In the dashboard, generate a secret key scoped to read images. Store it securely (server‑side env var). For local development, use .env.local and never commit secrets.
2) First request: Start with a simple, canonical image. Example using fetch in Node: request a front three‑quarter view for a make/model/year combination, specifying width and format preferences. Handle 4xx/5xx gracefully and implement exponential backoff on transient failures.
3) Frontend integration: With Next.js, prefer the next/image component for automatic responsive variants. Set explicit sizes for your layout, add a blur placeholder, and prioritize the hero image when it is your LCP element. Keep alt text descriptive, e.g., “2023 Audi A5 front three‑quarter, glacier white”.
4) Caching and CDN: Put a CDN in front of your app and let image URLs be cacheable for long periods using content hashes. On the server, cache API responses with a reasonable TTL. For dynamic user‑specific content, use conditional requests (ETag) to limit bandwidth.
5) Error handling and fallbacks: If a specific trim or angle is unavailable, provide a fallback angle or a generic stock image so the UI never collapses. Log misses to improve coverage.
6) Observability and budgets: Track Core Web Vitals and image transfer sizes in RUM. Define a performance budget (e.g., hero image ≤ 200 kB on 3G) and enforce it in CI.
By following these steps, most teams ship a first integration in hours, not weeks. The result is a fast, reliable image pipeline that scales from prototype to production without rewrites.