De ceva timp, a existat o practică de a împărți imaginile mai mari în multe altele mai mici (un proces numit slicing), într-un efort de a permite paginilor să se încarce mai rapid. Deși acest lucru a oferit o experiență vizuală de viteză mai mare (fiecare imagine mică clipind în locul ei pe măsură ce era încărcată), timpul de încărcare a fost aproximativ același, dacă nu mai lung, deoarece dimensiunea generală a fișierului nu s-a schimbat, dar au apărut în schimb mai multe solicitări în loc să se încarce întreaga imagine într-o singură solicitare.

(Slicing în web design. Credit: SerdarWiki, Wikimedia, licența CC BY-SA 4.0)
Necesitatea acestei abordări a fost în mare măsură eliminată de versiunile moderne de CSS (și de alte tehnici pe care le vom discuta). Acest lucru ne permite să reproducem multe lucruri pentru care am folosit imaginile (adică butoane, efecte de trecere cu mouse-ul etc.) fără a folosi deloc imagini, și ne permite să avem controlul asupra aspectului și formatării pe care o făcea acea fragmentare a unei imagini. Acum, un obiectiv comun pentru dezvoltatorii de site-uri este să fie cât mai „fără imagini” posibil, folosind imagini numai acolo unde CSS nu se poate folosi. Acest lucru reduce timpul de încărcare și oferă o mai mare flexibilitate în designul site-ului.
Unele tehnici suplimentare pentru a reduce dimensiunea imaginii pe un site sunt imaginile cu dimensionare corectă, compresia (pe care tocmai am discutat mai sus), stocarea în cache și sprite-urile, printre altele. Dimensionarea corectă înseamnă editarea și crearea unei copii a unei imagini la dimensiunea exactă necesară acolo unde este afișată. De exemplu, imaginile mici pentru articolele de pe pagina unui produs ar putea fi pur și simplu imaginea originală redată la o dimensiune mai mică. Dacă utilizatorul nu se uită la acele produse, încărcarea mai întâi a imaginilor mai mari nu face decât să-i degradeze experiența, deoarece fișierul imagine mare al fiecărui produs trebuie să fie descărcat. Dimensiunea corectă și comprimarea necesită ambele software de editare a imaginilor cu cel puțin unele funcții avansate de editare sau utilizarea unui serviciu online care acoperă elementele de bază (cu mai puțin control din partea dvs.).
Procesul de stocare în cache poate ajuta, de asemenea. Când site-ul dvs. este finalizat și imaginile dvs. (și alte fișiere) vor persista, utilizarea memoriei cache poate reduce timpii de încărcare pentru vizitatorii cvare revin pe site. Memorarea în cache înseamnă că fișierele pe care le descarcă utilizatorul sunt marcate pe server cu o expirare. Data viitoare când utilizatorul vizitează site-ul, dispozitivul său va verifica timpii de expirare a conținutului. Dacă copia locală a dispozitivului nu este expirată, o folosește pur și simplu pe cea pe care o are, fără a fi nevoie să o descarce nouă.
Ultima opțiune pe care o vom lua în considerare aici (există mai multe metode avansate) este crearea unui sprite. Aproape inversul compresiei și dimensionării corecte, un sprite este o imagine mare care conține toate pictogramele utilizate pe site. Deoarece aceste imagini mai mici sunt adesea repetate, vom descărca o singură imagine principală o singură dată. Folosind regulile CSS pentru a dezvălui doar o mică parte din imagine (adică porțiunea care conține o pictogramă) la un moment dat, toate pictogramele noastre pot să fie incluse într-un singur fișier imagine, dar să apară ca elemente individuale pe pagină.
Sursa: Michael Mendez, The Missing Link – An Introduction to Web Development and Programming (CC BY-NC-SA 3.0 License), Published by Open SUNY Textbooks, Milne Library (IITG PI), State University of New York at Geneseo. Traducere de Nicolae Sfetcu
Lasă un răspuns