### Initial Development Setup Commands

Source: https://github.com/desource-labs/image/blob/main/CONTRIBUTING.md

Install dependencies and run the required build, typecheck, and unit tests before starting development. Requires Node.js 22.18+ and pnpm 10.33+.

```sh
pnpm install
pnpm build:all
pnpm typecheck
pnpm test:unit
```

--------------------------------

### Start the demo site

Source: https://github.com/desource-labs/image/blob/main/README.md

Prepare the development environment and start the demo site.

```sh
pnpm dev:prepare
pnpm dev:demo
```

--------------------------------

### Install @desource/image-react

Source: https://github.com/desource-labs/image/blob/main/packages/react/README.md

Primary installation command for the package.

```sh
npm install @desource/image-react
```

--------------------------------

### Install ipx for local transformations

Source: https://github.com/desource-labs/image/blob/main/packages/react/README.md

Optional installation for the ipx optimizer, required only when serving local `/_ipx` transformations.

```sh
npm install ipx
```

--------------------------------

### Install @desource/image

Source: https://github.com/desource-labs/image/blob/main/packages/core/README.md

Install the core package with npm.

```sh
npm install @desource/image
```

--------------------------------

### Install @desource/image-svelte

Source: https://github.com/desource-labs/image/blob/main/packages/svelte/README.md

Install the @desource/image-svelte package as a dependency.

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

--------------------------------

### Quick start: createImage and helper methods

Source: https://github.com/desource-labs/image/blob/main/packages/core/README.md

Creates an image helper with quality, screens, and presets. Shows how to generate a URL, attributes, picture data, and use a preset shortcut.

```ts
import { createImage } from '@desource/image';

const image = createImage({
  quality: 76,
  screens: {
    sm: 640,
    md: 768,
    lg: 1024
  },
  presets: {
    avatar: {
      width: 96,
      height: 96,
      fit: 'cover',
      format: 'webp'
    }
  }
});

const url = image('/img/hero.jpg', {
  width: 800,
  format: 'webp'
});

const attrs = image.getAttrs({
  src: '/img/hero.jpg',
  alt: 'Mountain lake',
  width: 1600,
  height: 1000,
  sizes: '100vw md:760px',
  placeholder: true
});

const picture = image.getPicture({
  src: '/img/hero.jpg',
  alt: 'Mountain lake',
  width: 1600,
  height: 1000,
  formats: ['avif', 'webp'],
  fallbackFormat: 'jpg'
});

const avatarUrl = image.avatar('/people/ada.jpg');
```

--------------------------------

### Install and validate the project

Source: https://github.com/desource-labs/image/blob/main/README.md

Install dependencies and run the full development validation suite: build, type checking, unit tests with coverage, end-to-end tests, and package validation.

```sh
pnpm install
pnpm build
pnpm typecheck
pnpm test:unit:coverage
pnpm test:e2e
pnpm validate:packages
```

--------------------------------

### Install @desource/image-angular and optional ipx

Source: https://github.com/desource-labs/image/blob/main/packages/angular/README.md

Install the Angular package. Install ipx only when the app serves local /_ipx transformations itself; hosted providers such as Vercel, Netlify, Cloudinary, Imgix, Sanity, or ImageKit do not need the local optimizer.

```sh
npm install @desource/image-angular
```

```sh
npm install ipx
```

--------------------------------

### Install @desource/image-angular

Source: https://github.com/desource-labs/image/blob/main/README.md

Install the Angular package for the @desource/image library.

```sh
npm install @desource/image-angular
```

--------------------------------

### Run Package Demos and Root Dev App

Source: https://github.com/desource-labs/image/blob/main/CONTRIBUTING.md

Start the SvelteKit documentation app and package demos for Angular, React, and Svelte. Use the package demos for focused development and the root app for documentation and integration work.

```sh
pnpm --filter @desource/image-angular dev
pnpm --filter @desource/image-react dev
pnpm --filter @desource/image-svelte dev
pnpm dev:demo
```

--------------------------------

### Quick start using DsImage and DsPicture

Source: https://github.com/desource-labs/image/blob/main/packages/react/README.md

Imports and renders the two components with attributes such as src, alt, width, preload, and formats.

