ugrás a tartalomhoz

Több képi elem egy kép fájlban

Blintux · 2011. Feb. 18. (P), 13.23
Üdv!

Tapasztalt webfejlesztő vagyok, sok weboldalon vagyok túl...
Mindig törekszem arra, hogy a weboldalak mérete a lehető legkisebb legyen. Előszeretettel alkalmazom azt a megoldást, hogy több képi elemet egy képfájlban tárolok, majd CSS-ben a megfelelő koordinátára húzom a hátteret.
Azt viszont nem tudom, hogy ezzel a megoldással meddig érdemes elmenni. Teszem azt, van egy weboldal amely elég nagy képeket használ háttérnek. Külön a fejlécnek és a láblécnek, valamint a tartalmi részben is van pár háttér variáció.
Ezt mind el tudnám tárolni egy fájlban, ami így azért kevesebb letöltést, gyorsabb oldal betöltődést eredményezne.
Viszont nem tudom, hogy a böngészők, hogy állítják ellő a weboldalakat. Mert ha az adott képet öt helyen alkalmazom és a böngésző a felhasználó gépén a képet ötször betölti a memóriába, akkor azzal már az ő gépét terhelem.

Szóval a kérdésem: Mennyire érdemes nagyobb képekkel ezt a trükköt alkalmazni? Mennyire okozhat teljesítménybeli problémákat a felhasználónál? Lehetnek-e egyéb gondok belőle, amikre nem is gondoltam még?:)
 
1

css sprite

ironwill · 2011. Feb. 18. (P), 14.30
Ugye a css sprite-nak pont az lenne a lényege, hogy betöltődik a böngésző cache-be a kép onnan utána folyamatosan elérhető. lásd. pl. mouseover képek gyorsítása

(Én nagyobb képet nem tennék bele, esetleg gyakran használt kisebb képeket.)
2

Nem CSS sprite-nál, hanem

Udi · 2011. Feb. 18. (P), 14.53
Nem CSS sprite-nál, hanem sliding door módszernél vettem észre FireFox alatt, ha az egymásra helyezett divek mindegyikébe ugyanazt az 1600 pixel szélességű képet töltöm, akkor érezhetően lassabb a scrollozás, mintha az alsónak csak azt a 20px széles sávot töltöttem volna be, ami tényleg kell a hatás eléréséhez. Elképzelhető, hogy a sprite-oknál nem így viselkedik, és a képnek azt a részét, ami nem fér bele a divbe, azt nem kezeli, szemben azzal, ha egy div háttérképét egy benne lévő másik div háttere eltakarja. Az is lehet, hogy másik böngészőben nincs ilyen gond, szerintem próbáld ki.