next/image — 5 optimizări pe care le fac pe fiecare proiect Next.js

next/image e deja optimizat, dar 90% din proiecte îl folosesc prost. Iată ce schimb eu:

1. sizes corect

Fără sizes, next/image servește imaginea la rezoluția max. Ajungi să descarci 1920px pe mobil.

Exemplu real:

<Image
  src="/hero.jpg"
  fill
  sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
  alt="..."
/>

2. priority pe LCP image, nimic altceva

Pune priority doar pe imaginea principală (de obicei hero). Nu pe 10 carduri. Priority preload-uie agresiv și concurează cu JS-ul esențial.

3. placeholder="blur" pentru imagini locale

Cu import img from "..." primești un blurDataURL automat. Elimină CLS la scroll.

Pentru imagini remote: generezi blur la build cu plaiceholder sau sharp.

4. Loader custom pe CDN

Dacă livrezi prin Cloudflare Images / Bunny / imgix, scrii un loader:

const loader = ({ src, width, quality }: any) =>
  `https://cdn.tine.ro${src}?w=${width}&q=${quality ?? 75}&f=auto`;

Economisești bandwidth-ul Vercel-ului (image optimization contează la limită).

5. Quality 75, NU 100

Default-ul e 75 și e exact unde trebuie. Nu-l pune pe 100 "just in case" — crești imaginea cu 40% fără câștig vizual.

Bonus: formate

• WebP e suportat peste tot → activat automat
• AVIF economisește încă ~30% pentru LCP-uri mari, dar CPU-ul de encoding e semnificativ. Activează-l doar pe imaginile critice.

Cum măsor

Chrome DevTools → Performance → Web Vitals. LCP sub 2s, CLS 0, FCP sub 1s. Mai bun decât orice Lighthouse score static.