Optimizarea Imaginilor pentru Viteza Site-ului: Ghid Complet

Imaginile reprezintă ~50% din greutatea unei pagini. Optimizarea lor aduce cel mai mare câștig de performanță.

---

De Ce Contează

• 53% dintre utilizatorii de mobil abandonează pagina după 3 secunde (Google)
• O întârziere de 1 secundă = 7% mai puține conversii
• LCP + CLS influențează pozițiile în Google

---

Pasul 1: Formatul Fișierului

• WebP — cea mai bună opțiune (25–35% mai mic decât JPEG)
• PNG — transparență, logo-uri
• JPEG — fotografii
• SVG — iconițe
• AVIF — generație următoare cu fallback

---

Pasul 2: Compresie

TinyImg — gratuit, privat, instant.

---

Pasul 3: Imagini Responsive

<img src="image-800.webp"
  srcset="image-400.webp 400w, image-800.webp 800w, image-1200.webp 1200w"
  sizes="(max-width: 600px) 100vw, 800px"
  alt="Alt" width="800" height="600" />

<picture>
  <source srcset="image.avif" type="image/avif" />
  <source srcset="image.webp" type="image/webp" />
  <img src="image.jpg" alt="Alt" width="800" height="600" />
</picture>

---

Pasul 4: Lazy Loading

<img src="image.webp" loading="lazy" alt="Descriere" width="800" height="600" />

Nu aplica lazy-load imaginilor vizibile fără scroll. Setează întotdeauna width/height.

---

Pasul 5: Dimensiuni

<img src="photo.webp" alt="Foto" width="800" height="600" />

img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; }

---

Pasul 6: CDN

Cloudflare, Cloudinary, imgix, Vercel.

---

Pasul 7: Măsurare

• LCP: < 2,5s | CLS: < 0,1 | Imagini: < 500KB
• Instrumente: PageSpeed Insights, Lighthouse, WebPageTest

---

Listă de Verificare

• Format WebP
• Compresie cu TinyImg
• srcset + sizes
• Lazy load (doar sub fold)
• width + height
• CDN
• Audit PageSpeed

TinyImg — începe de aici.