Hur du använder Sprite lakan att förbättra sajtresultat

Används i webbutveckling, är sprites grafiska bilder som innehåller en samling av mindre bilder - vanligtvis ikoner, knappen grafik och andra element i användargränssnittet. De används i stället för ett flertal separata bilder eftersom de kan avsevärt snabba laddningstiden på en webbplats. De gör detta genom att minska antalet HTTP server samtal (för att inte överskrida server) och vanligtvis (men inte alltid) är mindre än den kombinerade grafiken skulle vara om de sparades separat.

De är särskilt användbart för större webbplatser som har fler typer av element och/eller tyngre trafik. I dessa situationer räknar ännu en enda byte, multiplicerat med tusentals användare, i stor sätt.

Hur web sprites arbete

I ett nötskal, kan du välja för att visa endast en liten del av bilden med hjälp av CSS och xy koordinater för att säga webbläsaren var det avsnittet är. Hänvisning till åtföljande bilden, till exempel kan du instruera webbläsaren att visa bara blå hatt ikonen genom att tala om det för att börja Visa 80 bildpunkter över från vänster och 20 pixlar ner från toppen.

Se: CSS Sprite Tips och tekniker

Hur du ställer in en sprite ark - alternativ 1

Skapa en tom fil som är stor nog att rymma alla element du vill kombinera. Rekommenderade filformatet kommer vara 24 bitars PNG, så om du vill, du kan göra bakgrunden transparent. Använda guider eller ange programmets rutnätet ska dela upp duken i ens steg. En smart metod är att använda multiplar av tio. Som ett resultat, bör du ha en duk som är uppdelad i lika rutor. Nu kopiera och klistra in din element i filen. Justera varje till närmaste guider eller stödlinjer, både vertikalt och horisontellt. Om din element kan grupperas, är som av liknande funktion eller stil, det en bra idé att göra det. Detta sätt om alla objekt som måste bytas ut i framtiden, de blir lättare att hitta.

Fördelarna med justera din grafiska element till ett rutnät är att du kraftigt förenkla det programmering steget. Om en uppsättning ikoner kan hittas på x20-y40-x20-y20, x20-y60, etc., måste du (eller din programmerare) inte att kontinuerligt kontrollera tillbaka för att bestämma koordinaterna eftersom du lätt kommer ihåg elementen är exakt 20 pixlar apart.

Se: CSS Sprite ark: bästa praxis, verktyg och bra program

Hur du ställer in en sprite ark - alternativ 2

Om du har så många element att klämma på en sprite att bilden blir för stor, kan det vara mera praktiskt att placera dem tätt samman. Vissa designers rekommenderar minst 3-4 pixlar av Tom "buffer space" runt varje bild att tillhandahålla frihetsgrader på grund av avrundningsfel på vissa webbläsare eller enheter.

Hur du ställer in en sprite ark - alternativ 3

Det finns nu en hel del verktyg tillgängliga som kommer inte bara automatiskt skapa en sprite ark för dig, men kommer också skapa CSS. En av de mest populära är SpriteMe. Gratis verktyg gör att du kan bygga din webbplats som vanligt och sedan extraherar bilderna från dina sidor, kombinera dem till en enda ark kan du hämta och installera.

Lite om CSS

Det finns olika sätt att koden med web sprites, beroende på var och hur de används. Tekniker i huvudsak kretsar kring taggarna "background-image" och "background-position" som beskrivs i denna hjälpsamma Smashing Magazine post. Som antalet element växer, växer behovet av mer automation tillsammans med den. Det kan tyckas alltför tidskrävande, men den extra forskningen kan potentiellt spara från några av den smärta som kommer med tunga web trafikbelastning.

Om du är super organiserad, känns det bäst att ställa in ett kalkylark i slutet av ett projekt efter grafik och innehåll har färdigställts. För att komma igång, prova någon av alternativen ovan som tilltalar mest till dig. Med lite planering, kan web sprites vara ett mycket användbart knep för att hjälpa din webbplats ladda snabbare och körs smidigare.

• Relaterade Frågor

• Hur kan en kost låg i kolhydrater och fetter påverkar hur kroppen använder proteiner?

  En kost låg i kolhydrater och fetter påverkar hur kroppen använder proteiner genom att tvinga kroppen att välja för att bränna proteiner till energi. Kroppen normalt brinner socker först och sedan bränner proteiner.

• Hur skulle ben i en octopus arms påverka hur det använder dem?

  Ben i en bläckfisk vapen skulle påverka hur man använder dem genom att inte vara snabb på alla och det skulle inte vara kan försörja sig själv.

• Vilka typer av verktyg användes med traditionella häst hår gips över trä svarv hur man använder dessa verktyg för att göra perfekt släta väggar?

  Jag antar att en enkel, men länge trä murslev liknar en mortel murslev, kanske med några uppåtvända medar i slutet så överlappande drag inte gör oönskade märken i gips.Jag har sett hur indonesiska arbetare gäller cement rendering i Jakarta (bo där) m

