Un site bogat vizual nu trebuie să fie lent. Adesea, problema nu este numărul fotografiilor frumoase, ci modul în care sunt pregătite și încărcate. Trimiterea unui original mare către un telefon pentru un card mic consumă date fără un beneficiu vizibil. În schimb, compresia excesivă poate distruge texturile materialelor și poate face imaginile să pară neîngrijite. Scopul nu este un număr minim arbitrar de kiloocteți, ci un echilibru rezonabil pentru rolul fiecărei imagini.
Definiți mai întâi scopul
Separați imaginile în roluri principale, informative și decorative. O fotografie principală poate modela prima impresie, ceea ce face importantă calitatea ei. O diagramă trebuie să rămână lizibilă, în timp ce o miniatură nu are nevoie de detaliile unui afiș mare. Pentru fiecare tip, notați raportul de aspect și cea mai mare dimensiune de afișare așteptată. Astfel, editorii pot pregăti materialele consecvent, în loc să experimenteze de fiecare dată cu decupări fără reguli clare.
Pregătiți mai multe dimensiuni
Imaginile adaptabile permit browserului să aleagă o resursă potrivită condițiilor de afișare. Documentația web.dev explică mecanismele de furnizare a acestor variante. În practică, verificați ca vizitatorii de pe mobil să nu descarce inutil același fișier mare ca utilizatorii de desktop. Micșorarea unei imagini doar prin stiluri nu reduce cantitatea de date transferate. Variantele trebuie să existe ca resurse pregătite separat sau să fie generate de un sistem de procesare adecvat.
Comparați formatele folosind materiale reale
O fotografie, o ilustrație cu text și un semn transparent reacționează diferit la compresie. Testați formate moderne potrivite și o variantă de rezervă dacă implementarea o cere. Nu alegeți setările numai după dimensiunea fișierului: inspectați rezultatul pe ecranul vizat, urmărind degradeurile, marginile și detaliile mici. Formulările importante este mai bine să rămână text real al paginii decât să fie încorporate într-o imagine, unde sunt mai greu de citit, copiat și adaptat.
Luați în calcul ordinea încărcării
Imaginile aflate mult sub primul ecran pot fi adesea încărcate mai târziu. Totuși, elementul vizual principal nu trebuie amânat automat împreună cu toate celelalte. Luați decizia finală după testarea paginii, nu urmând o singură regulă universală. Rezervați și un spațiu previzibil imaginilor în aranjamentul paginii, astfel încât apariția lor să nu facă textul și butoanele să sară. Vizitatorii trebuie să-și păstreze orientarea în timp ce conținutul se încarcă.
Adăugați descrieri cu sens
Textul alternativ trebuie să transmită sensul imaginii în contextul său specific, nu să repete mecanic cuvinte-cheie. Dacă o fotografie demonstrează o caracteristică importantă a lucrării, explicați-o pe scurt. Un element decorativ nu trebuie să creeze zgomot inutil pentru tehnologiile asistive. Organizarea numelor de fișiere și a descrierilor în timpul pregătirii conținutului este, de asemenea, mai ușoară decât corectarea a sute de nume arbitrare după publicarea catalogului.
După optimizare, testați din nou pagina pe o conexiune mai lentă și pe un telefon real. Comparați cât de repede apare conținutul principal, dacă aranjamentul rămâne stabil și cum arată fotografiile. Obiectivul nu este un număr atrăgător într-un singur raport. Este să ajutați persoana să vadă rapid ceea ce îi trebuie, fără să piardă detalii importante.