Optimizare imagini pentru viteză: WebP, dimensiuni, lazy loading

Imaginile sunt, pe majoritatea site-urilor, cea mai grea parte a unei pagini. Un text se încarcă într-o clipă, dar o fotografie de câțiva megaocteți poate face diferența dintre o pagină care apare imediat și una la care vizitatorul se uită, îngrijorat, la un ecran gol. Vestea bună: optimizarea imaginilor se învață repede și are reguli clare. Nu ai nevoie să fii dezvoltator, ci să înțelegi patru lucruri: formatul, dimensiunea, compresia și momentul în care imaginea se încarcă.

Acest ghid parcurge fiecare dintre ele cu explicații simple, exemple și pași pe care îi poți aplica azi, pe un site WordPress. Nu vom promite cifre exacte de câștig, pentru că depind de imaginile tale, de tema ta și de hosting; vom arăta în schimb cum le măsori tu.

De ce contează greutatea imaginilor

Când cineva deschide o pagină, browserul descarcă textul, stilurile, scripturile și toate imaginile. Cu cât sunt mai mari fișierele, cu atât durează mai mult, mai ales pe telefon, cu conexiune mobilă variabilă. Efectele posibile ale imaginilor prea grele:

• pagina apare lent, iar vizitatorii pot renunța înainte să o vadă;
• consumi mai multe date din abonamentul vizitatorului și mai multă lățime de bandă a hostingului;
• indicatorii de experiență măsurați de Google (cunoscuți ca Core Web Vitals), în special cel care măsoară cât de repede apare cel mai mare element vizibil, de obicei o imagine, pot ieși mai slabi;
• copiile de siguranță și transferurile devin mai mari.

Atenție la formulare: o pagină rapidă nu garantează poziții mai bune în căutări, dar o experiență lentă este un dezavantaj real pentru vizitator, iar viteza este unul dintre multele semnale pe care le iau în considerare motoarele de căutare.

Cele patru pârghii ale unei imagini ușoare

Gândește-te la o imagine ca la un colet: contează ce formă are (format), cât de mare este (dimensiuni), cât de strâns e ambalat (compresie) și când îl ceri (încărcare). Le luăm pe rând.

1. Alegerea formatului

JPEG

Format vechi și foarte răspândit, potrivit pentru fotografii. Comprimă „cu pierdere": reduce dimensiunea renunțând la detalii pe care ochiul le observă greu. Nu suportă transparență.

PNG

Potrivit pentru grafică cu margini clare (sigle, capturi de ecran, ilustrații cu text) și pentru transparență. Comprimă fără pierdere, deci fișierele de tip fotografie ies mari. Nu folosi PNG pentru fotografii mari.

WebP

Format modern, creat de Google, care poate reduce dimensiunea față de JPEG și PNG la o calitate vizuală comparabilă. Suportă comprimare cu și fără pierdere, transparență și animație. Este suportat de browserele actuale, iar WordPress îl acceptă în biblioteca media începând cu versiunea 5.8. Este, în practică, o alegere sigură pentru majoritatea imaginilor de pe un site.

AVIF

Format și mai nou, care poate comprima uneori mai eficient decât WebP. Suportul în WordPress a venit în versiunea 6.5, iar în browsere este larg răspândit, deși nu universal. Codificarea imaginilor AVIF poate fi mai lentă, iar la unele imagini avantajul față de WebP este mic. Dacă îl folosești, păstrează o variantă de rezervă pentru browserele care nu îl înțeleg.

SVG

Format vectorial, ideal pentru sigle, pictograme și ilustrații simple. Se scalează la orice mărime fără pierdere de calitate și are, de regulă, un fișier foarte mic. Nu este potrivit pentru fotografii. WordPress nu permite implicit încărcarea SVG din motive de securitate, deoarece fișierele pot conține cod; încarcă SVG doar din surse de încredere.

Regula practică

