Cum optimizezi imaginile pentru un site mai rapid

Imaginile neoptimizate sunt una dintre cele mai frecvente cauze ale unui site lent. O fotografie făcută cu telefonul poate avea 5-10 MB – mult prea mare pentru web, unde aceeași imagine ar trebui să fie sub 200 KB fără diferențe vizuale semnificative.

De ce contează dimensiunea imaginilor?

• Fiecare MB în plus înseamnă secunde în plus la încărcare
• Google penalizează site-urile lente în rezultatele de căutare (Core Web Vitals)
• Utilizatorii pe mobil cu conexiuni mai slabe abandonează site-urile lente
• Spațiul de hosting se umple mai rapid cu imagini neoptimizate

Reguli de bază pentru imagini web

Regula de aur: nicio imagine de pe site nu ar trebui să depășească 500 KB. Cele mai multe ar trebui să fie sub 150 KB.

Metoda 1: Optimizare automată în WordPress (recomandat)

ShortPixel (recomandat)

1. Instalează plugin-ul ShortPixel Image Optimizer
2. Creează un cont gratuit pe shortpixel.com (100 imagini/lună gratuit)
3. Introdu API key-ul în setările plugin-ului
4. Mergi la Media → Bulk ShortPixel și optimizează toate imaginile existente
5. Noile imagini uploadate se optimizează automat

Imagify

Alternativă similară cu plan gratuit (25 MB/lună):

1. Instalează Imagify
2. Creează cont pe imagify.io
3. Configurează nivelul de compresie: Aggressive (echilibru calitate/dimensiune)

WebP Express (conversie la WebP)

Convertește automat imaginile JPEG/PNG în formatul WebP (30-50% mai mic):

1. Instalează WebP Express
2. Activează și lasă setările implicite
3. Plugin-ul servește WebP browserelor compatibile, JPEG/PNG celor vechi

Metoda 2: Optimizare manuală înainte de upload

Online (fără instalare):

• Squoosh.app (Google) – cel mai bun instrument gratuit, conversie WebP, control total
• TinyPNG.com – simplu și eficient pentru JPEG și PNG
• Compressor.io – bun pentru diverse formate

Pas cu pas în Squoosh:

1. Mergi pe squoosh.app
2. Drag & drop imaginea ta
3. În panoul din dreapta, selectează formatul WebP
4. Ajustează calitatea la 75-85% (diferența vizuală este neglijabilă)
5. Verifică dimensiunea afișată jos – ar trebui să fie cu 50-80% mai mică
6. Apasă Download

Metoda 3: Optimizare în bulk prin cPanel

Dacă ai multe imagini deja uploadate pe server:

1. Intră în cPanel → File Manager
2. Navighează la folderul cu imagini (ex: public_html/wp-content/uploads)
3. Selectează imaginile și descarcă-le local
4. Procesează-le în batch cu ImageOptim (Mac) sau RIOT (Windows)
5. Re-uploadează imaginile optimizate

Dimensionarea corectă a imaginilor

Optimizarea compresiei nu este suficientă dacă imaginea este dimensionată greșit.

Exemplu problemă: Upload-ezi o fotografie de 4000x3000px, dar pe site se afișează la 800x600px. Browserul descarcă toți cei 4000px și îi scalează – efort inutil.

Soluție: Redimensionează imaginile înainte de upload la dimensiunea maximă la care vor fi afișate:

• Banner full-width: maxim 1920px lățime
• Imagine în articol: maxim 1200px lățime
• Miniatură/card: maxim 600px lățime

În WordPress: Setează dimensiunile în Settings → Media pentru a genera automat variante de dimensiuni corecte.

Lazy Loading – încarcă imaginile doar când sunt vizibile

Lazy loading amână încărcarea imaginilor care nu sunt vizibile în ecran la momentul accesării paginii.

WordPress 5.5+: Lazy loading este activat automat pentru toate imaginile.

Verificare: Inspectează elementul imagine în browser – ar trebui să vezi atributul loading="lazy".

Dacă nu este activ, adaugă în functions.php al temei tale:

add_filter( 'wp_lazy_loading_enabled', '__return_true' );

Cum verifici progresul

1. Mergi pe PageSpeed Insights (pagespeed.web.dev)
2. Introdu adresa site-ului
3. Caută în raport secțiunile:

• „Properly size images” – imagini prea mari
• „Serve images in next-gen formats” – imagini care nu sunt WebP
• „Defer offscreen images” – lazy loading neactivat

Scopul: scor 90+ pe mobil și desktop.