Măsoară greutatea paginii tale: șanse mari ca jumătate din ea să fie imagini. Și cele mai multe sunt prea mari, în format vechi și încărcate chiar și când nu sunt vizibile. Optimizarea imaginilor e cea mai ieftină victorie de performanță pe care o poate face un site – iată sistemul.
1. Formate moderne: AVIF și WebP
WebP a devenit standard: calitate similară cu JPEG la jumătate din greutate. AVIF merge și mai departe – uneori cu 50-70% mai mic decât JPEG la aceeași calitate vizuală. Folosește AVIF acolo unde browserul îl suportă, WebP ca fallback și JPEG/PNG doar pentru cazurile vechi. Instrumentele de conversie (Squoosh, Sharp, sau chiar serviciile de imagini din Next.js) fac asta automat.
2. Dimensiunea corectă, nu „cea originală”
O fotografie de 4000px lățime afișată la 800px e de 25 de ori mai grea decât e nevoie. Generezi versiuni la dimensiunile reale de afișare (mobile, tablet, desktop) și browserul o alege pe cea potrivită cu srcset și sizes. Aici framework-urile moderne strălucesc: componenta de imagine din Next.js face toate acestea automat, cu un singur atribut.
3. Lazy loading: încarcă ce vezi, nu tot site-ul
Imaginile de sub prima ecrană nu trebuie încărcate la pornire. loading="lazy" amână încărcarea până când utilizatorul se apropie. Dar atenție: imaginea principală (hero) trebuie să aibă loading="eager" și fetchpriority="high" – ea decide LCP-ul paginii. Greșeala clasică e lazy loading peste tot, inclusiv la imaginea din prima ecrană.
4. Dimensiuni fixe: fără sărituri de layout
Fără width/height bizare, imaginea se încarcă și împinge textul în jos – CLS penalizat și experiență proastă. Rezervă întotdeauna spațiul (width + height sau aspect-ratio). Așa pagina stă stabilă, oricând s-ar încărca imaginile.
5. Testează înainte și după
Rulează PageSpeed Insights înainte de optimizare și după. Urmărește în special LCP și „greutatea totală”. Optimizarea imaginilor e cea mai mare scădere de kilograme pe care o vei vedea – adesea pagina trece de la 3MB la sub 1MB fără nicio diferență vizibilă cu ochiul liber.
Imaginile sunt parte din performanță, nu o decorare
Optimizarea asta e inclusă în fiecare site pe care îl construiesc: imagini convertite, redimensionate și încărcate inteligent din prima zi. Tu aduci pozele, sistemul se ocupă de restul.