```tsx
import { DsImage, DsPicture } from '@desource/image-react';

export function Gallery() {
  return (
    <>
      <DsImage
        src="/img/hero.jpg"
        alt="Mountain lake at sunrise"
        width={1600}
        height={1000}
        sizes="100vw md:760px"
        format="webp"
        quality={76}
        placeholder
        preload={{ fetchPriority: 'high' }}
        className="hero"
      />

      <DsPicture
        src="/img/card.jpg"
        alt="Cabin under the stars"
        width={960}
        height={640}
        formats={['avif', 'webp']}
        fallbackFormat="jpg"
        imgAttrs={{ className: 'card-image' }}
      />
    </>
  );
}
```

--------------------------------

### IPX URL format example

Source: https://github.com/desource-labs/image/blob/main/README.md

Example IPX URL format generated by the IPX provider. URL generation does not transform bytes; the application must expose an optimizer route when using local IPX URLs.

```text
/_ipx/w_800&f_webp&q_76/img/hero.jpg
```

--------------------------------

### SvelteKit production IPX server hook with createDsImageHandle

Source: https://github.com/desource-labs/image/blob/main/packages/svelte/README.md

Install ipx as a production dependency and add this server hook for SvelteKit with production IPX. createDsImageWebHandler() is available for other Fetch API servers, and createDsImageNodeMiddleware() for Connect/Express-style Node servers. All IPX adapters load the optimizer lazily and only handle requests under the configured path. Remote optimization is denied by default; add trusted domains or set allowAllDomains: true only for an intentionally public optimizer.

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

export const handle = createDsImageHandle({
  dirs: ['static'],
  domains: ['images.example.com'],
  maxAge: 60 * 60 * 24 * 30
});
```

--------------------------------

### Hooks for native markup: useDsImageProps and useDsPictureProps

Source: https://github.com/desource-labs/image/blob/main/packages/react/README.md

Example of using the hooks to generate props for native <img> and <picture> elements. The hooks handle placeholder preload/decode state, load/error forwarding, and head preload links with reference counting.

```tsx
import { useDsImageProps, useDsPictureProps } from '@desource/image-react';

function NativeImage() {
  const img = useDsImageProps({
    src: '/img/card.jpg',
    alt: 'A coastal village',
    width: 720,
    height: 480,
    placeholder: true,
    className: 'card-image'
  });

  return <img {...img} />;
}

function NativePicture() {
  const picture = useDsPictureProps({
    src: '/img/card.jpg',
    alt: 'A coastal village at sunset',
    width: 720,
    height: 480,
    formats: ['avif', 'webp'],
    fallbackFormat: 'jpg',
    imgAttrs: { className: 'card-image' }
  });

  return (
    <picture {...picture.pictureProps}>
      {picture.sources.map((source) => (
        <source key={`${source.type}:${source.srcSet}`} {...source} />
      ))}
      <img {...picture.imgProps} />
    </picture>
  );
}
```

--------------------------------

### Define ImageConfig with cloudinary provider

Source: https://github.com/desource-labs/image/blob/main/packages/core/README.md

Configuration example for an `ImageConfig` object using the Cloudinary provider, setting base URL, quality, format, screens, densities, allowed domains, local and remote patterns, presets, provider options, and invalid-source policy.

```TypeScript
import type { ImageConfig } from '@desource/image';
import { cloudinaryProvider } from '@desource/image/providers/cloudinary';

export const config: ImageConfig = {
  provider: 'cloudinary',
  baseURL: '/',
  quality: 76,
  format: 'webp',
  screens: {
    sm: 640,
    md: 768,
    lg: 1024,
    xl: 1280
  },
  densities: [1, 2],
  providerSizes: [320, 480, 640, 768, 1024, 1280, 1536],
  aliases: {
    media: 'https://assets.example.com'
  },
  domains: ['assets.example.com'],
  localPatterns: [{ pathname: '/img/**' }],
  remotePatterns: [{ protocol: 'https', hostname: '*.example.com', pathname: '/media/**' }],
  presets: {
    card: {
      width: 960,
      height: 640,
      sizes: '100vw md:480px',
      format: 'webp'
    }
  },
  providers: {
    cloudinary: cloudinaryProvider({ cloudName: 'demo' })
  },
  providerOptions: {
    cloudinary: {
      modifiers: { quality: 'auto' }
    }
  },
  onInvalidSource: 'warn'
};
```

--------------------------------

### Responsive images with placeholders and preloads

Source: https://github.com/desource-labs/image/blob/main/packages/svelte/README.md

Responsive images with placeholders and preloads. `sizes` accepts breakpoint strings such as `100vw sm:50vw lg:600px` or a record. `densities` accepts strings, numbers, or arrays. Candidate widths are deduplicated and normalized for the selected provider. A boolean placeholder generates a small transformed image; a tuple controls width, height, quality, and blur; the full image replaces the placeholder only after decode succeeds. `placeholderClass` is present only while the placeholder is visible. `preload` inserts a responsive `<link rel="preload" as="image">` into the head and reference-counts duplicate links. `priority` sets eager loading and high fetch priority. Use `preload` when a head link is also required. SSR and initial hydration output are deterministic.

```svelte
<DsImage src="/img/hero.jpg" alt="Hero" width={1200} placeholder placeholderClass="blur" />
<DsImage src="/img/hero.jpg" alt="Hero" width={1200} placeholder={[48, 32, 25, 8]} />
<DsImage src="/img/hero.jpg" alt="Hero" width={1200} placeholder="data:image/png;base64,..." />
```

--------------------------------

### DsPicture component usage

Source: https://github.com/desource-labs/image/blob/main/packages/react/README.md

Example of using the DsPicture component to render a native <picture> with ordered <source> elements and a fallback <img>. Supports comma-separated format, array format, and legacyFormat alias.

```tsx
import { DsPicture } from '@desource/image-react';

