Image Optimization

Popis

Komponent next/image automaticky optimalizuje obrázky: mení ich veľkosť podľa zariadenia, konvertuje ich do moderných formátov (WebP/AVIF) a používa lazy-loading. Tým výrazne zlepšuje Core Web Vitals a rýchlosť načítania stránky.

Funkčná ukážka (Demo)

Štandardný <img>

Neoptimalizovaný

Načíta plnú veľkosť originálu bez ohľadu na displej.

Next.js <Image />

Optimalizovaný

Automatický WebP, optimalizovaná veľkosť a lazy-loading.

Ukážka kódu

import Image from "next/image";

export default function OptimizedImage() {
  return (
    <Image
      src="https://images.unsplash.com/photo-1618477388954-7852f32655ec?q=80&w=1000&auto=format&fit=crop"
      alt="Moderná architektúra"
      width={1000}
      height={667}
      priority
      className="rounded-xl"
    />
  );
}