Imaginile site-ului: format, greutate, text alternativ pentru un site rapid și accesibil
Ce format alegeți pentru imaginile site-ului, cum le păstrați ușoare pe fiecare ecran și cum scrieți textul alternativ ca pagina să rămână accesibilă.
- Nº
- 22
- Publicat
- Lectură
- 12 min
- Categorie
- Notes
- Scris de
- Revylio
Imaginile site-ului: format, greutate, text alternativ, răspunsul scurt
Cereți fotografii în format WebP sau AVIF, cu o variantă JPEG păstrată în atributul src, livrate la mărimea potrivită fiecărui ecran. Cereți și text alternativ de una sau două propoziții pentru fiecare imagine care transmite informație. Acestea sunt cele trei reguli pentru imaginile site-ului: format, greutate, text alternativ.
Textul alternativ este textul care descrie o imagine pentru cine nu o poate vedea. Google îl numește cel mai important atribut pentru metadatele unei imagini. În plus, același text îmbunătățește accesibilitatea pentru persoanele care nu văd imaginile. Greutatea unei imagini este mărimea fișierului, în kilobytes (KB), pe care browserul trebuie să o descarce.
Cele trei reguli se leagă între ele. Formatul și greutatea decid cât de repede apare pagina. Textul alternativ decide dacă un cititor de ecran poate spune ce arată imaginea. Tot textul alternativ ajută Google să înțeleagă subiectul imaginii. O greșeală la imagini atinge deci și viteza, și accesibilitatea.
Ghidul explică pe rând fiecare decizie, arată un exemplu complet și se încheie cu o listă de întrebări pentru agenția care vă face site-ul.
Imaginile sunt adesea cea mai mare parte din greutatea paginii
Imaginile sunt adesea cel mai mare contributor la mărimea totală a unei pagini, potrivit documentației Google Search Central despre imaginile din căutare. Google adaugă că asta poate face paginile lente și scumpe de încărcat. Imaginile sunt deci primul loc de verificat când un site se încarcă greu.
Greutatea unei imagini vine din două surse. Prima este formatul fișierului: aceeași fotografie poate cântări de câteva ori mai mult într-un format decât în altul. A doua este mărimea în pixeli. O imagine cât lățimea unui monitor mare, trimisă unui telefon, înseamnă date descărcate degeaba.
Ghidul Senuto despre optimizarea imaginilor dă un exemplu clar. Pentru aceeași imagine de 1080×1080 pixeli, fișierul PNG are 500 KB, JPG are 100 KB, WebP are 70 KB, iar AVIF are 50 KB. Cifrele ilustrează o tendință, nu o regulă valabilă pentru orice fotografie. Concluzia rămâne: formatul ales poate înmulți greutatea paginii.
Viteza are și un cost comercial, pe care îl puteți estima separat. Vedeți cum calculați costul unui site lent în cereri, din datele proprii. Ghidul de față rămâne la ce controlați direct: formatul, mărimea și descrierea fiecărei imagini.
Sursa: google.com
Formatele de imagine comparate: JPEG, PNG, GIF, WebP, AVIF și SVG
Alegeți formatul după conținutul imaginii: fotografiile merg în WebP sau AVIF, logo-urile și pictogramele în SVG. Google Search acceptă în atributul src al elementului img șapte formate: BMP, GIF, JPEG, PNG, WebP, SVG și AVIF. Oricare dintre formatele de mai jos poate deci apărea în căutare.
Două noțiuni ajută la citirea tabelului. O imagine raster este formată din pixeli; JPEG, GIF, PNG și WebP sunt imagini raster. O imagine vectorială, precum SVG, se bazează pe ecuații matematice și poate fi mărită oricât fără pierdere de calitate.
| Format | Tip | Exemplu de greutate, 1080×1080 (Senuto) | Când îl folosiți |
|---|---|---|---|
| JPEG | Raster, cu pierderi | 100 KB | Cel mai răspândit format pe web; varianta de rezervă pentru fotografii |
| PNG | Raster, fără pierderi | 500 KB | Când aveți nevoie de transparență și de calitate exactă |
| GIF | Raster | 150 KB | Rar; are cel mult 255 de culori și fișiere relativ mari |
| WebP | Raster | 70 KB | Fotografii și grafică; suportă transparență și animație |
| AVIF | Bazat pe codecul video AV1 | 50 KB | Fotografii, cu o variantă JPEG ca rezervă |
| SVG | Vectorial | Nu se aplică | Logo-uri, pictograme, ilustrații simple |
Compresia fără pierderi păstrează toate datele imaginii. Compresia cu pierderi reduce puțin calitatea, dar obține fișiere mai mici. O excepție merită reținută. Dacă vizitatorii descarcă imaginile pentru propriile documente, WebP sau AVIF nu sunt alegerea optimă, pentru că îi obligă să le recomprime.
Mărimea potrivită pe fiecare ecran: srcset, sizes și elementul picture
Un site bine făcut trimite fiecărui ecran imaginea la mărimea de care are nevoie, nu aceeași imagine mare tuturor. Atributele srcset și sizes îi spun browserului ce variante ale imaginii există și cum vor fi afișate. Browserul alege apoi singur varianta potrivită.
Elementul picture este un container care grupează mai multe versiuni ale aceleiași imagini. Browserul alege dintre ele după capacitățile dispozitivului, de exemplu densitatea pixelilor și mărimea ecranului. Prin picture, site-ul poate oferi AVIF sau WebP browserelor care le înțeleg și un format clasic celorlalte.
Google adaugă o condiție importantă. Unele browsere și crawlere nu înțeleg elementul picture sau atributul srcset. De aceea Google recomandă să specificați mereu o adresă de rezervă în atributul src. Google găsește imaginea din src chiar și când elementul img stă în interiorul unui picture.
Mai cereți două lucruri de la echipa care face site-ul. Primul este păstrarea raportului de aspect, adică a proporției dintre lățimea și înălțimea imaginii. Redimensionarea fără această proporție produce imagini deformate și întinse. Al doilea este un instrument care ușurează munca.
Sistemele de administrare precum WordPress pot face imaginile responsive mai ușor de folosit. CDN-urile de imagini (content delivery networks) pot transforma și optimiza conținutul imaginilor.
Textul alternativ: cine îl folosește și cum îl scrieți
Textul alternativ servește trei categorii de cititori: persoanele cu cititoare de ecran, vizitatorii cu internet lent și Google. Tehnologiile de asistență folosesc textul alternativ ca să descrie imaginile persoanelor nevăzătoare sau cu vedere scăzută. Fără el, utilizatorul știe doar că a ajuns la o imagine, nu și ce arată ea, explică ghidul Microsoft Support despre textul alternativ.
Textul alternativ apare și în locul imaginii când aceasta nu se încarcă din cauza unei conexiuni slabe. Google îl folosește, alături de algoritmi de viziune computerizată și de conținutul paginii, ca să înțeleagă subiectul imaginii.
Regulile de scriere pentru textul alternativ
Regulile de mai jos vin din ghidurile Microsoft, Webex Events și Google:
- Scrieți una sau două propoziții care descriu imaginea și contextul ei.
- Nu începeți cu „Imagine de”, pentru că cititoarele de ecran anunță deja imaginile.
- Nu umpleți textul cu cuvinte cheie; Google avertizează că asta poate face site-ul să pară spam.
- Nu lăsați o informație importantă doar ca text scris în imagine, pentru că cititoarele de ecran nu o pot citi.
Canva și Webex Events limitează textul alternativ la 250 de caractere, un reper util și pentru site. Unele ghiduri mai vechi spun că descrierile pot conține cuvinte cheie fără risc. Urmați totuși regula Google: descrieți imaginea pentru om. Cuvântul cheie apare doar dacă descrie firesc ce se vede.
Patru tipuri de imagini și textul alternativ potrivit fiecăruia
Nu orice imagine primește același tip de text alternativ; decizia depinde de rolul imaginii în pagină. Ghidul Webex Events împarte imaginile în patru tipuri. Tabelul de mai jos arată ce cere fiecare.
| Tipul imaginii | Ce este | Ce text alternativ primește |
|---|---|---|
| Informativă | Ajută la înțelegerea unui concept transmis pe pagină | O descriere de una sau două propoziții |
| Funcțională | Face legătura cu altă destinație, de exemplu o pictogramă cu link | Scopul linkului, nu aspectul pictogramei |
| Imagine de text | Conține text informativ, de exemplu un banner cu o ofertă | Același mesaj, scris ca text |
| Decorativă | Nu adaugă informație, de exemplu o imagine de fundal | Niciun text; se marchează ca decorativă |
Marcarea unei imagini ca decorativă îi spune cititorului de ecran să treacă peste ea. Microsoft explică un avantaj în plus: utilizatorii aud că obiectul este decorativ. Astfel știu că nu le lipsește nicio informație importantă. Bordurile stilistice sunt un exemplu tipic de element decorativ.
Greșeala frecventă este inversă: o imagine informativă tratată ca decorativă. Un grafic cu rezultatele firmei sau o fotografie de produs poartă informație. Pentru un vizitator care nu le vede, fără text alternativ, acea informație nu există.
Numele fișierelor și imaginile puse ca fundal prin CSS
Numele fișierului contează pentru că cititoarele de ecran îl citesc cu voce tare când imaginea nu are text alternativ. Un vizitator nevăzător aude atunci un nume precum „IMG_4821.jpg”. Ghidul Webex Events descrie experiența ca frustrantă și neplăcută. Un nume descriptiv, de felul „canapea-extensibila-gri.webp”, este o plasă de siguranță, nu un înlocuitor pentru textul alternativ.
A doua capcană sunt imaginile de fundal. Acestea se încarcă prin CSS, codul care stabilește aspectul paginii, nu prin elemente img. Google nu indexează imaginile CSS. O astfel de imagine nu are nici atribut alt, deci nu poate primi text alternativ. Fundalul este potrivit doar pentru imaginile pur decorative.
La Svennis, când preluăm un site pentru refacere, căutăm întâi fotografiile importante puse ca fundal prin CSS. Le mutăm în elemente img cu text alternativ, ca Google să le poată indexa și cititoarele de ecran să le poată descrie.
Cereți agenției să vă spună, pentru fiecare tip de pagină, care imagini sunt fundal și care sunt conținut. Răspunsul arată rapid dacă imaginile de produs, echipă sau proiecte pot ajunge în căutare.
Cum alege Google imaginea care apare în căutare
Google alege complet automat imaginea afișată pentru o pagină, folosind mai multe surse. Puteți totuși indica imaginea preferată în trei feluri. Primul este proprietatea schema.org primaryImageOfPage. Al doilea este o proprietate image pe entitatea principală a paginii. Al treilea este eticheta meta og:image.
Schema.org este un vocabular de date structurate, adică informații despre pagină scrise ca să le citească mașinile. Atributul image este obligatoriu pentru ca pagina să fie eligibilă pentru o insignă și un rezultat îmbogățit în Google Images. Pentru o pagină de produs sau de rețetă, câmpul acesta merită verificat la lansare.
Imaginile găzduite pe alt domeniu pot fi indexate și ele. Spre deosebire de sitemap-urile obișnuite, un sitemap de imagini poate include în elementele image:loc adrese de pe alte domenii. Asta vă permite să găzduiți imaginile pe un CDN. Un sitemap este fișierul care îi arată lui Google paginile și fișierele site-ului.
Google oferă și o opțiune de control asupra afișării. Puteți refuza afișarea imaginilor la rezoluție completă direct din site-ul dumneavoastră în rezultatele Google. Pentru asta, serverul răspunde cererilor venite de la domenii Google cu codul HTTP 200 sau 204 fără conținut. Google afișează atunci o miniatură generată la indexare. Google precizează că acest comportament nu este considerat înșelăciune și nu duce la penalizări manuale.
Exemplu lucrat: fotografia unui produs, de la fișier la pagină
Exemplul urmărește o fotografie de produs pentru un magazin de mobilă, publicată într-un constructor de site-uri precum WebWave. Fotograful trimite un fișier PNG mare. Pașii de mai jos îl transformă într-o imagine ușoară și accesibilă.
- Formatul. Convertiți fotografia în WebP sau AVIF și păstrați o variantă JPEG pentru atributul src. Unii furnizori de găzduire, precum WP Engine și Cloudways, folosesc instrumentul cwebp pentru conversie.
- Numele fișierului. Redenumiți fișierul descriptiv, de exemplu „canapea-extensibila-gri-trei-locuri.webp”.
- Mărimea. Generați câteva lățimi pentru srcset și sizes, cu același raport de aspect.
- Textul alternativ. Selectați imaginea, deschideți „Descrierea imaginii și SEO” din panoul de setări și completați câmpul „Text alternativ (ALT)”. Un text bun: „Canapea extensibilă gri cu trei locuri, deschisă ca pat într-un living luminos.”
- Galeriile. Pentru un slider sau o galerie, apăsați pictograma „Roată” și deschideți fila „Modificarea imaginilor”. Acolo completați „Titlul imaginii” și „Text alternativ (ALT)” pentru fiecare fotografie.
Un detaliu prinde multe echipe nepregătite. Dacă bannerul a fost făcut în Canva, unde textul alternativ se adaugă din Mai multe, apoi Text alternativ, textul nu ajunge pe site prin descărcare. Canva nu include textul alternativ în fișierele PNG descărcate. Textul trebuie completat din nou în site.
Ce înseamnă imaginile accesibile pentru o firmă din România
Pentru o firmădin România, textul alternativ se scrie în limba paginii, adică în română, cu diacritice complete. Un text alternativ în engleză pe o pagină în română îl încurcă pe vizitatorul care folosește cititorul de ecran. Atributul alt contează și pentru vizibilitate: un curs românesc de dezvoltare web îl numește, alături de marcajele h1 și h2, deosebit de important pentru vizibilitatea unui site.
Accesibilitatea imaginilor face parte din obligațiile mai largi ale site-ului. Ce cere Actul European privind Accesibilitatea și ce verificați acum găsiți în ghidul despre accesibilitatea site-ului firmei după EAA. Textul alternativ corect este unul dintre cele mai simple puncte de rezolvat din acea listă.
Instrumentele automate ajută, dar nu decid în locul dumneavoastră. Microsoft 365 poate genera text alternativ cu inteligență artificială, iar utilizatorul îl aprobă. Unele platforme nu permit deloc text alternativ la importul de date; Webex Events, de exemplu, îl acceptă doar la încărcarea manuală. Dacă vă importați catalogul de produse, verificați după import ce imagini au rămas fără descriere.
Textul alternativ bun îl scrie cine cunoaște produsul, nu neapărat designerul. Hotărâți din timp cine se ocupă, la fel ca pentru restul textelor; vedeți ghidul despre cine pregătește conținutul site-ului nou.
Lista de verificare pentru imaginile site-ului înainte de lansare
Întrebările din tabel vă ajută să verificați imaginile unui site nou înainte de lansare. Puneți-le agenției și cereți să vi se arate răspunsul pe o pagină reală, nu doar confirmat verbal.
| Întrebare pentru agenție | Răspunsul pe care îl căutați |
|---|---|
| În ce format livrați fotografiile? | WebP sau AVIF, cu JPEG în atributul src ca rezervă |
| Ce primește un telefon față de un monitor mare? | Variante diferite, prin srcset și sizes sau prin elementul picture |
| Cum livrați logo-ul și pictogramele? | În SVG, ca să rămână clare la orice mărime |
| Cine scrie textul alternativ și unde îl verific? | O persoană numită, cu una sau două propoziții pe imaginea informativă |
| Cum tratați imaginile decorative? | Marcate ca decorative, fără text alternativ |
| Ce imagini importante sunt puse ca fundal prin CSS? | Niciuna; fotografiile de conținut stau în elemente img |
| Ce imagine propunem lui Google pentru fiecare pagină? | og:image sau date schema.org, plus atributul image unde e cazul |
Includeți aceste cerințe în documentul de pornire al proiectului. Ghidul despre brieful pentru refacerea site-ului firmei arată unde se potrivesc ele printre celelalte cerințe.
Pașii următori pentru imaginile site-ului dumneavoastră
Începeți cu un inventar scurt al imaginilor de pe site-ul actual. Alegeți trei pagini importante: prima pagină, o pagină de serviciu și o pagină de produs sau proiect. Pentru fiecare, notați ce imagini apar și dacă sunt informative sau decorative.
Apoi verificați trei lucruri pe aceste pagini:
- formatul și greutatea fiecărei fotografii, în KB;
- existența și calitatea textului alternativ;
- imaginile importante puse ca fundal prin CSS.
Dacă descoperiți fotografii PNG de sute de KB, texte alternative lipsă sau imagini de conținut puse ca fundal, problema nu se rezolvă de obicei imagine cu imagine. Ea vine din felul în care a fost construit site-ul. Atunci merită discutată o refacere a site-ului care tratează viteza și accesibilitatea împreună.
Dacă vreți să știți ce intră în bugetul unui site nou, inclusiv optimizarea imaginilor, citiți ghidul despre ce ar trebui să includă prețul unui site de prezentare. Lista de verificare de mai sus rămâne utilă oricum: o puteți folosi la orice agenție.
Surse
- Google Search Central: Image SEO Best Practices
- web.dev: Learn Images
- WebWave: Cum setez eticheta Alt pentru imagini
- Webex Events: Adăugați text alternativ la imagini, cele mai bune practici
- Microsoft Support: Adăugarea textului alternativ
- Senuto: Optimizarea imaginilor pentru site
- Canva: Crearea și editarea textului alternativ
- infoap.ro: Site-uri și aplicații pentru web