HTML & CSSur HTML, XHTML & CSS
10 svar · 837 visningar · startad av haider
Ta en titt på logo-filen på https://www.linkedin.com.
Sparar man ner png-filen (sprite_global_v1.png) så får man en rejält stor bild.
Hur funkar det egentligen att göra så - på något sätt används partier i den stora bilden?
Och innebär det en fördel, att man alltså laddar in en enda stor bild en gång och sen på något vis återanvända partier av bilden?
med hjälp av background-position kan man styra vad av bilden som ska visas. Fördelen är väl att istället för att flera små bilder ska laddas så blir det bara en bild. Färre http-anrop på det sättet, vilket leder till att sidan går snabbare.
Här kan du läsa lite mer:
http://developer.yahoo.com/performance/rules.html#num_http
Så man skapar en div med en bestämd storlek och sedan positionerar man den stora bilden innanför den storleksbestämda div:en, korrekt?
Väldigt intressant knep.
Precis, läs mer: http://www.alistapart.com/articles/sprites
Och om man till exempel har en server i Sverige och besökare i Australien så kan skillnaden vara som natt och dag!
Själv har jag inte sett detta förrän rätt nyligen - varför har man inte gjort så förr?
För att tidigare versioner av webbläsare har haft svårt med "negativ" positionering.
Okej.
Ta en närmare titt på bilden
http://static.linkedin.com/scds/common/u/img/sprite/sprite_global_v1.png
Den är rätt stor och jag har sett fler exempel på hur stora de är. Dessutom upplever jag att de inte är så välorganiserade. Eller kanske spelar det ingen roll? Att tomrumet inte bidrar till så mycket i storleken på själva filen och att det därmed inte blir någon fara? Elelr bör man "packa" de olika elementen tajtare inpå varandra?
Okej.
Ta en närmare titt på bilden
http://static.linkedin.com/scds/common/u/img/sprite/sprite_global_v1.pngDen är rätt stor och jag har sett fler exempel på hur stora de är. Dessutom upplever jag att de inte är så välorganiserade. Eller kanske spelar det ingen roll? Att tomrumet inte bidrar till så mycket i storleken på själva filen och att det därmed inte blir någon fara? Elelr bör man "packa" de olika elementen tajtare inpå varandra?
Att "packar" ihop bilder kan ha en konsekvens i längden, och "stor" bild kan jag inte direkt påstå att den är, den är ju bara 10,01 kB (10 249 byte) kan garantera att om du delar upp den och skapar en bild per "block" så kommer den förmodligen överstiga 10 kB. data som beskriver att detta är en png bild behövs på varje bild som skapas.
Det som kan göra att det blir större fil totalt (jag har råkat ut för det) är att varje liten fil kan gå att komprimera hårt genom att minska antalet färger (png8) medans den grupperade bilden måste ha fler färger (png24) för att fungera.
Dock spelar det mindre roll i mitt fall, då det är Australiens ping-tid som ställer till problem. Att minska antalet requests gjorde STOR skillnad på upplevelsen för våra vänner "down under"
Det första stället som jag såg det här på var på Youtube. Deras sprites-bild finns här:
http://s.ytimg.com/yt/img/master-vfl171252.png
