Când un site merge greu, prima suspectă este aproape întotdeauna galeria de poze încărcate direct din telefon: 12 fișiere a câte 4 MB pe o singură pagină. Optimizarea imaginilor este cea mai rapidă îmbunătățire de viteză pe care o poți face fără să atingi codul.
Pasul 1: redimensionează înainte de încărcare
O imagine nu trebuie să fie mai mare decât spațiul în care se afișează. Repere practice:
- Imagine hero (lățime completă): 1920px lățime, maximum.
- Imagine în articol: 1200px.
- Miniatură / card: 600–800px.
- Logo: exact dimensiunea afișată, la 2x pentru ecrane retina.
- Poză de produs: 1000–1500px, dacă ai funcție de zoom.
O fotografie de 4000px afișată într-un card de 400px face browserul să descarce de zece ori mai multe date decât are nevoie.
Pasul 2: alege formatul potrivit
- WebP — alegerea implicită azi: 25–35% mai mic decât JPEG la aceeași calitate, suportat de toate browserele moderne.
- JPEG — pentru fotografii, când ai nevoie de compatibilitate maximă.
- PNG — doar pentru imagini cu transparență sau grafice cu text clar. O fotografie salvată ca PNG poate fi de 5 ori mai mare degeaba.
- SVG — pentru logo-uri, iconițe, ilustrații vectoriale. Se scalează perfect, ocupă puțin.
- AVIF — comprimă și mai bine decât WebP; util dacă platforma ta îl generează automat.
Pasul 3: comprimă
Calitatea 75–85 la JPEG/WebP este, în practică, indistinctibilă vizual de 100, dar la jumătate din dimensiune. Unelte:
- servicii online de compresie (bune pentru volume mici);
- funcția „export pentru web" din editorul de imagini;
- din linie de comandă, cu ImageMagick:
convert original.jpg -resize 1200x -strip -quality 82 optimizata.jpg
convert original.jpg -resize 1200x -quality 80 optimizata.webp-strip elimină metadatele (locație GPS, model de aparat) — economisește spațiu și, în plus, nu publici din greșeală coordonatele casei tale.
Pasul 4: încărcare întârziată (lazy loading)
Imaginile de mai jos în pagină se încarcă doar când utilizatorul ajunge la ele:
<img src="poza.webp" alt="Montaj centrală termică" width="1200" height="630" loading="lazy" decoding="async">Excepție: imaginea principală, vizibilă imediat, primește fetchpriority="high" și nu lazy loading — altfel întârzii exact elementul care contează pentru viteza percepută.
Pasul 5: declară dimensiunile
Atributele width și height (sau un raport în CSS) rezervă spațiul înainte de încărcare și previn saltul conținutului. Este unul dintre indicatorii Core Web Vitals urmăriți de Google.
Pasul 6: imagini responsive
Trimite fișiere diferite pentru ecrane diferite:
<img src="poza-800.webp"
srcset="poza-400.webp 400w, poza-800.webp 800w, poza-1600.webp 1600w"
sizes="(max-width: 768px) 100vw, 800px"
alt="Interior atelier">Un telefon va descărca varianta de 400px, nu pe cea de 1600px.
Pasul 7: text alternativ util
alt descrie imaginea pentru cititoarele de ecran și pentru Google. Scrie natural: „Echipa noastră montând o centrală termică în Cluj", nu „centrala termica cluj montaj ieftin preturi". Imaginile pur decorative primesc alt="".
Ținta practică: sub 200 KB pentru o imagine mare de conținut și sub 1,5 MB pentru toată pagina. Dacă o singură poză depășește 1 MB, ceva nu a fost optimizat.
Greșeli frecvente
- Încărcarea directă din telefon, fără redimensionare.
- Redimensionarea doar prin CSS (fișierul rămâne uriaș).
- PNG pentru fotografii.
- Zece imagini mari pe prima pagină, toate încărcate imediat.
- Nume de fișier de tipul
IMG_20260612_0001.jpgîn loc de nume descriptive.
Concluzie
Redimensionează, convertește în WebP, comprimă la 80, adaugă lazy loading și dimensiuni declarate. Un site cu 30 de imagini poate slăbi de la 25 MB la 2 MB într-o oră de muncă. Vezi și ghidul complet de viteză.