• Hur man använder medling till din fördel i företag

  Medling är en vanlig form av tvistlösning i USA, men den skiljer sig från skiljeförfarande i flera viktiga sätt som diskuteras nedan.Potential för större kostnad fördelFormellt, har medling större kostnadsfördelar än skiljeförfarande. Skiljedom är of

• Hur man använder skiljedom till din fördel i företag

  Skiljedom är en vanlig form av tvistlösning i USA och kan vara ett kostnadseffektivt alternativ till tvister när den används klokt. Skiljeförfarande, en skiljeman hör fallet istället för en domare, och återger ett beslut baserat på lagen och fakta. N

• Hur man använder en kläder ångbåt

  Kläder ångkokare är ett mycket effektivt och snabbt verktyg för att ta bort någon form av rynkor från sängkläder, kläder, överdrag, gardiner och möbler. Med bara några enkla tips, kan du arbeta med dem som ett proffs. Här är tips på hur man använder

• Visa hur man använder ett kassaregister?

  Kontrollera att kassan har ett band. Detta kommer att kvittera att du ger till kunden och ge säljpost för dig. 1 steg 2 göra säker kassaapparat lådan är klar. Kassaapparat lådan är där pengar förvaras. Det finns en plats för förändring och räkningar

• Hur du använder FL Studio 10?

  Jag vet att Answers.com kommer att besvara frågor i bäst av tider, men när du frågar en fråga som hur du använder en komplex plugin baserad musik och digital audio workstation-programvara, du kommer att hänvisas till där du kan hitta all dokumentatio

• Hur du använder Adobe Photoshop?

  Photoshop är lätt att lära sig grunderna och du kan lära dig själv från mest alla grundläggande bok om photoshop. Åtminstone om du har lite kunskap om grundläggande datoranvändning i allmänhet.Jag föreslår att man börjar med en bok, kostar mindre än

• USA vill veta hur du använder stealth teknik?

  Förenta staterna vet naturligtvis hur man använder stealth teknik. Amerikanerna har använder stealth teknik för ett par år utan att ha folk som säger de bra teknik men vet inte hur man använder dem. B-2 bombplanen är stealth-teknik, F-22 stealth rapt

• Hur du använder eyeliner?

  Eyeliner är säker knepigt länge, särskilt hur man använder den. Börja med en bra öga liner. Jag älskar Expert Wear® mjuk foder penna av Maybelline New York. Jag gillar brun-svart eftersom svart är bättre för speciella tillfällen och natt. Först, inna

• Där kan man hitta instruktioner om hur du använder steam juicepress?

  Victorio Steam Juicer webbplatsen har instruktioner, samt en utskrivbar PDF om hur man använder deras steam juicer. Steam juicepress använder varmt vatten till ånga och värma upp den frukt, som sedan fördriver juice.

• Vad använder en myra att hålla alla sina hårstrån på plats?

  Vad använder en myra att hålla alla sina hårstrån på plats?EXTRA TAG BUG SPRAY!

• Hur du använder matematik när att göra guacamole?

  Du använder nyckeltal eller proportioner för att se till att du använder rätt mängd av varje ingrediens.

• Hur djur använder sina fem sinnen för att hjälpa dem överleva?

  Djur använder sina fem sinnen för att hjälpa dem att överleva på så många sätt. Djur luktar ut deras mat och se faran med sina ögon.

• Hur mycket vatten du använder för att göra 100 koppar kaffe?

  100 koppar vatten till en 100 koppar kaffe.  Eller två rågad msk per två koppar (50 matskedar kaffe)Det beror på storleken på kaffekopp. För en kort italienska Espresso "ristretto" du totalt 25ml/cup så i ca 2,5 liter vatten för 100 koppar. För

• Hur ekorrar äter där mat gör de äter med där mun och om så hur de äter med munnen inte jag frågar vad de eatI frågar hur de använder sina munnar för att lägga mat i kroppen?

  De förvara mat i deras kinden påsar, gå till en säker plats och ta bort maten. Håller det med sina främre tassar, de biter av små bitar och tugga och svälja maten. Sina framtänder är ganska stora så de använder dem att bita och deras kindtänder för a

• Hur du använder ättika att ta bort tecken på acnes?

  Nej, du kan använda en viss typ av tvål, och du kan också använda lemin juice...Vinäger och salt blandas är också känt att en akne ärr remover. Sprid ut dem på det drabbade området som du skulle om du använder en kräm. Efter cirka tio till tjugo minu

• Namnet på minst två typer av linje Goldsworthy använder och beskriver hur han använder dem att ge konkreta exempel är linjer skapar han autographic och förklara?

  Goldsworthy använder raka och böjda linjer. Han använder naturen för sina skapelser, floden och havet, blommor och pinnar. Goldsworthy är inte autographic. Hans verk är här än borta.