Optimizarea imaginilor pentru SEO: WebP, alt text și viteză

Optimizarea imaginilor pentru SEO înseamnă să alegi un format modern (de obicei WebP), să le dai dimensiunea de care are nevoie pagina, să le numești și să le descrii clar și să le încarci astfel încât să nu încetinească pagina. Rezultatul este dublu: pagini mai rapide, deci Core Web Vitals mai bune, și imagini pe care Google le poate înțelege și indexa în Google Images.

Imaginile sunt adesea cea mai grea parte dintr-o pagină și una dintre cele mai ușor de îmbunătățit. Nu cer rescriere de cod, ci o disciplină simplă de lucru. Mai jos găsești formatele, pașii de comprimare, codul HTML corect, regulile pentru alt text și o listă de verificare. Este una dintre părțile cu cel mai bun raport efort–rezultat din optimizarea SEO on-page.

De ce contează imaginile pentru SEO?

Trei motive, de la cel mai practic la cel mai strategic:

1. Viteza. Imaginile mari încetinesc încărcarea. Pe multe pagini, elementul cel mai mare vizibil la încărcare (LCP, Largest Contentful Paint) este o imagine; conform web.dev, un LCP bun este de cel mult 2,5 secunde. Cum se leagă de poziții, vezi ghidul despre Core Web Vitals și viteza site-ului.
2. Stabilitatea paginii. O imagine fără dimensiuni declarate face textul să sară când se încarcă. Acesta este CLS (Cumulative Layout Shift), un alt indicator Core Web Vitals.
3. Vizibilitatea în Google Images și în rezultatele cu imagini. Pentru produse, rețete, destinații sau design, căutarea de imagini aduce vizite reale.

Plus un motiv care nu ține de poziții: accesibilitatea. Alt text-ul este modul în care o persoană care folosește cititor de ecran află ce arată imaginea.

Ce format alegi: JPEG, PNG, WebP, AVIF sau SVG?

Alegerea depinde de tipul imaginii. Google Images indexează formatele BMP, GIF, JPEG, PNG, WebP, SVG și AVIF, deci poți folosi liber formatele moderne.

Documentația Google a proiectului WebP indică faptul că imaginile WebP cu pierderi sunt cu 25–34% mai mici decât JPEG la un indice de calitate SSIM echivalent, iar cele fără pierderi cu 26% mai mici decât PNG. Cifrele sunt medii obținute în testele Google și depind de imagine, deci tratează-le ca ordin de mărime.

Regula de lucru: WebP implicit, SVG pentru logouri și pictograme, AVIF opțional pentru imaginile mari, cu fallback WebP sau JPEG, JPEG/PNG doar acolo unde ai nevoie de compatibilitate.

Cum dimensionezi și comprimi o imagine, pas cu pas

1. Află dimensiunea la care se afișează. Dacă imaginea ocupă 800 px lățime în pagină, un original de 4000 px este risipă. Pentru ecrane dense, trimite versiunea de aproximativ 2× lățimea de afișare, nu mai mult.
2. Redimensionează înainte de încărcare. Nu te baza pe CSS pentru a micșora un fișier uriaș; browserul îl descarcă oricum întreg.
3. Comprimă. Pentru WebP cu pierderi, o calitate între 75 și 82 dă de regulă rezultate bune (orientativ, nu o regulă); verifică vizual, mai ales pe fețe, texte și degradeuri.
4. Convertește. O comandă simplă cu unealta cwebp, de la Google (al doilea exemplu convertește un întreg folder):

cwebp -q 80 aspirator-robot-x200.jpg -o aspirator-robot-x200.webp

for f in *.jpg; do cwebp -q 80 "$f" -o "${f%.jpg}.webp"; done

1. Elimină metadatele inutile (EXIF mare, profile de culoare redundante), dacă nu ai nevoie de ele.
2. Creează variante de mărimi (de exemplu 480, 800, 1200 px) pentru srcset.
3. Verifică vizual rezultatul pe telefon și pe desktop. O comprimare prea agresivă se vede pe produse și pe fotografii de oameni.

Repere orientative de greutate, formulate de noi ca punct de pornire, nu ca regulă Google: imagine principală (hero) sub 150–200 KB, imagine din articol sub 100 KB, miniatură sub 30 KB. Dacă un test de viteză arată că imaginile sunt încă problema, strânge mai tare.

Cum numești fișierele de imagine

Numele de fișier este un semnal mic, dar gratuit. Google recomandă nume descriptive: aspirator-robot-x200-negru.webp spune ceva, IMG_4821.webp nu spune nimic.

