Pe majoritatea site-urilor, imaginile sunt partea cea mai grea a paginii. Nu textul, nu codul: fotografiile. O singură fotografie mare, încărcată direct de pe telefon sau din aparatul foto, poate cântări mai mult decât tot restul paginii la un loc. Înmulțește asta cu o galerie sau cu un articol lung, și o pagină care ar trebui să pară rapidă ajunge să se târască.
Vestea bună e că imaginile sunt o problemă rezolvată, iar cea mai mare parte a soluției poate fi lăsată în seama site-ului, nu a persoanei care încarcă poza. Scopul spre care lucrăm e simplu: imagini care arată clar pe orice ecran, se încarcă repede și nu cer aproape nimic în plus de la editor. Încarci o fotografie bună, iar site-ul se ocupă de rest.
Iată cum arată asta în practică.
De ce cântăresc imaginile atât de mult
Un aparat foto modern, inclusiv cel din telefon, produce imagini uriașe. Sunt mult mai mari decât are nevoie orice site, adesea de câteva ori mai late decât spațiul pe care îl vor umple și pline de detalii pe care nu le vezi pe un ecran. Puse pe pagină așa cum sunt, îl obligă pe fiecare vizitator să descarce toate acele date înainte ca poza să apară, iar pe o conexiune mobilă așteptarea se simte.
Soluția nu e să le ceri editorilor să își micșoreze pozele înainte de încărcare. E migălos, ușor de greșit și o pierdere de timp pentru toată lumea. Soluția e să lași site-ul să ia un original bun și să producă exact versiunile de care are nevoie. E o muncă la care un calculator se pricepe foarte bine și cu care un om n-ar trebui să-și bată capul.
Dimensiunea potrivită pentru fiecare ecran
Un telefon, un laptop și un monitor mare de birou au nevoie fiecare de altă dimensiune a aceleiași imagini. Dacă trimiți versiunea de desktop către un telefon, irosești mare parte din ce descarcă, iar o versiune mică pe un ecran mare arată ștearsă și încețoșată. Răspunsul e să pregătești mai multe dimensiuni ale fiecărei imagini și să lași browserul să o aleagă pe cea care se potrivește ecranului din fața lui.
E ceva ce configurăm o singură dată, ca parte din construirea site-ului, și apoi se aplică fiecărei imagini pe care o va încărca vreodată un editor. Editorul adaugă o fotografie. În culise, site-ul generează un set de dimensiuni și îi dă fiecărui vizitator exact varianta potrivită dispozitivului lui. Nimeni nu mai trebuie să se gândească la asta.
Contează mai mult decât pare, pentru că diferența nu e subtilă. Un vizitator de pe telefon, adesea pe o conexiune mai lentă și plătind pentru date, e exact persoana cea mai tentată să renunțe la o pagină care se împotmolește. O imagine croită pe măsura ecranului lui, în loc de una făcută pentru un monitor mare de birou, poate face diferența dintre o pagină care apare pe loc și una pe care n-o mai așteaptă.
Formate moderne, fără teme pentru acasă
Formatele de imagine au evoluat mult, iar cele noi stochează aceeași poză la o fracțiune din dimensiunea celor vechi, fără vreo pierdere vizibilă de calitate. Folosirea lor e una dintre cele mai eficiente metode de a face un site să pară mai rapid, și nu ar trebui să-l coste pe editor niciun strop de efort.
Așa că lăsăm site-ul să convertească imaginile automat în formate moderne, păstrând în același timp o versiune acceptată peste tot pentru rarele browsere care mai au nevoie de ea. Editorul încarcă o poză normală, într-un format normal. Site-ul trimite discret o versiune mai ușoară oricui are un browser care o poate afișa. Rezultatul e o pagină mai rapidă și un editor care n-a trebuit să învețe niciodată cum se numesc formatele astea.
Se încarcă doar ce ajung oamenii să vadă
Cele mai multe pagini conțin imagini până la care un vizitator s-ar putea să nu deruleze niciodată. Să le încarci pe toate în clipa în care se deschide pagina înseamnă să-i faci pe oameni să aștepte poze aflate încă mult mai jos. Încărcarea amânată (lazy loading) rezolvă asta: imaginea așteaptă până când vizitatorul e pe punctul să ajungă la ea, așa că partea de sus a paginii apare repede, iar restul sosește exact la timp.
Ca și celelalte tehnici de aici, e ceva de care site-ul se ocupă singur. Vizitatorul primește o pagină care răspunde din prima clipă, imaginile de mai jos se încarcă pe măsură ce devin relevante, iar editorul, încă o dată, n-a făcut nimic altceva decât să încarce o fotografie.
O singură încărcare, multe rezultate
Firul roșu al tuturor acestor tehnici e că treaba editorului rămâne simplă. Tentația, când performanța contează, e să împingi munca spre oamenii care adaugă conținut: redimensionează asta, convertește aia, comprimă înainte să încarci. Noi credem că e exact pe dos. Site-ul e locul potrivit pentru munca asta, pentru că o poate face consecvent, de fiecare dată, fără ca cineva să fie nevoit să-și amintească de ea.
Așa că fluxul de lucru spre care țintim e și cel mai simplu de făcut bine: alegi o fotografie bună, scrii o descriere scurtă și publici. Redimensionarea, formatele, dimensiunile pentru fiecare ecran, încărcarea amânată, toate se întâmplă automat. Un editor care se pricepe să aleagă și să așeze imagini nu trebuie să devină și expert în compresia lor.
Mai e și un câștig discret de fiabilitate. Când munca e automată, se întâmplă la fel de fiecare dată, pe fiecare pagină, fie că editorul are o zi atentă sau una pe fugă. Nimic nu depinde de cineva care să-și amintească setarea corectă de export pe ultima sută de metri. Site-ul ține standardul, așa că standardul rezistă și când oamenii sunt ocupați, ceea ce, pe parcursul câtorva ani, înseamnă mai tot timpul.
Textul alternativ, singurul lucru pe care merită să-l scrii tu
O singură parte din munca cu imaginile chiar îi revine unui om, și e una mică: textul alternativ (alt text). E scurta descriere scrisă a unei imagini pe care un cititor de ecran o rostește cu voce tare pentru cineva care nu poate vedea poza și pe care motoarele de căutare o citesc ca să înțeleagă ce arată imaginea. E cel mai util lucru pe care un editor îl poate adăuga unei imagini, și îi ia o propoziție.
Un text alternativ bun descrie în limbaj simplu ce transmite imaginea, ca și cum i-ai povesti cuiva la telefon ce e în poză și de ce e acolo. Face site-ul utilizabil pentru cei care se bazează pe tehnologii asistive și, în același timp, ajută motoarele de căutare să înțeleagă imaginile tale. Noi construim câmpul pentru el direct în interfața de editare, pentru că e acea parte rară a muncii cu imaginile în care o propoziție scrisă de un om bate orice ar putea genera o mașină. Alege bine fotografia și scrie un text alternativ bun, iar de tot restul se ocupă site-ul.