KeyCDN

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 { keycdnProvider } from '@desource/image/providers/keycdn';

export const imageConfig = {
  provider: 'keycdn',
  providers: {
    keycdn: keycdnProvider({
      "baseURL": "https://your-zone.kxcdn.com"
    })
  }
} satisfies ImageConfig;

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

Image source

Use a path served by the configured Zone, or a full delivery URL. Existing paths, query parameters, and fragments are preserved; explicit modifiers replace matching parameters.

/photo.jpg

Usage

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

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

  setDsImageConfig(imageConfig);
</script>

<DsImage
  src="/photo.jpg"
  alt="Sample image" width={800} height={500}
  modifiers={{
  "quality": 80,
  "format": "webp",
  "fit": "contain",
  "background": "#ffffff"
}}
/>

Provider options

baseURL

Your Zone URL or custom delivery domain. Optional when src is an absolute KeyCDN delivery URL.

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

Supports width, height, quality, format, fit, position, and background (mapped to bg). Fit values are cover, contain, fill, inside, and outside. Position supports top, right, bottom, and left; center clears the position parameter to use the service default. Native operations such as blur, crop, and enlarge can be passed as modifiers; boolean flags become 0 or 1.

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

• Enable Image Processing on the Pull or Push Zone. A Pull Zone must include query strings in its cache key; enabling Image Processing disables Ignore Query String automatically. Keep Cache Key Scheme disabled as documented by KeyCDN.
• Supported explicit formats are jpeg, jpg, png, and webp; jpg is sent as jpeg. Unsupported formats, including avif and auto, throw an error. Configure picture formats to use webp with a jpeg or png fallback.
• Quality applies to JPEG and WebP. Width and height must remain within the service limit of 10000 pixels, including responsive density variants.
• Background accepts hex with or without #, RGB/RGBA comma-separated values, or transparent. Three-digit hex colors are expanded to six digits.
• Secure Token signing is not generated by this adapter. Sign each final transformed URL on the server when the Zone requires it; an existing token does not automatically authorize new transformations.