Cum micșorezi pozele pentru site fără să pierzi din calitate

Majoritatea pozelor de pe site-uri sunt mult mai grele decât e nevoie și de obicei le poți reduce la o fracțiune din mărime fără să observe cineva vreo diferență. Ai nevoie de trei pași: aduci poza la mărimea la care apare pe site, o salvezi în formatul potrivit și alegi o compresie rezonabilă. Pentru niciunul nu-ți trebuie programator.

De ce merită efortul

Pozele sunt partea cea mai grea din majoritatea paginilor. În raportul HTTP Archive din 2025, care măsoară peste 15 milioane de site-uri pe mobil, pozele însumau 911 KB din pagina de mobil mediană, mai mult decât JavaScript-ul, fonturile și stilurile. Cu poze mai ușoare, pagina apare mai repede, consumă mai puține date mobile ale vizitatorului și iese mai bine la măsurătorile de viteză ale Google.

Un exemplu de la una dintre imaginile de pe blogul ăsta: ca PNG de 1200 pe 630 de pixeli, avea 612 KB. Salvată ca WebP, la aceleași dimensiuni, are 21 KB, cam a treizecea parte, iar puse una lângă alta arată la fel.

Pasul 1: adu poza la mărimea la care apare

O poză făcută cu un telefon modern are de multe ori 4.000 de pixeli lățime sau mai mult. Un blog o poate afișa la 800 de pixeli lățime. Dacă urci originalul, fiecare vizitator descarcă toți pixelii în plus, iar browserul îi aruncă apoi ca să încapă poza pe ecran.

Află cât de lată apare poza pe site și redimensionează-o la lățimea aceea sau la dublul ei, dacă vrei să fie clară pe ecranele cu rezoluție mare, cum au telefoanele și laptopurile recente. O poză afișată la 800 de pixeli lățime are nevoie de cel mult 1.600 de pixeli.

Majoritatea programelor de editare pot face asta, la fel și Squoosh, instrumentul gratuit despre care scriu mai jos, care are o opțiune de redimensionare lângă setările de compresie.

Când aceeași poză apare la mărimi diferite, de exemplu pe toată lățimea pe calculator și mai îngustă pe telefon, site-ul poate oferi mai multe variante și îl lasă pe browser să o aleagă pe cea potrivită. Programatorii fac asta cu un atribut numit srcset. Documentația Mozilla explică simplu de ce: cei de pe mobil nu vor să-și consume datele descărcând o poză mare, făcută pentru calculator, când le-ar ajunge una mică. WordPress și unele platforme de site-uri creează singure aceste variante când urci o poză.

Pasul 2: alege formatul potrivit

JPEG e de zeci de ani standardul pentru fotografii. PNG se potrivește la grafică cu margini clare sau cu transparență, cum ar fi capturile de ecran și logourile, dar e greu pentru fotografii. Amândouă merg peste tot.

WebP, făcut de Google, le face pe amândouă ocupând mai puțin spațiu. Google spune că pozele WebP sunt cu 25 până la 34% mai mici decât JPEG-urile comparabile la aceeași calitate vizuală, iar cele WebP fără pierderi cu 26% mai mici decât PNG-urile. Cam 97% dintre browserele folosite îl suportă, după Can I use, inclusiv Safari, de la versiunea 16.

AVIF e mai nou și de multe ori și mai mic. Echipa web.dev de la Google spune că a văzut economii de peste 50% față de JPEG. Suportul e puțin mai mic, în jur de 95% dintre browsere, iar Safari îl are de la versiunea 16.4.

Pentru logouri, iconițe și ilustrații simple, făcute din forme, SVG e de multe ori cea mai bună alegere. Un fișier SVG descrie formele în loc să păstreze o grilă de pixeli, așa că rămâne clar la orice mărime și e de obicei foarte mic.

GIF-urile animate merită o mențiune aparte, pentru că sunt un format foarte vechi și foarte greu. Transformate într-un videoclip scurt, fără sunet, care pornește singur și se repetă, arată la fel și cântăresc mult mai puțin. Într-un exemplu de pe web.dev, de la Google, un GIF de 3,7 MB a devenit un MP4 de 551 KB și un videoclip WebM de 341 KB.

Ca regulă simplă: fotografiile ca WebP sau AVIF, dacă site-ul tău îl suportă, logourile și iconițele ca SVG, iar PNG doar când ai nevoie de fiecare pixel exact cum e.

Pasul 3: comprimă, dar nu prea tare

JPEG, WebP și AVIF te lasă să alegi un nivel de calitate, de obicei de la 0 la 100. Mai jos înseamnă un fișier mai mic și, de la un punct încolo, neclaritate, pete pătrățoase sau culori întinse. Unde e punctul ăsta depinde de poză, așa că verifică cu ochii tăi.

Lighthouse, instrumentul Google, îți dă un reper util. Când verifică dacă un JPEG e bine comprimat, îl salvează din nou la calitatea 85 și îl semnalează dacă așa s-ar economisi cel puțin 4 KB. Pe la 85 e un punct de plecare rezonabil pentru fotografii. Apoi coboară și verifică dacă mai vezi vreo diferență.

Squoosh, un instrument gratuit făcut de echipa Chrome, la squoosh.app, face totul simplu. Tragi poza în pagină, alegi formatul și calitatea, apoi muți un cursor peste imagine ca să compari originalul cu varianta comprimată, cu mărimea fiecăreia afișată dedesubt. Totul se întâmplă în browserul tău, deci pozele nu sunt urcate nicăieri.

Câteva detalii care contează și ele

Pozele de pe telefon au de multe ori informații ascunse, inclusiv locul unde au fost făcute, dacă localizarea e pornită pentru cameră. Rețelele sociale le scot de obicei din copia pe care o văd ceilalți, dar un fișier urcat pe propriul site le poate păstra. Dacă salvezi poza din nou într-un instrument ca Squoosh sau o exporți dintr-un program de editare, datele astea de obicei rămân pe dinafară.

Dă-i fiecărei poze lățimea și înălțimea în pagină, ca browserul să-i păstreze locul potrivit înainte să se încarce. Altfel, textul sare când apare poza. Pozele de mai jos în pagină pot folosi lazy loading, care așteaptă până ajunge vizitatorul aproape de ele. Poza principală de sus trebuie să se încarce imediat.

La final, scrie o scurtă descriere, textul alternativ, pentru fiecare poză care contează. Cititoarele de ecran o citesc cu voce tare pentru vizitatorii nevăzători, motoarele de căutare o folosesc ca să înțeleagă imaginea și nu adaugă nimic la mărimea fișierului.