Оптимізація зображень у 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 (
    // Обов'язково: батьківський контейнер має відносне позиціонування та явну висоту
    <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}`;
}