export function ResponsiveHero() {
  return (
    <DsPicture
      src="/img/hero.jpg"
      alt="Responsive mountain landscape"
      width={1600}
      height={900}
      sizes="100vw md:50vw lg:800px"
      formats={['avif', 'webp']}
      fallbackFormat="jpg"
      className="hero-frame"
      imgAttrs={{ className: 'hero' }}
    />
  );
}
```

--------------------------------

### Next.js: Use DsImage directly

Source: https://github.com/desource-labs/image/blob/main/packages/react/README.md

The main package entry is a client entry because placeholders and head preloads use browser lifecycle APIs. Use the `'use client'` directive.

```tsx
'use client';

import { DsImage } from '@desource/image-react';

export function ProductImage() {
  return <DsImage src="/products/chair.jpg" alt="Oak chair" width={1200} height={900} format="webp" />;
}
```

--------------------------------

### Configure @sveltejs/adapter-vercel for native images

Source: https://github.com/desource-labs/image/blob/main/packages/svelte/README.md

Configure the Vercel adapter with image settings for the Build Output API. When built on Vercel, automatic detection emits /_vercel/image URLs. Keep adapter image sizes and allowed remote domains aligned with the application configuration.

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

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

--------------------------------

### DsImage component usage

Source: https://github.com/desource-labs/image/blob/main/packages/react/README.md

Example of using the DsImage component with required alt prop and various supported props like className, style, crossOrigin, fetchPriority, referrerPolicy, onLoad, and onError. Lowercase aliases fetchpriority and crossorigin are also accepted.

```tsx
import { DsImage } from '@desource/image-react';

export function Hero() {
  return (
    <DsImage
      src="/img/hero.jpg"
      alt="Aurora above a mountain lake"
      width={1600}
      height={900}
      sizes="100vw md:50vw lg:800px"
      format="webp"
      quality={82}
      placeholder
      preload={{ fetchPriority: 'high' }}
      className="hero"
      onLoad={() => console.log('loaded')}
    />
  );
}
```

--------------------------------

### Run the full release gate

Source: https://github.com/desource-labs/image/blob/main/README.md

Run the full release gate, which includes formatting, linting, Changesets status, peer checks, production audit, package builds, demo builds, type checks, package metadata validation, unit coverage, and e2e tests.

```sh
pnpm check:release
```

--------------------------------

### Configure DeSource Image with Cloudinary provider

Source: https://github.com/desource-labs/image/blob/main/README.md

Optional configuration for DeSource Image. With no explicit provider, `provider: 'auto'` uses deployment detection and falls back to IPX. Provider setup is memoized; framework packages resolve config once per Angular injector, React provider config object, or Svelte config object.

```ts
import { cloudinaryProvider } from '@desource/image/providers/cloudinary';

