next-image-placeholder

getPlaceholder

Generates a blur placeholder and extracts dominant color from an image URL.

Signature

getPlaceholder(url: string, options?: PlaceholderOptions): Promise<PlaceholderResult>

Returns

Promise<{
  base64: string; // The blur data URL
  color: {
    r: number;
    g: number;
    b: number;
    hex: string; // Hex color code (e.g. "#ffffff")
  }
}>

Options

interface PlaceholderOptions {
  size?: number;             // Thumbnail size (default: 16)
  quality?: number;          // WebP quality 0-100 (default: 70)
  colorAlgorithm?: 'simple' | 'sqrt' | 'dominant';  // (default: 'sqrt')
  timeout?: number;          // Fetch timeout in ms (default: 30000)
  retries?: number;          // Retry attempts (default: 3)
}