How to Integrate IMAGIN.studio Car Images into Your Website (The Right Way)

No more 10,000+ static car photos. No more broken images. No more CDN nightmares.
Just one dynamic URL per car — perfect every time.

After building a 370-car leasing platform with IMAGIN.studio, I learned the real challenge isn’t the API — it’s mapping your messy data to their strict URL format.

This is the complete, battle-tested guide you won’t find in the docs.

What is IMAGIN.studio?

IMAGIN.studio = Dynamic car image CDN
You build a URL → They render a studio-quality 3D car image on demand.

https://cdn.imagin.studio/getImage
  ?customer=yourcompany
  &make=bmw
  &modelFamily=series-3
  &modelVariant=sw
  &powerTrain=hybrid
  &angle=203

No storage. No uploads. Infinite variants.

The Real Problem: Data ≠ IMAGIN

99% of integrations fail here.

Master the IMAGIN URL Parameters

Start simple: customer + make + modelFamily + angle=203
Add others only when needed.

The Body Style Code Map (Your Secret Weapon)

const BODY_STYLE_MAP = {
  // Sedans
  sedan: 'sa', saloon: 'sa',
  // Wagons
  'station wagon': 'sw', estate: 'sw', touring: 'sw', avant: 'sw', combi: 'sw',
  // Hatchbacks
  hatchback: 'ha',
  // Coupes
  coupe: 'co',
  // Convertibles
  convertible: 'od', cabriolet: 'od', cabrio: 'od',
  // SUVs
  suv: 'su', crossover: 'su'
};

The Ultimate URL Builder (JavaScript)

function buildImaginUrl(car, customerId = 'yourcompany') {
  const base = 'https://cdn.imagin.studio/getImage';
  
  // 1. Normalize make
  let make = car.brand?.toLowerCase().replace(/\s+/g, '-') || '';
  
  // 2. Extract model family (remove body style)
  let modelFamily = (car.model || '').toLowerCase();
  const bodyWords = /(touring|estate|avant|station wagon|combi|sedan|saloon|hatchback|coupe|cabrio|convertible|suv)/gi;
  modelFamily = modelFamily.replace(bodyWords, '').replace(/\s+/g, ' ').trim();
  modelFamily = modelFamily.replace(/\s+/g, '-');
  
  // 3. Brand-specific fixes
  let modelRange = '';
  if (make === 'bmw') {
    modelFamily = modelFamily
      .replace(/(\d+)\s*serie/i, 'series-$1')
      .replace(/series-(\d+)/, 'series-$1');
  }
  if (make === 'mini') {
    modelFamily = 'mini';
    modelRange = 'cooper';
  }
  if (make === 'smart') {
    modelFamily = (car.model || '').toLowerCase().replace('#', 'hashtag-').replace(/\s/g, '');
  }
  if (make === 'porsche' && modelFamily.includes('taycan')) {
    if ((car.model || '').toLowerCase().includes('sport turismo')) {
      modelRange = 'sport-turismo';
    }
  }
  
  // 4. Map body style
  let modelVariant = '';
  const body = (car.body_style || '').toLowerCase();
  for (const [key, code] of Object.entries(BODY_STYLE_MAP)) {
    if (body.includes(key)) {
      modelVariant = code;
      break;
    }
  }
  
  // 5. Map fuel
  let powerTrain = '';
  const fuel = (car.fuel_type || '').toLowerCase();
  if (fuel.includes('electric')) powerTrain = 'electric';
  else if (fuel.includes('hybrid')) powerTrain = 'hybrid';
  else if (fuel.includes('diesel')) powerTrain = 'diesel';
  else if (fuel.includes('petrol') || fuel.includes('benzine')) powerTrain = 'petrol';
  
  // 6. Build URL
  let url = `${base}?customer=${customerId}&make=${make}&modelFamily=${modelFamily}&angle=203&zoomLevel=1`;
  if (modelRange) url += `&modelRange=${modelRange}`;
  if (modelVariant) url += `&modelVariant=${modelVariant}`;
  if (powerTrain) url += `&powerTrain=${powerTrain}`;
  
  return url;
}

HubL Version (HubSpot CMS)

Brand-Specific Edge Cases

Performance & Reliability

<!-- Lazy load -->
<img src="" loading="lazy">

<!-- WebP fallback -->
<picture>
  <source srcset="&format=webp" type="image/webp">
  <img src="" alt="Car">
</picture>

<!-- Fallback image -->
<img src="" onerror="this.src='/images/placeholder-car.jpg'">

Debug Like a Pro

function debug(car) {
  console.group(car.brand + ' ' + car.model);
  console.log('URL:', buildImaginUrl(car));
  console.groupEnd();
}

Common Mistakes (Avoid These)

Final Checklist

• Normalize make & model
• Strip body style from modelFamily
• Map body style → modelVariant
• Handle brand quirks
• Add lazy loading
• Add fallback image
• Test 10 edge cases

Result?

• Zero image storage
• Perfect consistency
• Infinite variants
• Lightning fast

Your turn: Drop a comment with a car from your inventory — I’ll generate the exact IMAGIN URL for you.

Resources:
IMAGIN.studio Docs • HubL Guide

Want the full code as a downloadable module?
Say “Send module” — I’ll package it for HubSpot Marketplace.