IPX

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

export const imageConfig = {
  provider: 'ipx',
  domains: ['images.example.com'],
  providers: {
    ipx: ipxProvider({
      "path": "/_ipx"
    })
  }
} satisfies ImageConfig;

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

Image source

Use a path relative to a configured static directory, or an absolute URL from an allowed domain.

/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} height={500}
/>

Provider options

path

The optimizer route. Defaults to /_ipx; baseURL takes precedence when both are set.

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

Width and height become a single resize operation. Supports format, quality, fit, background, position, blur, crop, rotate, sharpen and the IPX operation names.

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

• Selected automatically outside supported hosting platforms. The Vite plugin serves IPX during development and preview only.
• Production needs an IPX server handler and the ipx dependency. Client provider options do not configure server storage or remote access.
• Set domains in both image configuration and the server handler for remote images. Static-directory paths must point to files available in the deployed server.

SvelteKit production handler

// npm install ipx
// src/hooks.server.ts
import { createDsImageHandle } from '@desource/image-svelte/server';

export const handle = createDsImageHandle({
  dirs: ['static'],
  domains: ['images.example.com']
});

SvelteKit development

// vite.config.ts
import { defineConfig } from 'vite';
import { sveltekit } from '@sveltejs/kit/vite';
import { desourceImage } from '@desource/image-svelte/vite';

export default defineConfig({
  plugins: [desourceImage({ dirs: ['static'] }), sveltekit()]
});