import * as React from "react";
import { type ImageProps } from "next/image";
export interface OptimizedImageProps extends Omit<ImageProps, 'placeholder'> {
    /** Fallback component to render when image fails to load */
    fallback?: React.ReactNode;
    /** Aspect ratio preset for the container */
    aspectRatio?: "square" | "video" | "portrait" | "auto";
    /** Additional classes for the container div (only used with fill or aspectRatio) */
    containerClassName?: string;
    /** Enable blur placeholder (requires blurDataURL) */
    enableBlur?: boolean;
    /** Base64 data URL for blur placeholder */
    blurDataURL?: string;
}
/**
 * OptimizedImage - A wrapper around next/image with automatic optimization
 *
 * Features:
 * - Automatic WebP/AVIF format conversion (configured in next.config)
 * - Lazy loading by default
 * - Blur placeholder support
 * - Aspect ratio presets
 * - Fallback component for loading/error states
 *
 * @example
 * // Basic usage
 * <OptimizedImage src="/hero.jpg" alt="Hero" width={800} height={600} />
 *
 * @example
 * // With aspect ratio container (fill mode)
 * <OptimizedImage
 *   src="/product.jpg"
 *   alt="Product"
 *   fill
 *   aspectRatio="square"
 * />
 *
 * @example
 * // With responsive sizes (CRITICAL for performance)
 * // The sizes prop tells the browser which image size to download
 * // Without it, Next.js generates all sizes, impacting performance
 * <OptimizedImage
 *   src="/hero.jpg"
 *   alt="Hero"
 *   fill
 *   sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
 * />
 *
 * @example
 * // Hero image (above the fold) - use priority to preload
 * // This avoids LCP issues for important visible images
 * <OptimizedImage
 *   src="/hero.jpg"
 *   alt="Hero"
 *   fill
 *   priority
 *   sizes="100vw"
 * />
 *
 * @example
 * // With blur placeholder for smooth loading transition
 * <OptimizedImage
 *   src="/photo.jpg"
 *   alt="Photo"
 *   width={400}
 *   height={300}
 *   enableBlur
 *   blurDataURL="data:image/jpeg;base64,..."
 * />
 *
 * @example
 * // High quality for marketing/hero images (default is 75)
 * <OptimizedImage
 *   src="/hero.jpg"
 *   alt="Hero"
 *   fill
 *   quality={90}
 *   priority
 *   sizes="100vw"
 * />
 *
 * @see https://nextjs.org/docs/app/api-reference/components/image#sizes
 * @see https://nextjs.org/docs/app/api-reference/components/image#priority
 * @see https://nextjs.org/docs/app/api-reference/components/image#quality
 */
declare const OptimizedImage: React.ForwardRefExoticComponent<OptimizedImageProps & React.RefAttributes<HTMLImageElement>>;
export { OptimizedImage };
//# sourceMappingURL=optimized-image.d.ts.map