Next.js

Hoe optimaliseer je afbeeldingen met Next.js Image component?

Next.js Image component biedt automatische optimalisatie.

Home/Categorieën/Next.js/Hoe optimaliseer je afbeeldingen met Next.js Image component?

Image component voordelen

Automatische resizing Lazy loading Moderne formats (WebP) Placeholder support

Code Voorbeelden

JAVASCRIPTNext.js Image
import Image from 'next/image';

export default function Home() {
  return (
    <Image
      src="/hero.jpg"
      alt="Hero image"
      width={1200}
      height={600}
      priority
      placeholder="blur"
    />
  );
}

Relevante trefwoorden

Imageoptimizationperformance