GIF-urile animate sunt de obicei foarte grele; un video scurt, fără sunet, sau un WebP animat îndeplinește același rol cu mult mai puțin ocupat.

2. Dimensiunile potrivite

Aceasta este cea mai frecventă și mai ieftină oportunitate. Mulți încarcă o fotografie din aparat, de câteva mii de pixeli lățime, pentru un loc în care site-ul o afișează la câteva sute. Browserul descarcă toată imaginea și o micșorează apoi, deci se plătește greutatea fără niciun beneficiu vizual.

Cum afli ce dimensiune îți trebuie

1. Deschide pagina în browser, click dreapta pe imagine și alege „Inspectează".
2. Caută dimensiunea afișată (lățimea în pixeli la care apare efectiv).
3. Dacă ai ecrane de înaltă densitate (multe telefoane și laptopuri moderne), imaginea poate avea nevoie de o lățime mai mare decât cea afișată, pentru claritate. Un raport de aproximativ două ori lățimea afișată este un punct de plecare uzual, pe care îl testezi vizual.
4. Redimensionează imaginea la aceste valori înainte de încărcare.

Exemplu

Dacă tema ta afișează imaginea reprezentativă a articolelor într-o coloană de aproximativ 800 de pixeli lățime, nu ai nevoie de un original de 5000 de pixeli. O imagine redimensionată rezonabil peste lățimea afișată oferă claritate și greutate rezonabilă.

Ce face WordPress singur

La fiecare încărcare, WordPress generează automat variante de dimensiune: miniatură (150 × 150), mediu (maximum 300 de pixeli), mediu-mare (768), mare (1024) și, în versiunile recente, alte dimensiuni mai mari. În plus, imaginile foarte mari sunt redimensionate automat la o limită maximă (în versiunile recente, 2560 de pixeli pe latura mare), iar originalul rămâne păstrat. Tema și plugin-urile pot adăuga dimensiuni proprii.

Concluzia: WordPress te ajută, dar nu face minuni. Dacă încarci fișiere uriașe, tot ele vor fi originalul pe disc, iar variantele generate se adaugă peste el.

3. Compresia

Compresia reduce greutatea fișierului prin doi factori: calitatea și metadatele.

Calitatea

La JPEG și WebP cu pierdere, un parametru de calitate controlează compromisul dintre greutate și aspect. Reducerea moderată a calității produce adesea o diferență pe care ochiul nu o sesizează, dar o scădere prea mare produce zone pătrate, culori „sparte" și margini neclare. Abordarea sănătoasă:

1. Alege o calitate moderată.
2. Compară vizual cu originalul, la dimensiunea reală de afișare.
3. Dacă nu vezi diferență, încearcă o valoare puțin mai mică; dacă o vezi, revino.

Nu există o valoare corectă pentru toate imaginile: o fotografie cu cer senin se comportă diferit față de o poză cu detalii fine.

Metadatele

Fotografiile pot conține informații adăugate de aparat: modelul, setările, uneori locația GPS. Acestea măresc ușor fișierul și, din motive de confidențialitate, merită eliminate la imaginile publicate, mai ales dacă pozele conțin locația unei locuințe sau a unui eveniment privat.

Cu pierdere sau fără

Comprimarea „fără pierdere" păstrează fiecare pixel; cea „cu pierdere" renunță la detalii. Pentru fotografii, cea cu pierdere, în limite rezonabile, este alegerea uzuală. Pentru grafică cu text sau margini precise, încearcă varianta fără pierdere.

4. Încărcarea la momentul potrivit: lazy loading

„Lazy loading" (încărcare leneșă) înseamnă că imaginile aflate în afara zonei vizibile a ecranului nu se descarcă imediat, ci doar când vizitatorul se apropie de ele prin derulare. Pagina inițială se încarcă mai ușor, iar imaginile de jos apar când este nevoie.

Atributul loading="lazy"

