Share
Folosind sprite CSS, în loc de o colecție de imagini individuale mai mici, veți îmbunătăți performanța paginilor web și veți păstra lucrurile mai organizate. Să aruncăm o privire asupra unor bune practici și asupra unor instrumente utile pentru fluxul dvs. de lucru pentru sprite.
Numele spiriduș ar putea să vă reamintească sprite de jocuri; jocuri de console retro și chiar jocuri bazate pe browser în aceste zile:
iar în termeni CSS rolul sprites este mai mult sau mai puțin același. Un sprite este un fișier mare care conține mai multe imagini pentru site-ul dvs., economisind timp de încărcare și spațiu web.
Punctul esențial al utilizării foilor CSS Sprite este că serverul trebuie doar să trimită un fișier imagine care să conțină toate imaginile, nu o mulțime de persoane individuale - și prin CSS puteți afișa orice segment mic din acel fișier ca fundal al unui element.
Unii ar putea să folosească imaginile individuale pentru a "bloca" ochiul în gândirea că pagina se încarcă mai repede; imaginile afișate în timp ce se încarcă ar putea părea a fi un progres bun. Acesta este un avantaj fals, totuși, este întotdeauna preferabilă o pagină de încărcare cu adevărat mai rapidă.
Celălalt dezavantaj cu această metodă este că fiecare imagine individuală este, după cum am menționat, un fișier de imagine separat. Prin urmare, fiecare imagine pe care serverul trebuie să o conteze ca o solicitare separată HTTP. Este important să păstrați cât mai puțin numărul de solicitări HTTP pe site-ul dvs., deoarece browserele pot face un număr limitat de cereri către un singur server simultan.
Combinarea imaginilor într-un singur fișier nu numai că va reduce semnificativ numărul de solicitări HTTP, dar va scădea și dimensiunea totală a imaginilor.
Există două abordări comune atunci când creați foile dvs. sprite - făcându-le înainte sau după construirea site-ului.
Puteți să vă puneți toate imaginile într-o foaie sprite de la sol în sus pe măsură ce vă creați site-ul. Veți actualiza CSS-ul pentru a vă potrivi, pe măsură ce mergeți. Despre asta vom face referire ca inainte de metodă.
Alternativ, puteți să creați toate imaginile ca fișiere separate, ceea ce face ca editarea acestora să fie mult mai simplă. Odată ce site-ul dvs. este construit și toate imaginile pregătite, puteți să compilați rapid și ușor fie manual, fie să utilizați unul din instrumentele necesare pentru a vă ajuta să lucrați pentru dvs. (despre care voi trece în detaliu mai târziu). Acest lucru, vom face referire ca după abordare.
Dacă sunteți complet nou la foi de sprite sau noi pentru designul web, metoda "după" este cu siguranță opțiunea recomandată.
Dacă sunteți complet nou la foi de sprite sau noi pentru designul web, metoda de după este cu siguranță opțiunea recomandată. Puteți să păstrați separat PSD-urile sau fișierele pentru fiecare imagine individuală, să efectuați modificări, apoi să rulați aplicația dorită. Mai mult, dacă nu sunteți sigur despre cum să scrieți toate CSS-urile pentru imaginile dvs., atunci cele mai multe aplicații generatoare de sprite vor produce și CSS-ul însoțitor.
Cele mai multe dintre aceste aplicații sunt complet gratuite, un alt bonus!
Să aruncăm o privire la câteva sfaturi și instrumente care să vă ajute cu foi de sprite. Va fi la latitudinea dvs. să alegeți oricare dintre abordările pe care le considerați cele mai potrivite.
Notă: majoritatea sugestiilor următoare presupun că îți vei face spritele în prealabil.
Atunci când vă puneți imaginile în Photoshop (sau orice folosiți pentru a vă structura foaia de sprite) este o idee bună să încercați și să organizați lucrurile cât mai clar și mai ușor posibil. Încercați să rotunjiți mereu până la cei mai apropiați 10 pixeli sau să lucrați cu un anumit spațiu pentru fiecare imagine, dacă toate au aceeași dimensiune. Când vine vorba de a scrie toate CSS însoțitor, nu va trebui să păstreze măsurarea coordonatelor, și veți fi mai puțin probabil să uitați numerele implicate.
Folosind și figurile "simple", înseamnă că în Photoshop va fi mult mai ușor să utilizați rețelele "snap-to" sau să trageți linii de rețea pentru a păstra lucrurile organizate și ușor de înțeles.
Dacă vă puneți toate imaginile în foaia de sprite, petreceți veacuri scrise toate CSS și apoi decideți unul dintre imaginile necesită editare, ar putea provoca probleme serioase. Dacă dimensiunea imaginii trebuie modificată, este posibil ca aspectul foii de sprite să trebuiască să fie modificat și realinisat - ceea ce înseamnă că va trebui să petreceți vârste absolut alterând toate CSS-ul dvs..
Acesta este un alt motiv pentru care ați putea fi mai interesat să începeți cu imagini individuale și apoi să utilizați o aplicație pentru a face toată munca grea pentru dvs. După aceasta, dacă trebuie să faceți niște modificări, re-executați aplicația și totul se va face. Ce vrei mai mult?
Dacă utilizați Photoshop sau alți editori de imagini similare, atunci este o idee bună să țineți straturile fiecărui sprite frumos etichetate și grupate, deci totul este perfect clar dacă ar trebui (sau oricine altcineva) să-l înțelegeți mai târziu.
Etichetele dvs. trebuie să fie clare și concise, ușor pentru oricine și toată lumea să înțeleagă.
Aceasta ar trebui să fie o practică destul de obișnuită pentru majoritatea designerilor, dar nu puneți jos etichetarea - faceți-o imediat ce creați sprite. Imaginați-vă cât de mult timp ați putea salva cu etichetarea dacă aveați o foaie imensă de sprite și nu ați putea găsi straturile adecvate - ar putea deveni extrem de frustrant.
În mod similar, etichetarea este vitală pentru CSS-ul dvs. de sprite. Etichetele sunt cu siguranță necesare pentru a confirma care sprite este selectat prin cod - și toate principiile de mai sus se aplică în continuare. Dacă proiectați un șablon pentru a vinde pe site-uri precum Themeforest, atunci orice CSS (să nu mai vorbim de Sprite Sheet CSS) trebuie să fie clar etichetat, văzând că potențialii utilizatori ar putea să nu aibă o înțelegere cât mai mare a CSS-ului.
Există o gamă largă de instrumente pentru a face generarea de foi de sprite cât mai ușoară posibil. Când creați și proiectați cu o serie de imagini individuale, compilați-le pe toate într-o foaie de sprite la sfârșitul metodei "după".
Iată câteva dintre cele mai bune generatoare de foi Sprite:
SpriteMe este un marcator gratuit disponibil de pe www.spriteme.org. Este surprinzător de simplu de folosit și are un impact redus asupra metodei de proiectare cu care sunteți obișnuit. Se va deschide o suprapunere pe partea laterală a ecranului, unde puteți descărca imagini sau foi de sprite de pe site-ul pe care îl utilizați sau, mai important, generați foi de sprite și CSS însoțitor pentru dvs..
Imaginile de fundal fac ca paginile să arate bine, dar și să le facă mai lenești. Fiecare imagine de fundal este o cerere suplimentară HTTP. Există o remediere: combinați imaginile de fundal într-un sprite CSS. Dar crearea de sprite este greu, necesitând cunoștințe arcane și o mulțime de încercări și erori. SpriteMe elimină hassles-ul cu un clic pe un buton. - www.spriteme.org
Așa cum am spus mai devreme, dacă sunteți obișnuiți să lucrați cu metode de imagine individuale, preferați această metodă sau nu puteți fi deranjați de munca grea asociată foilor de sprite, atunci SpriteMe este răspunsul.
Deși site-ul Webdesigntuts + are deja foi de sprite, SpriteMe ar putea îmbunătăți lucrurile prin combinarea lor! Puteți vedea cum este exportat CSS-ul - cu alinierea făcută deja. Tot ce trebuie să faceți este să copiați, să inserați și să modificați adresele URL!
Este la fel de simplu ca crearea design-ului cu imagini individuale, apoi rulează SpriteMe. Acesta captează toate imaginile de fundal de pe site-urile dvs., le grupează în sprite și generează foaia de sprite pentru a le descărca. Apoi "injectează sprite-ul în pagina curentă" și "recompensează pozitia de fundal CSS" pentru tine. Dacă doriți un ghid mai bun pentru utilizarea SpriteMe, găsiți-l la www.spriteme.org.
Consultați tabelul de economii al SpriteMe pentru a vedea în mod clar cum Sprite Sheets au salvat multe site-uri web mult timp de încărcare a spațiului și a paginilor (în majoritatea cazurilor ...)
Sper că v-am convins că Sprite Sheets sunt calea de urmat - economisind spațiu, micșorând solicitările HTTP și ducând la un site mai rapid și mai organizat.
În ceea ce privește metodele de generare a acestora, aș recomanda cu siguranță metoda "după" și să mă aplec pe unul dintre instrumentele discutate pentru a face toată munca grea.
Accentsconagua