O imagine trebuie să fie accesibilă, relevantă și descrisă potrivit
Folosește elemente HTML standard cu URL-uri stabile, răspunsuri corecte, dimensiuni intrinseci și variante responsive. Scrie alt pentru scopul imaginii, folosește alt gol pentru decor și nu păstra informația importantă doar într-o imagine.
- Returnează bytes de imagine cu 200 și Content-Type corect.
- Folosește alt informativ pentru imagini relevante și alt="" pentru cele decorative.
- Declară width și height pentru rezervarea spațiului.
- Păstrează un src fallback când folosești picture, srcset sau lazy loading.
Descoperire și livrare
Elementele img și URL-urile src sunt cea mai robustă cale de descoperire. Imaginile CSS background nu sunt echivalente pentru indexare sau accesibilitate, iar URL-urile client-only depind de randare.
Urmărește redirecturile către o resursă HTTPS stabilă, verifică media type de imagine și asigură acces anonim fără blocare prin autentificare, robots sau hotlink protection.
Textul alternativ depinde de context
- Imagine informativă Descrie concis informația vizuală utilă în contextul textului din jur.
- Imagine funcțională Descrie acțiunea sau destinația când imaginea este singurul conținut al controlului.
- Imagine decorativă Folosește atribut alt gol pentru a fi ignorată de tehnologiile asistive.
- Imagine complexă Oferă alt scurt și o explicație detaliată ori echivalent de date în apropiere.
Imagini responsive și performante
Setează width și height intrinseci sau aspect ratio pentru reducerea layout shift. Oferă variante potrivite prin srcset și sizes, cu src normal și degradare sigură pentru formate moderne.
Încarcă lazy imaginile sub fold, dar nu întârzia inutil imaginea hero. Comprimă la calitatea vizuală necesară și testează resursa finală, nu doar extensia fișierului.
Repară imaginile de la răspuns la semnificație
- 01Corectează URL-urile rupte, redirectate, non-image și mixed content.
- 02Clasifică fiecare alt lipsă sau gol după scopul imaginii.
- 03Adaugă dimensiuni intrinseci și variante responsive.
- 04Păstrează imaginile importante în HTML descoperibil cu src fallback.
- 05Retestează performanța și accesibilitatea pe pagini reprezentative.
Referințe oficiale
Recomandările tehnice din acest ghid sunt aliniate cu următoarele surse primare.