export const imageConfig = {
  provider: 'cloudinary',
  quality: 76,
  screens: {
    sm: 640,
    md: 768,
    lg: 1024,
    xl: 1280
  },
  densities: [1, 2],
  aliases: {
    media: 'https://assets.example.com'
  },
  domains: ['assets.example.com'],
  localPatterns: [{ pathname: '/img/**' }],
  remotePatterns: [{ protocol: 'https', hostname: '*.example.com', pathname: '/media/**' }],
  presets: {
    card: {
      width: 960,
      height: 640,
      sizes: '100vw md:480px',
      format: 'webp'
    }
  },
  providers: {
    cloudinary: cloudinaryProvider({ cloudName: 'demo' })
  },
  onInvalidSource: 'warn'
} as const;
```

--------------------------------

### Import helpers from @desource/image/kit

Source: https://github.com/desource-labs/image/blob/main/packages/core/README.md

Imports helper functions isResolvedImageConfig, mergeClassNames, normalizeCrossorigin, stripUndefined, and styleWithPlaceholder. Used for framework glue; Provider URL logic stays in the main package.

```ts
import {
  isResolvedImageConfig,
  mergeClassNames,
  normalizeCrossorigin,
  stripUndefined,
  styleWithPlaceholder
} from '@desource/image/kit';
```

--------------------------------

### Import and use stateless image helpers

Source: https://github.com/desource-labs/image/blob/main/packages/core/README.md

Shows usage of the stateless helpers `getImageAttrs`, `getImagePreloadLink`, `getImageSizes`, and `getPictureAttrs` from the '@desource/image' package to build image attributes directly. Requires the `@desource/image` package.

```TypeScript
import { getImageAttrs, getImagePreloadLink, getImageSizes, getPictureAttrs } from '@desource/image';

const attrs = getImageAttrs({
  src: '/img/hero.jpg',
  alt: 'Mountain lake',
  width: 1600,
  height: 1000,
  sizes: '100vw md:760px',
  format: 'webp',
  quality: 76
});
```

--------------------------------

### Pre-Pull Request Quality Checks

Source: https://github.com/desource-labs/image/blob/main/CONTRIBUTING.md

Run this full suite before submitting a pull request. Includes linting, formatting checks, type checking, builds, tests, and package validation.

```sh
pnpm lint
pnpm format:check
pnpm typecheck
pnpm build
pnpm build:fixtures
pnpm build:demo
pnpm test:unit
pnpm test:e2e
pnpm validate:packages
```

--------------------------------

### Repository Structure Overview

Source: https://github.com/desource-labs/image/blob/main/CONTRIBUTING.md

Displays the high-level directory layout of the monorepo, describing the purpose of each package and folder.

```text
packages/core       Framework-agnostic runtime, kit utilities, and providers
packages/angular    Angular components, directives, SSR adapter, tests, and fixture
packages/react      React components, hooks, Next/Vite adapters, tests, and fixture
packages/svelte     Svelte components, action, attachment, Vite adapter, tests, and fixture
common/test         Shared behavioral contracts and browser-test helpers
demo                SSR SvelteKit documentation and interactive examples
scripts             Coverage and release automation
```

--------------------------------

### Release Steps and Verification

Source: https://github.com/desource-labs/image/blob/main/CONTRIBUTING.md

Commands used by maintainers to version, check, and prepublish the release. A release PR is titled 'chore: Release packages'.

```sh
pnpm changeset:version
pnpm check:release
```

--------------------------------

### Import provider subpaths

Source: https://github.com/desource-labs/image/blob/main/packages/core/README.md

Shows how to import individual providers from their subpaths for application code. This avoids loading all provider modules.

```ts
import { cloudinaryProvider } from '@desource/image/providers/cloudinary';
import { imgixProvider } from '@desource/image/providers/imgix';
import { sanityProvider } from '@desource/image/providers/sanity';
```

--------------------------------

### Callable image helper with useDsImage

Source: https://github.com/desource-labs/image/blob/main/packages/svelte/README.md

Use the callable image helper to generate an optimized image URL. The helper exposes getImage, getSizes, getMeta, getAttrs, getPicture, getPreloadLink, and configured preset shortcuts.

```svelte
<script lang="ts">
  import { useDsImage } from '@desource/image-svelte';

  const $img = useDsImage();
  const hero = $img('/img/hero.jpg', { width: 800, format: 'webp', quality: 75 });
</script>
```

--------------------------------

### Configure Cloudinary provider and preset with setDsImageConfig

Source: https://github.com/desource-labs/image/blob/main/packages/svelte/README.md

Register a Cloudinary provider and define an 'avatar' preset in the shared configuration, then use the preset with the DsImage component. Provider modules and custom-provider utilities are documented in @desource/image.

```svelte
<script lang="ts">
  import { cloudinaryProvider } from '@desource/image/providers/cloudinary';
  import { setDsImageConfig } from '@desource/image-svelte';

  setDsImageConfig({
    provider: 'cloudinary',
    providers: {
      cloudinary: cloudinaryProvider({ cloudName: 'demo' })
    },
    presets: {
      avatar: { width: 96, height: 96, fit: 'cover', quality: 80 }
    }
  });
