Optimizarea imaginilor
Format, mărime, compresie, lazy vs priority, spațiu rezervat și next/image.
Actualizat
De ce contează imaginile
Pe majoritatea site-urilor, imaginile sunt peste jumătate din greutatea paginii și, de obicei, elementul LCP (cel mai mare element vizibil). O singură poză de 4 MB, pusă direct din telefon, poate face o pagină lentă indiferent cât de bun e restul codului.
Optimizarea imaginilor înseamnă 5 decizii: format, mărime, compresie, când se încarcă și cum rezervi spațiul.
1. Formatul potrivit
| Format | Pentru | Mărime față de JPEG |
|---|---|---|
| AVIF | fotografii, imagini complexe | ~50% mai mic |
| WebP | fotografii, ilustrații, transparență | ~25–35% mai mic |
| JPEG | fotografii (rezervă universală) | referință |
| PNG | capturi de ecran cu text, transparență exactă | mult mai mare la fotografii |
| SVG | logo-uri, iconițe, ilustrații vectoriale | minuscul, scalabil infinit |
| GIF | — | nu — un video MP4 / WebM e de 5–10× mai mic |
2. Mărimea corectă
Nu servi o imagine de 3000px într-un card de 300px. Regula: imaginea are lățimea afișată × densitatea ecranului (de obicei 2×). Cu srcset + sizes (vezi Imagini și media), browserul alege singur varianta potrivită.
3. Compresia
Calitate 75–85 e de obicei imposibil de deosebit vizual de 100, la jumătate din mărime. Pentru SVG: rulează SVGO (elimină metadate, simplifică path-uri).
4. Când se încarcă
| Imagine | Ce faci |
|---|---|
| imaginea principală, vizibilă imediat (LCP) | nu lazy; fetchpriority="high" / priority în next/image |
| sub fold | loading="lazy" — se încarcă doar când se apropie |
| fundaluri decorative | CSS, eventual mai mici / mai blurate |
5. Rezervă spațiul
width + height (sau aspect-ratio în CSS) → browserul rezervă locul înainte să vină imaginea → fără CLS.
next/image — toate deodată, automat
import Image from 'next/image'
import hero from '@/shared/assets/hero.jpg' // import static: dimensiuni + blur automat
<Image src={hero} alt="Echipa la birou" priority placeholder="blur" sizes="100vw" />
<Image
src={product.imageUrl} // imagine remote
alt={product.name}
width={600}
height={600}
sizes="(min-width: 64rem) 33vw, 100vw"
/>Ce face next/image |
Cum |
|---|---|
| convertește în AVIF / WebP | după ce acceptă browserul |
| generează mai multe mărimi | srcset automat; tu dai doar sizes |
| lazy implicit | priority pentru imaginea LCP |
| previne CLS | cere width/height sau import static sau fill |
| placeholder | placeholder="blur" (automat la import static) |
| cache | imaginile optimizate sunt cache-uite pe server / CDN |
| Prop | Când |
|---|---|
sizes |
mereu când imaginea nu are lățime fixă — fără el, browserul poate descărca varianta cea mai mare |
fill |
imaginea umple un părinte cu position: relative și dimensiuni (carduri, hero-uri) |
quality |
75 implicit; rar e nevoie de mai mult |
images.remotePatterns în next.config.ts |
obligatoriu pentru imagini de pe alte domenii (securitate) |
Unde stau imaginile
| Sursă | Recomandare |
|---|---|
| imagini ale proiectului (logo, ilustrații) | în repo, importate static |
| imagini încărcate de useri | storage (S3, Vercel Blob, Cloudinary) + next/image cu remotePatterns |
| multe imagini, transformări (crop, filtre) | serviciu de imagini / CDN (Cloudinary, imgix) cu loader custom |
Checklist
- format modern (AVIF / WebP), SVG pentru iconițe
- mărime potrivită +
sizes - imaginea LCP cu
priority, restul lazy -
width/heightsaufillîn părinte dimensionat -
altdescriptiv, nume de fișier relevant (ajută și SEO) - fără GIF-uri — video
muted autoplay loop playsinline
Pe scurt
- Imaginile decid de obicei LCP și greutatea paginii.
- AVIF/WebP, mărimea corectă, calitate ~75–85, lazy sub fold,
prioritypentru LCP, dimensiuni rezervate. next/imageface aproape tot automat — tu daialt,sizesșipriority.