SSR / Dynamic — Configuration Reference

Client: provideImageOptimizerLoader

routePrefix

Mount path for the middleware. Default: /_ng/image.

defaultWidth

Width used when Angular requests the primary src without a width. Default: 1080.

defaultQuality

Default quality (1–100) when loaderParams omits q / quality. Default: 90.

widths

Override the IMAGE_CONFIG.breakpoints allowlist. By default the provider merges imageSizes and deviceSizes from the server config.

placeholderResolution

Resolution hint for blur placeholders. Default: 30.

Server: imageOptimizerHandler

Second argument is a partial ImageConfig. Unset fields fall back to library defaults.

deviceSizes / imageSizes

Allowed widths for validation. Defaults:

  • imageSizes: 16, 32, 48, 64, 96, 128, 256, 384
  • deviceSizes: 640, 750, 828, 1080, 1200, 1440, 1920, 2048

remotePatterns

Allowlist of external hosts the server may fetch. Required for remote images — see Remote Images.

localPatterns

Optional path allowlist inside browserDistFolder. Empty means all local paths are allowed.

formats

Output formats, e.g. ['image/webp'] or ['image/avif', 'image/webp']. Default: WebP only.

minimumCacheTTL

Minimum cache lifetime in seconds before re-optimizing. Default: 14400 (4 hours).

dangerouslyAllowSVG

Allow SVG optimization. Default: false (XSS risk when inlined).

maxCacheSize

LRU index size in bytes. Default: 50 MB.

typescript
app.use('/_ng/image', imageOptimizerHandler(browserDistFolder, {
  formats: ['image/avif', 'image/webp'],
  minimumCacheTTL: 60 * 60 * 24,
  remotePatterns: [
    {
      protocol: 'https',
      hostname: 'images.example.com',
      pathname: '/**',
    },
  ],
}));