Оптимизация изображений в Next.js: Компонент next/image

import Image from 'next/image';
import avatarPic from '@/public/images/avatar.jpg';

export function UserProfile() {
  return (
    <div className="flex items-center gap-4 p-4 rounded-xl border border-border bg-bg-surface">
      <div className="relative w-16 h-16 rounded-full overflow-hidden border border-border">
        <Image
          src={avatarPic}
          alt="Аватар пользователя"
          placeholder="blur" // Автоматически использует сгенерированный blurDataURL
          sizes="64px"
          className="object-cover"
        />
      </div>
      <div>
        <h3 className="font-semibold text-text-primary">Александр Волков</h3>
        <p className="text-xs text-text-muted">Lead Software Architect</p>
      </div>
    </div>
  );
}

import Image from 'next/image';

interface HeroBannerProps {
  imageUrl: string;
  title: string;
}

export function HeroBanner({ imageUrl, title }: HeroBannerProps) {
  return (
    // Обязательно: родительский контейнер имеет relative позиционирование и явную высоту
    <div className="relative w-full h-[320px] md:h-[480px] overflow-hidden rounded-2xl bg-bg-elevated">
      <Image
        src={imageUrl}
        alt={title}
        fill
        // Критично: сообщаем браузеру точный процент ширины экрана на брейкпоинтах
        sizes="(max-width: 768px) 100vw, (max-width: 1200px) 90vw, 1200px"
        className="object-cover transition-transform duration-500 hover:scale-105"
        priority // Отключает lazy-loading и добавляет preload в head для LCP
        quality={80}
      />
      <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent p-6 flex items-end">
        <h1 className="text-2xl md:text-4xl font-bold text-white tracking-tight">{title}</h1>
      </div>
    </div>
  );
}

import type { NextConfig } from 'next';

const nextConfig: NextConfig = {
  images: {
    // Включение современных алгоритмов сжатия
    formats: ['image/avif', 'image/webp'],

    // Минимальное время удержания в кэше оптимизированных файлов (31 день)
    minimumCacheTTL: 2678400,

    // Контроль нарезки брейкпоинтов для предотвращения раздувания кэша
    deviceSizes: [640, 750, 828, 1080, 1200, 1920],
    imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],

    // Защита от XSS-уязвимостей при обработке SVG
    dangerouslyAllowSVG: false,
    contentDispositionType: 'attachment',
    contentSecurityPolicy: "default-src 'self'; script-src 'none'; sandbox;",

    // Белый список доверенных удаленных хостов
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'images.unsplash.com',
        port: '',
        pathname: '/**',
      },
      {
        protocol: 'https',
        hostname: 'cdn.agenticlab.dev',
        port: '',
        pathname: '/uploads/**',
      },
    ],
  },
};

export default nextConfig;

import 'server-only';
import sharp from 'sharp';

export async function getDynamicBlurPlaceholder(imageUrl: string): Promise<string> {
  try {
    const response = await fetch(imageUrl);
    if (!response.ok) throw new Error(`Failed to fetch image: ${response.statusText}`);
    
    const arrayBuffer = await response.arrayBuffer();
    const buffer = Buffer.from(arrayBuffer);

    // Сжимаем изображение до миниатюры 10px с сильным размытием
    const resizedBuffer = await sharp(buffer)
      .resize(10)
      .webp({ quality: 20 })
      .toBuffer();

    return `data:image/webp;base64,${resizedBuffer.toString('base64')}`;
  } catch {
    // Безопасный fallback: нейтральный серый пиксель 1x1
    return 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==';
  }
}

export interface ImageLoaderProps {
  src: string;
  width: number;
  quality?: number;
}

export function cloudinaryLoader({ src, width, quality }: ImageLoaderProps): string {
  // Извлекаем относительный путь, если передан абсолютный URL
  const cleanSrc = src.replace(/^https?:\/\/[^/]+\//, '');
  const q = quality || 75;

  return `https://res.cloudinary.com/agenticlab/image/upload/f_auto,c_limit,w_${width},q_${q}/${cleanSrc}`;
}