</script>
```

```svelte
<DsImage preset="avatar" src="/users/ada.jpg" alt="Ada" />
```

--------------------------------

### SvelteKit usage of DsImage and DsPicture

Source: https://github.com/desource-labs/image/blob/main/README.md

Shows how to use DsImage and DsPicture components in a Svelte component. Demonstrates props similar to React, with script tag for imports.

```svelte
<script lang="ts">
  import { DsImage, DsPicture } from '@desource/image-svelte';
</script>

<DsImage
  src="/img/hero.jpg"
  alt="Mountain lake at sunrise"
  width={1600}
  height={1000}
  sizes="100vw md:760px"
  format="webp"
  quality={76}
  placeholder
  preload={{ fetchPriority: 'high' }}
/>

<DsPicture
  src="/img/card.jpg"
  alt="Cabin under the stars"
  width={960}
  height={640}
  formats={['avif', 'webp']}
  fallbackFormat="jpg"
/>
```

--------------------------------

### Object syntax for sizes

Source: https://github.com/desource-labs/image/blob/main/packages/core/README.md

Shows the object form of the sizes option, where keys are breakpoint names and values are viewport widths or pixel sizes. The value 600 is a pixel width.

```ts
{
  sm: '100vw',
  md: '50vw',
  lg: 600
}
```

--------------------------------

### Core TypeScript usage of createImage

Source: https://github.com/desource-labs/image/blob/main/README.md

Shows how to use the core createImage function to generate image URLs, attributes, and picture elements. Demonstrates presets, getAttrs, and getPicture methods.

```ts
import { createImage } from '@desource/image';

const image = createImage({
  quality: 76,
  presets: {
    avatar: { width: 96, height: 96, fit: 'cover', format: 'webp' }
  }
});

const url = image('/img/hero.jpg', { width: 800, format: 'webp' });

const attrs = image.getAttrs({
  src: '/img/hero.jpg',
  alt: 'Mountain lake',
  width: 1600,
  height: 1000,
  sizes: '100vw md:760px',
  placeholder: true
});

const picture = image.getPicture({
  src: '/img/hero.jpg',
  alt: 'Mountain lake',
  width: 1600,
  height: 1000,
  formats: ['avif', 'webp'],
  fallbackFormat: 'jpg'
});
```

--------------------------------

### Create callable helper with DsImageService

Source: https://github.com/desource-labs/image/blob/main/packages/angular/README.md

Creates a callable helper from DsImageService to generate URLs and attributes. The helper also exposes getImage, getSizes, getMeta, getPicture, getPreloadLink, and configured preset shortcuts.

```ts
import { inject } from '@angular/core';
import { DsImageService } from '@desource/image-angular';

const $img = inject(DsImageService).create();

const url = $img('/img/hero.jpg', {
  width: 800,
  format: 'webp',
  quality: 75
});

const attrs = $img.getAttrs({
  src: '/img/hero.jpg',
  alt: 'Hero',
  width: 800
});
```

--------------------------------

### Configure provideDsImage in app.config.ts

Source: https://github.com/desource-labs/image/blob/main/packages/angular/README.md

Register default image configuration in app.config.ts. Configuration is optional; without it the engine detects Vercel, Netlify, or AWS Amplify from the build environment and falls back to IPX. provideDsImage() also registers Angular's IMAGE_LOADER.

```ts
import { ApplicationConfig } from '@angular/core';
import { provideDsImage } from '@desource/image-angular';

export const appConfig: ApplicationConfig = {
  providers: [
    provideDsImage({
      quality: 80,
      screens: { sm: 640, md: 768, lg: 1024 },
      domains: ['images.example.com']
    })
  ]
};
```

--------------------------------

### Configure Vite plugin in SvelteKit

Source: https://github.com/desource-labs/image/blob/main/packages/svelte/README.md

Add the dsImage Vite integration to vite.config.ts. The plugin serves /_ipx in Vite development and preview, and bakes the detected provider into client and server bundles.

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

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

--------------------------------

### Configure provider with DsImageProvider

Source: https://github.com/desource-labs/image/blob/main/packages/react/README.md

Wraps the app in DsImageProvider to set a cloudinary provider, screens, domains, and image presets.

```tsx
import { DsImageProvider } from '@desource/image-react';
import { cloudinaryProvider } from '@desource/image/providers/cloudinary';

