Vercel

Setup

Install the framework package and the core package for the provider import:

npm install @desource/image @desource/image-svelte

Save this as image.config.ts beside your example component. Replace sample domains and identifiers with your own.

import type { ImageConfig } from '@desource/image';
import { vercelProvider } from '@desource/image/providers/vercel';

export const imageConfig = {
  provider: 'vercel',
  domains: ['images.example.com'],
  screens: { card: 800, card2x: 1600 },
  providers: {
    vercel: vercelProvider({
      "path": "/_vercel/image",
      "defaultQuality": 80
    })
  }
} satisfies ImageConfig;

Registering this provider makes it the default for the configured components. To mix services, register each provider and set provider="vercel" on the image that should use this one.

Image source

Use a deployment-relative asset path or an allowed absolute remote image URL.

/img/hero.jpg

Usage

The example uses the shared configuration above and the Svelte image component.

<script lang="ts">
  import { Image, setImageConfig } from '@desource/image-svelte';
  import { imageConfig } from './image.config';

  setImageConfig(imageConfig);
</script>

<Image
  src="/img/hero.jpg"
  alt="Sample image" width={800}
  modifiers={{
  "quality": 80
}}
/>

Provider options

path

Optimizer endpoint. baseURL overrides this alias.

defaultQuality

Fallback quality for requests without a quality modifier; the adapter otherwise uses 100.

Pass shared defaults such as screens, domains, aliases and presets to the image configuration. Pass provider-specific defaults as modifiers in the provider factory.

Modifiers

The adapter emits url, w and q. Height, fit and explicit format are not sent; output formats are configured on the hosting platform.

Set dimensions on the component and pass service-specific operations through modifiers, as shown above. See the provider source for exact mappings and the service documentation for accepted values.

Provider notes

• Auto-detected on Vercel. The deployed project still needs image settings in its Build Output API configuration.
• Widths are matched against image.screens, rounded up to the next configured width, or capped at the largest. Match these values and density candidates to the deployment sizes.
• Remote hosts must be allowed in both the library source policy and deployment image configuration. Cache TTL and allowed formats belong to the deployment adapter.

SvelteKit deployment settings

// svelte.config.js
import adapter from '@sveltejs/adapter-vercel';

export default {
  kit: {
    adapter: adapter({
      images: {
        sizes: [640, 768, 800, 1024, 1280, 1536, 1600],
        domains: ['images.example.com'],
        formats: ['image/avif', 'image/webp'],
        minimumCacheTTL: 3600
      }
    })
  }
};