Image Optimization

Next.js <Image> komponent automaticky optimalizuje obrázky: WebP/AVIF konverzia, lazy loading, blur placeholder, správne rozmery.

priority + fill

Priority obrázok

priority — preload pre LCP obrázok. fill — vypĺňa kontajner.

Lazy loaded obrázky s blur placeholder

Obrázok 10
Obrázok 20
Obrázok 30
Obrázok 40
Obrázok 50
Obrázok 60

Scroll down pre lazy loading — obrázky sa načítajú len keď sú viditeľné.

Kód

import Image from "next/image";

// Pevné rozmery
<Image src="/photo.jpg" alt="..." width={800} height={400} />

// Vyplnenie kontajnera
<Image src="/hero.jpg" alt="..." fill className="object-cover" />

// Priority pre LCP
<Image src="/hero.jpg" alt="..." priority />

// Blur placeholder
<Image src="/photo.jpg" alt="..." placeholder="blur" blurDataURL="..." />