export function App() {
  return (
    <DsImageProvider
      config={{
        provider: 'cloudinary',
        quality: 80,
        screens: { sm: 640, md: 768, lg: 1024 },
        domains: ['images.example.com'],
        providers: {
          cloudinary: cloudinaryProvider({ cloudName: 'demo' })
        },
        presets: {
          avatar: { width: 96, height: 96, fit: 'cover', format: 'webp' }
        }
      }}
    >
      <Gallery />
    </DsImageProvider>
  );
}
```

--------------------------------

### Use dsImageAction and dsPictureAction on native elements

Source: https://github.com/desource-labs/image/blob/main/packages/svelte/README.md

Applies reactive image behavior to native `<img>` and `<picture>` elements. The picture action requires one fallback `<img>` and manages generated `<source>` elements around it.

```svelte
<script lang="ts">
  import { dsImageAction, dsPictureAction } from '@desource/image-svelte';

  let width = $state(720);
  const imageOptions = $derived({
    src: '/img/card.jpg',
    alt: 'A coastal village',
    width,
    height: 480,
    densities: '1x 2x',
    placeholder: true
  });
</script>

<img alt="A coastal village" use:dsImageAction={imageOptions} />

<picture
  use:dsPictureAction={{
    src: '/img/card.jpg',
    alt: 'A coastal village at sunset',
    width,
    height: 480,
    formats: ['avif', 'webp']
  }}
>
  <img alt="A coastal village at sunset" />
</picture>
```

--------------------------------

### Add a Changeset with pnpm

Source: https://github.com/desource-labs/image/blob/main/CONTRIBUTING.md

Run this command to generate a changeset for a pull request. Select every package in the fixed group and use the same summary to keep version and changelog entries aligned.

```sh
pnpm changeset
```

--------------------------------

### React usage of DsImage and DsPicture

Source: https://github.com/desource-labs/image/blob/main/README.md

Shows how to use DsImage and DsPicture components in a React component. Demonstrates props like src, alt, width, height, sizes, format, quality, placeholder, and preload.

```tsx
import { DsImage, DsPicture } from '@desource/image-react';

export function Gallery() {
  return (
    <>
      <DsImage
        src="/img/hero.jpg"
        alt="Mountain lake at sunrise"
        width={1600}
        height={1000}
        sizes="100vw md:760px"
        format="webp"
        quality={76}
        placeholder
        preload={{ fetchPriority: 'high' }}
      />

      <DsPicture
        src="/img/card.jpg"
        alt="Cabin under the stars"
        width={960}
        height={640}
        formats={['avif', 'webp']}
        fallbackFormat="jpg"
      />
    </>
  );
}
```

--------------------------------

### Add IPX middleware with createDsImageMiddleware

Source: https://github.com/desource-labs/image/blob/main/packages/angular/README.md

Adds the image middleware before static-file and Angular SSR handlers. It loads ipx lazily and only handles requests under /_ipx. Remote optimization is denied by default; add trusted domains or set allowAllDomains: true for a public optimizer.

```ts
import { createDsImageMiddleware } from '@desource/image-angular/server';

app.use(
  createDsImageMiddleware({
    dirs: [browserDistFolder],
    domains: ['images.example.com'],
    maxAge: 60 * 60 * 24 * 30
  })
);
```

--------------------------------

### Next.js: Use DsImage with next/image

Source: https://github.com/desource-labs/image/blob/main/packages/react/README.md

Create a custom loader with `createNextImageLoader` and pass it to `next/image`. This lets `next/image` keep its rendering behavior while DeSource Image owns the provider URL rules.

```ts
// ds-loader.ts
import { createNextImageLoader } from '@desource/image-react/next';

export const dsLoader = createNextImageLoader({
  provider: 'vercel'
});
```

```tsx
import NextImage from 'next/image';
import { dsLoader } from './ds-loader';

export function Hero() {
  return <NextImage loader={dsLoader} src="/img/hero.jpg" alt="Hero" width={1200} height={800} />;
}
```

--------------------------------

### Bind one configuration once with createDsImageBindings

Source: https://github.com/desource-labs/image/blob/main/packages/svelte/README.md

Use when several native elements share an explicit configuration. The returned functions no longer need a `config` field in every options object.

```svelte
<script lang="ts">
  import { createDsImageBindings, createDsImageConfig } from '@desource/image-svelte';

  const config = createDsImageConfig({ provider: 'ipx' });
  const { dsImageAction, dsImageAttachment, dsPictureAction, dsPictureAttachment } = createDsImageBindings(config);
</script>
```