Browserele moderne au încorporată această funcție. Se activează prin atributul loading="lazy" pe eticheta imaginii:

<img src="fotografie.webp" alt="Descrierea imaginii" width="800" height="600" loading="lazy">

Din versiunea 5.5, WordPress adaugă automat acest atribut imaginilor din conținut, deci în multe cazuri nu trebuie să faci nimic. Verifică totuși în codul sursă al paginii dacă tema sau un constructor de pagini nu îl dezactivează.

Excepția importantă: imaginea de sus

Imaginea principală din partea vizibilă a paginii (de exemplu imaginea de la începutul articolului sau banner-ul de pe pagina principală) nu trebuie încărcată leneș. Dacă o amâni, tocmai elementul pe care vizitatorul îl vede primul apare mai târziu, ceea ce agravează experiența. WordPress încearcă să evite lazy loading pentru prima imagine importantă din pagină, iar versiunile recente pot adăuga și atributul fetchpriority="high", prin care browserul este informat că imaginea are prioritate. Poți verifica și corecta manual dacă tema ta se comportă diferit.

Dimensiunile în atribute

Adaugă întotdeauna atributele width și height (sau o proporție definită în stil). Astfel browserul rezervă locul imaginii înainte de încărcare, iar conținutul nu „sare" când imaginea apare. Acest salt vizual este măsurat de un alt indicator Core Web Vitals, numit deplasare cumulativă a aspectului. WordPress include automat aceste atribute pentru imaginile din bibliotecă.

5. Imagini adaptate la ecran: srcset

Un telefon nu are nevoie de aceeași imagine ca un monitor mare. Atributul srcset îi spune browserului că există mai multe variante ale aceleiași imagini, la lățimi diferite, iar acesta o alege pe cea potrivită pentru ecranul și densitatea lui. Exemplu simplificat:

<img src="peisaj-800.webp"
     srcset="peisaj-400.webp 400w, peisaj-800.webp 800w, peisaj-1600.webp 1600w"
     sizes="(max-width: 600px) 100vw, 800px"
     alt="Peisaj de munte la apus" width="800" height="533">

Cum se citește: 400w înseamnă că varianta are 400 de pixeli lățime; sizes explică browserului cât loc va ocupa imaginea pe ecran (aici, toată lățimea pe ecrane mici, 800 de pixeli pe cele mari). Din aceste informații, browserul alege fișierul cel mai potrivit.

WordPress generează srcset automat pentru imaginile inserate din bibliotecă, folosind variantele de dimensiune create la încărcare (funcție prezentă din versiunea 4.4). De aceea, un original foarte mare nu înseamnă neapărat că telefonul îl descarcă; dar înseamnă că fișierul rămâne pe disc.

6. Un flux de lucru simplu, pas cu pas

Iată un traseu care funcționează pentru majoritatea site-urilor:

1. Fă backup al fișierelor și al bazei de date, înainte să modifici imaginile existente.
2. Măsoară situația de pornire: rulează o pagină importantă printr-un instrument de testare a vitezei (de exemplu PageSpeed Insights, oferit de Google) și notează recomandările legate de imagini.
3. Pentru imaginile noi: redimensionează la dimensiunea necesară, alege formatul potrivit, comprimă moderat, scrie un text alternativ și un nume de fișier descriptiv.
4. Pentru imaginile existente: începe cu cele mai mari și cu cele din paginile cele mai vizitate. Înlocuirea câtorva fișiere uriașe are mai mult efect decât optimizarea a o sută de fișiere mici.
5. Verifică lazy loading-ul: imaginile aflate în afara zonei vizibile să fie leneșe, imaginea principală nu.
6. Verifică vizual paginile după schimbări, inclusiv pe telefon.
7. Remăsoară și compară cu situația inițială.

Un exemplu concret, ipotetic

Imaginează-ți un articol cu zece fotografii, toate încărcate direct de pe telefon, fără redimensionare. Pe pagină, fiecare apare într-o coloană îngustă. După optimizare:

