Next.js: Оптимизация изображений — пример кода

import Image from 'next/image';
import hero from '@/public/hero.jpg'; // static import → auto dimensions + blur

// ✅ LCP hero: static import, priority, blur placeholder, responsive sizes
export function Hero() {
  return (
    <Image
      src={hero}
      alt="Hero"
      priority
      placeholder="blur"
      sizes="(max-width: 768px) 100vw, 1200px"
    />
  );
}

// ✅ Grid thumbnail with fill — note the required `sizes`
export function Thumb({ src }: { src: string }) {
  return (
    <div className="relative aspect-square">
      <Image src={src} alt="" fill sizes="(max-width: 640px) 50vw, 200px" className="object-cover" />
    </div>
  );
}

// next.config.js — remote sources must be explicitly allow-listed
module.exports = {
  images: {
    remotePatterns: [
      { protocol: 'https', hostname: 'cdn.acme.com', pathname: '/media/**' },
    ],
    formats: ['image/avif', 'image/webp'], // AVIF first, WebP fallback
  },
};