Componenta (next/image) – Optimizarea automată a imaginilor în Next.js

import Image from 'next/image';

<Image
  src="/banner.jpg"
  alt="Banner"
  width={800}
  height={400}
  priority
/>

Ce face Componenta <Image> (next/image) - Optimizarea automată a imaginilor

Imaginile reprezintă adesea peste 70% din greutatea unei pagini web. Componenta <Image> rezolvă automat optimizarea lor la nivel de server.

Livrrează imagini comprimate în formate de generație viitoare (WebP sau AVIF) doar la dimensiunea exactă cerută de ecranul vizitatorului.

De asemenea, include încărcare leneșă (lazy loading) automată pentru imaginile din afara ecranului și rezervă spațiul corect pentru a preveni deplasarea layout-ului (Cumulative Layout Shift).

Exemple

Exemplul 1: Afișarea unei imagini de profil optimizate cu dimensiuni exacte

Servește imaginea în format WebP la rezoluția optimă.

import Image from 'next/image';
import avatarPoza from '@/public/avatar.png';

export default function Avatar() {
  return (
    <Image
      src={avatarPoza}
      alt="Avatar utilizator"
      width={120}
      height={120}
      className="rounded-full"
      placeholder="blur"
    />
  );
}

Ieșire în terminal

Imaginea este optimizată și servită la dimensiunea exactă de 120x120px.

Greșeli frecvente

• Folosirea de imagini de pe domenii externe (ex: AWS S3 sau Cloudinary) fără a le autoriza în prealabil în ‘next.config.js’ sub cheia ‘images.remotePatterns’.

Comenzi înrudite

• Optimizarea fonturilor cu next/font - Self-hosting automat fără cereri externe: Descarcă automat fonturile Google la momentul build-ului și le servește local, eliminând conexiunile externe către serverele Google.
• images.remotePatterns - Autorizarea domeniilor externe pentru optimizare imagini: Stabilește o listă albă strictă de domenii externe permise pentru descărcare și optimizare prin componenta <Image>.