• Scrie cu litere mici, cuvinte separate prin cratimă (-), fără spații, diacritice sau caractere speciale. Documentația Google pentru URL-uri recomandă cratima, nu liniuța de subliniere.
• Descrie subiectul, nu repeta cuvântul-cheie: mobila-living-stejar-masiv.webp, nu mobila-mobila-living-mobila-ieftina.webp.
• Păstrează numele stabil. Dacă îl schimbi, schimbi adresa imaginii, iar linkurile și indexarea veche se pierd.

Dacă ai de corectat multe nume cu diacritice, corectorul de diacritice și slug transformă rapid un text în formă curată pentru URL și fișiere.

Cum scrii un alt text bun

Atributul alt oferă o alternativă text pentru imagine. Îl citește cititorul de ecran, apare dacă imaginea nu se încarcă și îl folosește Google, alături de textul din jur, ca să înțeleagă ce arată imaginea. Tutorialul W3C împarte imaginile în mai multe categorii (cele mai frecvente sunt patru), iar tratamentul diferă:

Reguli de scris:

1. Descrie ce se vede și ce contează în context. Pentru un magazin: produs, culoare, model, uneori vedere. „Aspirator robot negru, vedere din față, cu stație de golire”.
2. Fii concis. Nu există o limită oficială; ca convenție, sub aproximativ 125 de caractere se citește comod, dar descrierile complexe pot fi mai lungi.
3. Nu începe cu „imagine cu” sau „fotografie cu”. Cititorul de ecran anunță deja că e o imagine.
4. Nu înghesui cuvinte-cheie. Un alt precum „aspirator robot ieftin aspirator robot preț” este spam și dăunează accesibilității.
5. Include cuvântul-cheie doar dacă descrie natural imaginea.
6. Nu pune text important doar în imagine. Dacă imaginea conține text, repetă-l în alt sau, mai bine, în pagină.

Exemple:

• Slab: alt="aspirator", alt="IMG_4821", alt="aspirator robot ieftin cel mai bun preț aspirator robot".
• Bun: alt="Aspirator robot X200 negru, văzut de sus, pe parchet".

Cum arată codul HTML corect

Elementul <img> bine scris reunește toate recomandările. Pentru imaginea principală de deasupra pliului:

<picture>
  <source type="image/avif" srcset="/img/robot-800.avif 800w, /img/robot-1200.avif 1200w" sizes="(max-width: 900px) 100vw, 800px">
  <source type="image/webp" srcset="/img/robot-800.webp 800w, /img/robot-1200.webp 1200w" sizes="(max-width: 900px) 100vw, 800px">
  <img src="/img/robot-800.jpg" width="800" height="533"
       alt="Aspirator robot X200 negru, văzut de sus, pe parchet"
       fetchpriority="high" decoding="async">
</picture>

Pentru imaginile de sub pliu:

<img src="/img/filtru-480.webp" width="480" height="320"
     alt="Filtrul HEPA scos din aspirator, în mână"
     loading="lazy" decoding="async">

Ce face fiecare element:

• width și height rezervă spațiul și previn salturile de aspect (CLS).
• srcset și sizes lasă browserul să aleagă versiunea potrivită ecranului.
• <picture> oferă formate alternative: browserul alege prima sursă pe care o înțelege.
• loading="lazy" amână încărcarea imaginilor aflate departe de zona vizibilă.
• fetchpriority="high" indică browserului că imaginea principală e importantă; browserele care nu îl cunosc îl ignoră.
• decoding="async" permite decodarea fără blocarea restului paginii.

Încărcarea leneșă (lazy loading) fără să strici LCP

loading="lazy" este una dintre cele mai eficiente optimizări, dar are o capcană: dacă o pui pe imaginea principală, aceasta se încarcă mai târziu și LCP se înrăutățește. Recomandarea web.dev este ca imaginile din prima zonă vizibilă să nu fie încărcate leneș.

Regula simplă:

1. Prima imagine mare (hero, imaginea principală a produsului): fără loading="lazy", cu fetchpriority="high".
2. Toate celelalte imagini din afara zonei vizibile: loading="lazy".
3. Verifică în testul de viteză care este elementul LCP; dacă e o imagine, prioritizează-o. Pentru măsurare poți folosi testul de viteză Core Web Vitals.

Din punct de vedere SEO, încărcarea leneșă nativă este în general în regulă, deoarece Google poate vedea imaginile încărcate astfel. Evită soluțiile care pun adresa reală a imaginii doar într-un atribut personalizat, activat de scripturi complicate.