• fotografiile sunt redimensionate la o lățime potrivită coloanei, cu o rezervă pentru ecrane dense;
• sunt salvate în WebP cu o calitate moderată;
• prima imagine rămâne încărcată imediat, celelalte nouă au loading="lazy";
• toate au width și height;
• fiecare are un text alternativ scurt și util.

Rezultatul probabil: pagina se încarcă vizibil mai repede, iar spațiul ocupat pe disc scade. Cât de mult exact, depinde de imaginile tale; măsoară înainte și după.

Greșeli frecvente

• Încărcarea originalelor uriașe „pentru orice eventualitate". Păstrează originalele pe un spațiu extern; încarcă în site varianta potrivită.
• Lazy loading pe imaginea principală. Încetinește exact ceea ce vizitatorul vede primul.
• Lipsa atributelor width și height. Paginile se deplasează în timp ce se încarcă.
• Compresie agresivă. Imaginile devin fărâmițate; mai bine puțin mai grele decât urâte.
• Conversia în WebP fără variantă de rezervă pe site-uri vechi. Verifică ce browsere folosesc vizitatorii tăi.
• Folosirea GIF-urilor animate. Sunt de obicei mult mai grele decât un video scurt.
• Ștergerea manuală a variantelor generate. Tema poate cere acele fișiere, iar imaginile se strică. Pentru curățenia sigură a bibliotecii, vezi ghidul despre curățarea bibliotecii media.
• Optimizarea fără măsurare. Fără cifre înainte și după, nu știi dacă a avut efect.
• Text alternativ lăsat gol. Optimizarea nu înseamnă doar greutate; imaginile trebuie să rămână accesibile.

Întrebări frecvente

WebP sau AVIF: pe care îl aleg?

WebP este, în prezent, alegerea cea mai sigură pentru compatibilitate. AVIF poate oferi fișiere mai mici la unele imagini, dar codificarea este mai lentă, iar suportul nu este peste tot. Dacă folosești AVIF, păstrează o variantă de rezervă și testează pe imaginile tale.

Lazy loading afectează SEO?

Folosit corect (atributul nativ loading="lazy" pe imaginile aflate în afara zonei vizibile), este compatibil cu indexarea imaginilor de către motoarele de căutare. Evită varianta care ascunde imaginile în scripturi greu de interpretat. Nu există garanția că schimbă pozițiile, dar poate îmbunătăți experiența de încărcare.

Câtă calitate pierd când comprim?

Depinde de imagine și de setări. O compresie moderată este adesea greu de observat, una agresivă se vede. Compară vizual la dimensiunea reală de afișare și alege cea mai mică greutate la care imaginea încă arată bine.

Trebuie să optimizez și imaginile vechi?

Merită cel puțin cele mai mari și cele din paginile cele mai vizitate. Înainte, fă backup, apoi lucrează în etape, verificând vizual rezultatele.

Cum te ajută Leono Media Cleaner

Leono Media Cleaner este conceput să găsească fișierele media foarte mari din bibliotecă și să le optimizeze sau redimensioneze, după ce ai văzut în prealabil o simulare. Detalii practice găsești în pagina despre optimizarea fișierelor media mari. Există variantă gratuită de bază, iar backup-ul rămâne un pas de făcut înainte de orice modificare a fișierelor existente.

Concluzie

Optimizarea imaginilor nu este o artă obscură, ci o listă de verificare: format potrivit, dimensiune potrivită, compresie moderată și încărcare la momentul potrivit. Începe cu imaginile cele mai grele, păstrează imaginea principală încărcată imediat, lasă restul să se încarce leneș și măsoară rezultatul. Dacă ai nevoie de spațiu pe hosting în același timp, vezi și ghidul despre ce ocupă loc în uploads. Un pas mic, repetat constant, aduce mai mult decât o optimizare mare făcută o singură dată.