Un contor care nu strică aspectul paginii

Includerea unei imagini externe într-o pagină web construită cu grijă aduce întotdeauna riscul de a perturba structura vizuală stabilită. Când un browser construiește o pagină, calculează poziția fiecărui bloc de text și a fiecărei imagini, pentru ca lectura să decurgă fără sincope.

Dacă o imagine nu are dimensiuni indicate explicit, browserul nu poate rezerva dinainte spațiul necesar. Trebuie să aștepte până când fișierul imagine a fost descărcat complet pentru a-i afla înălțimea și lățimea exacte. Această întârziere provoacă un fenomen numit deplasarea aspectului (layout shift).

Textul sare brusc în jos sau în lateral pentru a face loc imaginii abia sosite. Pentru oricine încearcă să citească un articol, această mișcare bruscă este foarte deranjantă și creează o impresie de instabilitate tehnică.

Două numere în etichetă păstrează spațiul

Soluția pentru prevenirea deplasărilor de aspect este remarcabil de simplă: se adaugă atribute fixe direct în codul HTML. Fiecare etichetă de imagine poate primi o valoare anume pentru înălțime și lățime, exprimată în pixeli. Când aceste dimensiuni sunt declarate dinainte în codul sursă, browserul știe imediat exact cât spațiu gol trebuie să rezerve pe ecran, chiar înainte să înceapă descărcarea fișierului imagine.

Spațiul rămâne complet gol până sosește imaginea, iar textul din jur rămâne ferm la locul lui. Pentru a afla dimensiunile corecte, trebuie consultat designul ales din catalog.

Fiecare design are o dimensiune exactă, care nu variază. Scrierea acestor numere precise în cod elimină complet efectul de salt. Ea garantează o încărcare lină, fără întreruperi, a paginii, indiferent de viteza rețelei.

Ce apare când imaginea nu apare

În situațiile în care conexiunea la rețea se poticnește sau cade complet, o imagine lipsă poate lăsa pe ecran o pictogramă urâtă de imagine stricată. Pentru a trata elegant această situație, un rol esențial îl are atributul alt pentru textul alternativ.

Dacă imaginea nu poate fi afișată, browserul arată în locul ei textul indicat în acest atribut. Pentru un element pur decorativ sau tehnic, cum este un contor de vizitatori, acest text ar trebui să fie extrem de scurt sau complet gol, scris ca două ghilimele fără spațiu între ele.

Un text alternativ lung și descriptiv va lărgi în mod imprevizibil caseta rezervată în pagină dacă imaginea nu se încarcă. Un atribut gol lasă pur și simplu un spațiu liber, discret, și păstrează intactă structura subsolului sau a barei laterale.

Încărcat ultimul, intenționat

Standardele web moderne oferă instrumente suplimentare pentru a controla modul în care imaginile externe influențează viteza de încărcare a documentului. Două atribute anume, loading și decoding, îi indică browserului cum să prioritizeze imaginea.

Setarea atributului loading la valoarea lazy îi spune browserului să amâne preluarea fișierului până când cititorul derulează efectiv în apropierea locului în care se află. Setarea atributului decoding la valoarea async îi permite browserului să prelucreze textul principal și aspectul paginii fără să aștepte interpretarea completă a datelor imaginii.

Deoarece o imagine statistică este rareori cea mai importantă informație de pe pagina unei parohii sau a unui club, aceste atribute asigură că întotdeauna apare mai întâi conținutul propriu-zis. Instrumentul de măsurare își ocupă discret locul în fundal, fără să încetinească vreodată transmiterea mesajului principal.