EN
← Înapoi la blog

Optical Web Design

Galeria foto pe site: câte poze și în ce ordine

Câte poze pui în galeria site-ului, în ce ordine le așezi ca să spună ceva, și ce setări tehnice le fac să se încarce repede și să fie găsite în Google.

Redacția Optical Design · redactor web3 min de citit

Într-o galerie de site pui atâtea poze câte arată lucruri diferite, nu tot ce ai în telefon. Prima poză e cea mai bună și cea mai reprezentativă, apoi le așezi în ordinea în care un client ar descoperi locul sau produsul. Tehnic, prima se încarcă imediat, restul pe măsură ce derulezi, toate cu dimensiuni stabilite și text alternativ.

Câte poze: fiecare trebuie să spună ceva nou

Nu există un număr corect pentru toată lumea. Există un test simplu: pentru fiecare poză, întreabă-te ce află clientul din ea și n-a aflat din cea de dinainte. Dacă răspunsul e „nimic”, poza iese.

Cele mai dese greșeli pe care le vedem:

  • zece poze cu aceeași cameră, din unghiuri aproape identice;
  • poze vechi, cu un decor care nu mai există;
  • poze de pe internet, care nu sunt ale locului tău;
  • poze întunecate sau strâmbe, puse „ca să fie mai multe”.

Pe telefon, primul ecran arată doar câteva poze, iar de ele depinde dacă omul derulează mai departe. Acolo pui cele mai bune. Restul e pentru cei deja interesați.

Ordinea: drumul clientului

Cea mai bună ordine e cea a unei vizite reale. Câteva exemple:

Tip de afacereOrdinea care funcționează
Pensiunefațada sau priveliștea, camera, baia, micul dejun, împrejurimile
Restaurantsala sau terasa, preparatele de bază, detalii, echipa la lucru
Atelier, servicerezultatul final, lucrul în desfășurare, atelierul, echipa
Salono lucrare reprezentativă, apoi lucrări pe categorii, apoi spațiul

Dacă ai multe poze, le împarți pe categorii cu titluri (Camere, Restaurant, Grădină) în loc de o singură galerie lungă. Clientul sare direct la ce îl interesează.

Pozele cu oameni recunoscibili, clienți sau angajați, le pui doar cu acordul lor.

Textele de lângă poze

Google înțelege o imagine și din ce e în jurul ei: legenda, titlul paginii, textul din apropiere. Recomandă și nume de fișiere descriptive, ca camera-dubla-balcon.jpg, în loc de IMG00023.JPG.

Textul alternativ (atributul alt) descrie poza pentru cine nu o vede: cititoarele de ecran și motoarele de căutare. Google cere un text util, care descrie poza în contextul paginii, fără înșirat de cuvinte-cheie. „Cameră dublă cu balcon spre munte” e bun. „Pensiune munte cazare cameră munte pensiune” e spam.

Pozele pur decorative, care nu adaugă informație, primesc text alternativ gol (alt=""). Așa cititoarele de ecran le sar. Dacă lipsește atributul cu totul, unele cititoare citesc cu voce tare numele fișierului.

Partea tehnică, pe scurt

Câteva setări fac diferența între o galerie care se deschide imediat și una care blochează pagina:

  1. Prima poză nu se încarcă leneș. Încărcarea leneșă (loading="lazy") e pentru pozele de mai jos. Cea vizibilă imediat, mai ales dacă e cea mai mare de pe ecran, se încarcă normal, altfel pagina pare lentă.
  2. Restul pozelor se încarcă leneș. Browserul le aduce doar când te apropii de ele. Browserele care nu înțeleg atributul îl ignoră, deci nu strică nimic.
  3. Lățime și înălțime pe fiecare poză. Așa browserul rezervă locul și pagina nu sare în timp ce se încarcă pozele.
  4. Poze în mai multe mărimi. Cu srcset, telefonul primește o variantă mică, ecranul mare una mare.
  5. Pozele ca imagini, nu ca fundal. Google găsește pozele din elementele img, nu pe cele puse ca fundal din CSS. Dacă vrei ca galeria să apară în Google Imagini, contează.

Despre formatul și mărimea fișierelor am scris în articolul despre pozele de pe site.

Galeria pe telefon

Pe telefon, o galerie bună se derulează cu degetul, deschide poza mare la atingere și se închide ușor. Sliderele care se schimbă singure la câteva secunde sunt greu de urmărit și îl obligă pe om să aștepte poza pe care a vrut s-o vadă. O grilă simplă, două poze pe rând, e de obicei mai clară.

Dacă vrei să refacem galeria site-ului tău, vezi ce includem pe pagina de servicii web.

Surse

  1. Google image SEO best practices, Google Search Centralelementul `img` față de fundalul CSS, nume de fișiere, text alternativ fără umplutură de cuvinte-cheie, textul din jurul pozei, `srcset`
  2. Browser-level image lazy loading, web.devnu se încarcă leneș pozele vizibile din prima, browserele care ignoră atributul, `width` și `height`
  3. Decorative Images, W3C WAItextul alternativ gol pentru pozele decorative și ce se întâmplă când atributul lipsește

Verificat: surse Xenia Pușcașu · editare Nora Vlăsceanu · SEO Mihnea Tăbăcaru

Vrei asta pentru firma ta?

Spune-ne în două rânduri ce ai nevoie. Revenim cu un plan și o ofertă.