Conceptul de sprite există de ceva vreme. Este una dintre cele mai frecvent utilizate tehnici din industria jocurilor pentru a accelera procesul de afișare a animațiilor pe un ecran. În acest articol, vom analiza în mod deosebit modul în care această tehnică ne poate ajuta să îmbunătățim experiența utilizatorului pe paginile web cu ajutorul CSS Sprites în următoarea ordine:
- Ce este un Sprite?
- Ce este CSS Sprite - o prezentare rapidă?
- Exemplu de modul în care ajută la dezvoltarea web?
- Avantajele utilizării CSS Sprites
- Ce trebuie să facă un dezvoltator atunci când lucrează cu CSS Sprites?
- Cum se creează o foaie CSS Sprite?
- Cum să lucrați cu CSS Sprites?
- Companii care utilizează CSS Sprites
Ce este un Sprite?
Un sprite este o singură imagine care face parte dintr-o scenă mai mare într-un joc. Sprite multiple sunt apoi combinate într-o imagine mare numită foaie sprite. Odată ce o foaie sprite este încărcată în memorie, diferiți sprite sunt redați în succesiune rapidă pentru a da iluzia animației. Acest lucru se face simultan pentru zeci până la sute de sprite diferiți pentru a genera o scenă în joc.
Ideea de bază este că este mult mai rapid să încărcați o imagine și să afișați o parte a acesteia oriunde este necesar, în comparație cu încărcarea mai multor imagini și afișarea acestora.
Ce este CSS Sprite: o prezentare rapidă?
Un sprite CSS este o tehnică care este adesea utilizată de dezvoltatorii web pentru a optimiza performanța paginilor web. În această tehnică, mai multe imagini mai mici, de obicei de aceleași dimensiuni, sunt combinate într-o singură imagine mare numită a foaie sprite sau set de tigla . Această foaie sprite este apoi utilizată pentru a afișa elemente individuale oriunde avem nevoie de ele.
De obicei, elemente precum sigle, săgeți de navigare, butoane sunt incluse în foaia sprite, deoarece sunt aproape de aceleași dimensiuni și sunt frecvent utilizate într-o pagină web.
Exemplu de modul în care ajută la dezvoltarea web?
În general, în timpul proiectării paginilor web imaginile sunt stocate și utilizate ca fișiere individuale. Deci, atunci când un utilizator deschide o pagină web, browserul trebuie să facă o cerere HTTP pentru fiecare dintre aceste fișiere, să le descarce separat și să le afișeze. Acest lucru duce la timpi mai mari de încărcare a paginii, deoarece o anumită pagină web poate avea un număr mare de imagini mai mici, cum ar fi butoane, pictograme, sigle.
Spriturile CSS ajută dezvoltatorii să combine aceste imagini mici utilizate frecvent într-o singură imagine mare. Browserul trebuie apoi să descarce un singur fișier care este apoi obișnuitafișați secțiunea necesară compensând imaginea.
Avantajele utilizării CSS Sprites
Există două avantaje principale ale utilizării sprit-urilor CSS față de imaginile normale:
Încărcare mai rapidă a paginii: Îmbunătățește timpul de încărcare a paginii pe măsură ce imaginile utilizate în pagina web apar de îndată ce fișa este descărcată.
Debit mai mare și utilizare mai mică a resurselor: Nu numai că această tehnică îmbunătățește experiența utilizatorului final prin încărcarea mai rapidă a paginii,dar reduce, de asemenea, congestionarea rețelei, deoarece se fac un număr mai mic de solicitări HTTP.
Ce trebuie să facă un dezvoltator atunci când lucrează cu CSS Sprites?
Când lucrează cu imagini individuale, dezvoltatorul poate lucra pur și simplu cu etichetă HTML și stilează-l în CSS, dacă este necesar. Dar când lucrează cu CSS Sprites, un dezvoltator trebuie să facă două lucruri specifice:
- Crearea Sprite Sheet
În timp ce dezvoltă o pagină web dacă dezvoltatorul decide să utilizeze sprite CSS, el / ea trebuie să creeze mai întâi foaia sprite prin fuzionarea tuturor elementelor dorite, cum ar fi butoanele, siglele etc. Acest lucru se poate face folosind orice program de editare a imaginilor, cum ar fi Photoshop sau Gimp. Există, de asemenea, multe instrumente online disponibile care vă ajută să realizați foaia sprite. Aceste instrumente sunt discutate mai târziu în acest articol.
- Accesați un anumit element al sprite-ului folosind CSS fundal-poziție proprietate
Odată ce foaia sprite este gata, dezvoltatorul trebuie să utilizeze atribute CSS pentru a accesa diferite părți ale foii.
- lăţime: Lățimea spritei
- înălţime: Înălțimea spritei
- fundal: Referință la foaia sprite
- Fundal-poziție: Valori offset (în pixeli) pentru a accesa doar partea necesară a foii sprite
Cum se creează o foaie CSS Sprite?
Puteți utiliza orice software de editare a imaginilor pentru a aranja imaginile mai mici într-o grilă, dar două metode mai ușoare sunt discutate mai jos:
1. Instrument de creare a foilor Sprite online
LEGĂTURĂ: toptal.com/developers/css/sprite-generator/
Acest instrument nu este doar gratuit, dar vă oferă și codul CSS necesar, care poate fi utilizat în timp ce faceți referire la foaia sprite. De asemenea, puteți juca cu diferite proprietăți, cum ar fi umplerea între elemente și schimbarea alinierii acestora.
2. Generarea Sprite Sheet cu Sprity
Dacă utilizați Grunt, Node sau Gulp, puteți instala un pachet numit Sprity care vă va ajuta să creați o foaie sprite într-o varietate de formate precum PNG, JPG etc.
În primul rând, va trebui să instalați Sprity folosind:
npm instalați sprity -g
Apoi, pentru a genera o foaie sprite, utilizați următoarea comandă:
sprity ./output-directory/ ./input-directory/*.png
Cum să lucrați cu CSS Sprites?
În acest exemplu, vom folosi următoarea foaie sprite:
După cum puteți vedea în imaginea de mai sus, șase pictograme (Instagram, Twitter și Facebook) au fost aranjate într-un model asemănător grilei. În primul rând, avem o stare normală și în al doilea rând, avem starea lor de plutire (imaginea care apare odată ce plasăm cursorul mouse-ului pe ele).
Dacă ați realizat foaia sprite folosind instrumentele pe care le-am discutat mai sus, atunci știți deja compensările necesare în CSS, dar dacă ați folosit alt instrument sau vi s-a dat pur și simplu o foaie sprite, atunci nu vă faceți griji, vom discuta despre o metodă care vă va ajuta să obțineți compensări pentru elementul necesar.
Să vedem acum o modalitate foarte simplă de a obține compensări necesare pentru fiecare dintre cele șase pictograme folosind MS Paint. Este posibil să nu fie o soluție ideală pentru a lucra cu sprite, dar, deoarece are caracteristica care oferă coordonatele cursorului mouse-ului, poate fi utilizată pentru a obține coordonatele X și Y necesare.
Mai întâi, deschideți imaginea de foaie sprite (grilă care conține toate imaginile mai mici) și aduceți cursorul mouse-ului în colțul din stânga sus al spritei pe care doriți să o luați.
Odată ce aveți coordonatele punctului din stânga sus al sprite-ului dvs. (imaginea Instagram din stânga sus), puteți afișa acest sprite specific oriunde este necesar folosind codul CSS:
cum se adaugă java la cale
background: url ('img_sprites.png')
fundal-poziție: 0 0
lățime: 125 px
înălțime: 125 px
Folosim lățimea și înălțimea la 125 de pixeli, deoarece pictogramele noastre au acea dimensiune. Pentru a prelua următoarea imagine (Twitter) în același rând, folosim următorul cod:
background: url ('img_sprites.png')
fundal-poziție: -128px 0px
lățime: 125 px
înălțime: 125 px
Rețineți atributul poziție de fundal în fragmentul de mai sus. (-128px, 0) înseamnă că compensăm foaia sprite la stânga cu 128 pixeli (luând în considerare căptușeala între elemente) și 0 pixeli pe axa Y. Dacă ar fi să accesăm pictograma hover twitter atunci atributul nostru background-position ar fi:
fundal-poziție: -128px -128px
În acest fel, putem accesa acum fiecare componentă a foii noastre sprite folosind CSS. Să parcurgem un cod HTML și CSS complet despre cum să o facem.
Pasul 1: Scrierea codului HTML necesar
În codul de mai jos, adăugăm pur și simplu trei linkuri. De asemenea, vom lega HTML-ul nostru cu foaia de stil (screen.css).
Pasul 2: Scrierea CSS necesară. În primul rând, vom stiliza clasa noastră comună de pictograme. Aici puteți vedea că ne referim la foaia sprite pe care am creat-o.
/ * Pictogramă partajată Clasă * /
span.icon o legătură,
span.icon a: vizitat{
afişa:bloc
text-indent:-9999px
imagine de fundal: url (./ img_sprites.png)
fundal-repetare:fără repetare
}
Pasul 3: Obținerea pictogramelor individuale din foaia sprite folosind compensările.
/ * Pictogramă Instagram * /
span.instagram o legătură,
span.instagram a: vizitat{
lăţime:125 px
înălţime:125 px
fundal-poziție:0 0
}
/ * Pictogramă Twitter * /
span.twitter o legătură,
span.twitter a: vizitat{
lăţime:125 px
înălţime:125 px
fundal-poziție:-128px 0
}
/ * Pictograma Facebook * /
span.facebook o legătură,
span.facebook a: vizitat{
lăţime:125 px
înălţime:125 px
fundal-poziție:-257px 0
}
Pasul 4: Obținerea pictogramelor de deplasare din foaia sprite folosind compensările.
span.instagram a: pluteste{fundal-poziție:0 -128px}
span.twitter a: pluteste{fundal-poziție:-128px -128px}
span.facebook a: pluteste{fundal-poziție:-255px -128px}
Companii care utilizează CSS Sprites
Multe nume mari din industrie folosesc CSS Sprites pentru a îmbunătăți capacitatea de reacție a site-urilor lor web. Companii precum Google, Facebook, Amazon folosesc pe larg această metodă, deoarece acest lucru îi ajută să reducă numărul de solicitări HTTP pe sesiune pentru un anumit utilizator. Acesta este un beneficiu imens atunci când luăm în considerare faptul că aceste companii servesc milioane de clienți la un moment dat.
Acum, că aveți o înțelegere a ceea ce sunt spriturile CSS și cum să lucrați cu ei, sunteți cu un pas mai aproape în călătoria dvs. de a învăța CSS. Conceptele precum sprites sunt un schimbător de jocuri în vremurile de astăzi, deoarece a devenit extrem de important pentru dezvoltatori să extragă fiecare performanță dintr-o pagină web.
Verificați-ne care vine cu instruire live condusă de instructor și experiență în viața reală a proiectului. Această instruire vă face să aveți abilități de a lucra cu tehnologii web back-end și front-end. Include cursuri de dezvoltare web, jQuery, Angular, NodeJS, ExpressJS și MongoDB.
Ai o întrebare pentru noi? Vă rugăm să o menționați în secțiunea de comentarii a blogului „Imagini HTML” și vă vom răspunde.