Cum faci imaginile indexabile în Google Images

Documentația Google pentru imagini cere câteva lucruri verificabile:

1. Folosește <img> cu src. Google nu indexează imagini puse doar ca fundal CSS.
2. Pune imaginea lângă text relevant. Contextul din jur (titluri, paragraf, legendă) ajută la înțelegere.
3. Dă-i un nume descriptiv și un alt text bun. Vezi mai sus.
4. Nu bloca imaginile în robots.txt. Crawlerul de imagini al Google se numește Googlebot-Image.
5. Include imaginile importante în sitemap, dacă nu sunt ușor de găsit prin pagini; pentru sitemap, vezi și ghidul despre sitemap XML.
6. Folosește adrese stabile. Imaginile mutate fără redirect dispar din index.
7. Conținut original. O imagine de stoc folosită pe mii de site-uri are șanse mici să iasă în față.

Dacă vrei imagini de produs afișate cu informații în rezultate, completează și datele structurate de produs; ghidul pentru date structurate schema.org arată cum.

Imaginile în WordPress și în magazine online

Pe WordPress, versiunile actuale generează automat mai multe dimensiuni ale fiecărei imagini și adaugă srcset; poți încărca WebP direct și multe teme folosesc loading="lazy" implicit. Atenție la două lucruri: tema poate pune lazy loading și pe imaginea principală, iar pluginurile de optimizare pot comprima prea agresiv. Setările generale sunt în ghidul despre WordPress SEO înainte de lansare.

În magazine online, volumul de imagini este mare: galerii de produs, miniaturi în categorii, bannere. Aplici aceleași reguli, cu priorități clare:

• imaginea principală a produsului: calitate bună, fetchpriority="high" pe pagina de produs;
• galeria: lazy loading pentru imaginile secundare;
• miniaturile din categorie: dimensiuni mici, specifice, nu imaginea completă redusă prin CSS;
• alt text cu nume de produs, culoare, model, nu cu textul generic al categoriei.

Vezi și ghidul de SEO pentru magazine online, unde imaginile sunt un capitol important.

Lista de verificare pentru imagini

Greșeli frecvente

• Încărcarea fotografiilor direct din aparat, de 4000 px și câțiva MB.
• Redimensionare doar prin CSS, fără micșorarea fișierului.
• Lazy loading pe imaginea LCP, care o întârzie.
• Alt text lipsă, generic sau înșirat de cuvinte-cheie.
• Nume de fișier tip IMG_1234.
• Text important doar în imagine, pe care Google și cititoarele de ecran nu îl pot folosi.
• Imagini fără width și height, care produc salturi de aspect.
• Imagini pe CSS background pentru conținut care ar trebui indexat.
• Comprimare prea agresivă care strică produse sau fețe.
• Schimbarea numelor sau a adreselor fără redirecturi, care duce la imagini rupte.

Când nu se aplică sau are limite

• Imaginile nu compensează un conținut slab; ele sprijină o pagină bună.
• Alt text-ul nu este un câmp pentru „SEO ascuns”; accesibilitatea are prioritate.
• Traficul din Google Images este valoros doar în anumite domenii; pentru servicii B2B abstracte poate fi neglijabil.
• AVIF nu merită întotdeauna efortul: câștigul față de WebP depinde de imagine, iar codarea e mai lentă.
• Pe site-uri cu puține imagini sau deja rapide, câștigul este mic; prioritizează după rezultatul testului de viteză.
• Nu poți promite poziții doar din imagini; ele ajută la viteză, accesibilitate și vizibilitate suplimentară.

Concluzie și pași următori

Imaginile bine pregătite sunt o investiție mică: o dată stabilit fluxul (redimensionare, WebP, nume, alt), fiecare imagine nouă urmează aceeași rețetă. Obții pagini mai rapide, mai accesibile și mai ușor de înțeles pentru motoare.

Ce poți face în această săptămână:

1. Rulează un test de viteză pe cele mai vizitate cinci pagini și notează care este elementul LCP.
2. Convertește în WebP imaginile cele mai grele și redimensionează-le la mărimea afișării.
3. Verifică atributele width, height și loading pe imaginea principală și pe celelalte.
4. Scrie alt text pentru imaginile informative de pe paginile comerciale.
5. Redenumește fișierele noi după regula descriptivă, cu cratime.

Dacă site-ul are mii de imagini sau un magazin mare, un plan de optimizare SEO on-page poate defini regulile de încărcare și poate corecta lotul existent, ca să nu rămână totul pe seama fiecărui editor în parte.