@ai-growth/nextjs/dist/utils/image-optimization.d.ts

Seamlessly integrate Sanity CMS with Next.js applications for automated blog routing and rendering

/**
 * @fileoverview Image Optimization Utilities for Next.js
 *
 * This module provides utilities for optimizing images with Next.js Image component,
 * including Sanity CDN integration, responsive sizing, and format optimization.
 */
import { ImageLoader } from 'next/image';
import { SanityImage } from '../types/sanity';
/**
 * Responsive breakpoint configuration
 */
export interface ResponsiveBreakpoint {
    /** Breakpoint name */
    name: string;
    /** Minimum width for this breakpoint */
    minWidth: number;
    /** Image width to use at this breakpoint */
    imageWidth: number;
    /** Image height to use at this breakpoint (optional) */
    imageHeight?: number;
}
/**
 * Image optimization configuration
 */
export interface ImageOptimizationConfig {
    /** Default quality for images (1-100) */
    quality: number;
    /** Preferred format for optimization */
    format: 'auto' | 'webp' | 'avif' | 'jpg' | 'png';
    /** Responsive breakpoints */
    breakpoints: ResponsiveBreakpoint[];
    /** Whether to enable lazy loading by default */
    lazyLoading: boolean;
    /** Default blur placeholder */
    blurDataURL?: string;
}
/**
 * Image sizing options
 */
export interface ImageSizingOptions {
    /** Image width */
    width?: number;
    /** Image height */
    height?: number;
    /** Aspect ratio to maintain */
    aspectRatio?: number;
    /** Fit mode for the image */
    fit?: 'crop' | 'fill' | 'fillmax' | 'max' | 'scale' | 'clip' | 'min';
    /** Whether to crop the image */
    crop?: 'center' | 'top' | 'bottom' | 'left' | 'right' | 'smart';
    /** Quality setting (1-100) */
    quality?: number;
    /** Format override */
    format?: 'auto' | 'webp' | 'jpg' | 'png';
}
/**
 * Processed image data for Next.js Image component
 */
export interface OptimizedImageData {
    /** Image source URL */
    src: string;
    /** Image alt text */
    alt: string;
    /** Image width */
    width: number;
    /** Image height */
    height: number;
    /** Responsive sizes attribute */
    sizes?: string;
    /** Blur placeholder data URL */
    blurDataURL?: string;
    /** Image priority flag */
    priority?: boolean;
    /** Custom loader function */
    loader?: ImageLoader;
}
/**
 * Default image optimization configuration
 */
export declare const DEFAULT_IMAGE_CONFIG: ImageOptimizationConfig;
/**
 * Common aspect ratios for different use cases
 */
export declare const ASPECT_RATIOS: {
    readonly square: 1;
    readonly landscape: number;
    readonly portrait: number;
    readonly ultrawide: number;
    readonly golden: 1.618;
    readonly card: number;
    readonly hero: number;
    readonly thumbnail: 1;
};
/**
 * Create a Sanity image loader for Next.js Image component
 *
 * @param projectId - Sanity project ID
 * @param dataset - Sanity dataset
 * @returns Next.js Image loader function
 */
export declare function createSanityImageLoader(_projectId?: string, _dataset?: string): ImageLoader;
/**
 * Default Sanity image loader (uses placeholder project/dataset)
 */
export declare const sanityImageLoader: ImageLoader;
/**
 * Process a Sanity image for Next.js Image component
 *
 * @param image - Sanity image object or string URL
 * @param options - Sizing and optimization options
 * @param config - Image optimization configuration
 * @returns Optimized image data for Next.js Image
 */
export declare function processImageForNextJS(image: SanityImage | string | undefined, options?: ImageSizingOptions, config?: ImageOptimizationConfig): OptimizedImageData;
/**
 * Generate responsive image data for different use cases
 *
 * @param image - Sanity image object or string URL
 * @param useCase - The intended use case
 * @param config - Image optimization configuration
 * @returns Optimized image data
 */
export declare function generateResponsiveImageData(image: SanityImage | string | undefined, useCase: 'hero' | 'featured' | 'thumbnail' | 'avatar' | 'card' | 'gallery', config?: ImageOptimizationConfig): OptimizedImageData;
/**
 * Generate sizes attribute for responsive images
 *
 * @param breakpoints - Responsive breakpoint configuration
 * @returns CSS sizes attribute string
 */
export declare function generateSizesAttribute(breakpoints: ResponsiveBreakpoint[]): string;
/**
 * Generate a blur data URL for placeholder
 *
 * @param image - Sanity image object
 * @returns Base64 blur data URL
 */
export declare function generateBlurDataURL(image: SanityImage): string | undefined;
/**
 * Calculate optimal image dimensions based on container and content
 *
 * @param containerWidth - Container width in pixels
 * @param containerHeight - Container height in pixels
 * @param imageAspectRatio - Image aspect ratio
 * @param fitMode - How the image should fit in the container
 * @returns Optimal dimensions
 */
export declare function calculateOptimalDimensions(containerWidth: number, containerHeight: number, imageAspectRatio: number, fitMode?: 'cover' | 'contain'): {
    width: number;
    height: number;
};
/**
 * Get device pixel ratio considerations for image sizing
 *
 * @param baseWidth - Base image width
 * @param baseHeight - Base image height
 * @param maxDPR - Maximum device pixel ratio to consider
 * @returns Adjusted dimensions
 */
export declare function getHighDPIDimensions(baseWidth: number, baseHeight: number, maxDPR?: number): {
    width: number;
    height: number;
};
/**
 * Validate image URL and format
 *
 * @param url - Image URL to validate
 * @returns Validation result
 */
export declare function validateImageUrl(url: string): {
    isValid: boolean;
    format?: string;
    errors: string[];
};
//# sourceMappingURL=image-optimization.d.ts.map