Imagini responsive în WordPress: cum funcționează srcset și sizes

Dacă ai deschis vreodată același site pe telefon și pe un monitor mare, ai simțit deja de ce contează imaginile responsive în WordPress și atributul srcset. Un vizitator de pe mobil nu are niciun motiv să descarce o fotografie de 2000 de pixeli lățime, gândită pentru desktop — o plătește în date consumate și în secunde de așteptare. Din fericire, WordPress se ocupă de aproape toată logica în locul tău, prin două atribute HTML pe care merită să le înțelegi: srcset și sizes.

Ce fac imaginile responsive în WordPress: srcset și sizes

srcset este o listă de variante ale aceleiași imagini, fiecare cu lățimea ei reală în pixeli. În loc de un singur fișier, browserul primește un mic „meniu”: aceeași poză la 400, 768, 1024 sau 1536 de pixeli lățime.

Fiecare variantă este însoțită de un „descriptor de lățime”, scris ca 768w. Cifra nu este o comandă, ci o informație: „acest fișier are 768 de pixeli lățime”. Pe baza ei, browserul decide singur care variantă i se potrivește.

sizes completează tabloul. El spune browserului cât spațiu va ocupa imaginea pe ecran — de exemplu „pe mobil, cât tot ecranul; pe desktop, cel mult 720px”. Cu informația asta, plus densitatea ecranului (Retina și celelalte), browserul alege cel mai mic fișier care încă arată clar.

Ca să vezi cum arată în practică, un fragment tipic generat de WordPress conține ceva de forma srcset="poza-768w.jpg 768w, poza-1024w.jpg 1024w" și sizes="(max-width: 768px) 100vw, 768px". Nu trebuie să-l scrii tu de mână — dar recunoscându-l, îți dai seama imediat dacă o imagine chiar beneficiază de mecanism sau a fost lăsată pe dinafară.

Cum alege browserul fișierul potrivit

Ordinea în care se întâmplă totul contează. Browserul citește mai întâi sizes, calculează câți pixeli reali îi trebuie, apoi caută în srcset varianta care acoperă exact acea nevoie, fără risipă. Decizia se ia înainte ca pagina să fie desenată, așa că imaginea nu se descarcă niciodată de două ori.

Rezultatul practic este simplu: pe un telefon cu ecran îngust se descarcă poate 200 KB, iar pe un desktop 4K ajunge versiunea mare. Același cod HTML, imagini diferite livrate fiecărui vizitator, fără JavaScript și fără efort din partea ta.

Ce face WordPress automat

De la versiunea 4.4, WordPress adaugă singur srcset și sizes oricărei imagini inserate prin editor sau afișate cu funcții precum the_post_thumbnail(). Când urci o fotografie, platforma generează mai multe dimensiuni intermediare, iar acestea devin exact variantele din srcset.

Dimensiunile standard pe care le folosește sunt:

• thumbnail — 150×150px, pentru miniaturi;
• medium — maximum 300px, pentru conținut îngust;
• medium_large — 768px, ideal pentru tablete;
• large — 1024px, pentru coloane largi;
• full — fișierul original, exact așa cum l-ai urcat.

Concluzia e liniștitoare: dacă urci imagini suficient de mari și lași WordPress să-și facă treaba, ai deja imagini responsive funcționale, fără niciun plugin instalat.

Când srcset nu este suficient

Automatizarea are însă limitele ei, iar aici apar cele mai frecvente pierderi de viteză. Valoarea implicită a atributului sizes presupune că imaginea ocupă toată lățimea ecranului (100vw). Dacă în realitate poza stă într-o coloană de 700px, browserul tot descarcă o variantă prea mare — iar diferența se simte la fiecare încărcare.

Alte situații în care mecanismul nu te ajută:

• imaginile puse ca background-image din CSS, care nu primesc niciodată srcset;
• fotografiile urcate deja mici, fără variante intermediare de generat;
• lipsa atributelor width și height, care produce sărituri de layout (CLS).

În aceste cazuri merită să corectezi manual atributul sizes sau să treci la un format modern precum WebP. Este exact genul de reglaj fin pe care îl tratăm în serviciul de optimizare a vitezei WordPress, unde câțiva kilobytes economisiți la fiecare imagine se adună într-un LCP vizibil mai bun.

Cum verifici că totul funcționează

Nu trebuie să te bazezi pe presupuneri. Deschide site-ul în Chrome, apasă F12 și mergi la tabul Network. Filtrează după imagini, reîncarcă pagina și uită-te la dimensiunea reală descărcată pentru fiecare fișier. Dacă pe mobil vezi imagini de 1–2 MB, sigur ceva nu este reglat corect.

Un al doilea test rapid: dă clic dreapta pe imagine și alege „Inspect”. Dacă în cod vezi atributele srcset și sizes populate, mecanismul este activ. Dacă lipsesc cu totul, imaginea a fost probabil inserată printr-un mod care ocolește WordPress și merită corectată.

Documentația despre imagini responsive de la web.dev explică în detaliu logica descriptorilor, dacă vrei să sapi mai adânc în subiect. Iar dacă preferi să afli rapid unde pierzi viteză, fără să testezi manual fiecare pagină, un audit gratuit îți arată exact ce imagini trag site-ul în jos.

Concluzie

Imaginile responsive nu sunt o funcție exotică, ci fundația unui site rapid pe orice ecran. WordPress îți oferă mecanismul din start prin srcset și sizes; rolul tău rămâne să urci imagini suficient de mari, să corectezi valoarea sizes acolo unde layoutul o cere și să verifici rezultatul direct în browser. Fă asta constant și fiecare vizitator — pe telefon sau pe desktop — primește exact imaginea de care are nevoie, nici un kilobyte în plus.