Gyorsítsuk fel a lapunkat 3. – CSS Sprite

A weblapunk felgyorsításának lehetőségeit tárgyaló sorozatunk a harmadik részéhez érkezett. Ebben a cikkben az ún. CSS Sprite eljárásról lesz szó, az alkalmazásával kisebb részben a kliens által letöltendő adatmennyiséget, nagyobb részben a szerver felé intézett kérések számát csökkenthetjük. A megtakarítás több mint jelentős lehet, és ez az eljárás a böngészők oldaláról is a széles körben támogatott megoldások közé tartozik.

Mik is az a CSS Sprite?

CSS SpriteA CSS Sprite eljárás lényege, hogy a weblapunkon felhasznált képeket egyetlen nagy képpé egyesítjük, és a stíluslapon (CSS) határozzuk meg, hogy az egyesített képnek épp mely részletét jelenítjük meg egy adott helyen. Ez természetesen sokkal egyszerűbb, mint amilyennek elsőre hangozhat. A trükk lényege, hogy egy HTML elemhez CSS-ben meghatározhatjuk a méretét, és hogy a háttérképe milyen eltolással jelenjen meg.

Nézzük egy konkrét példán keresztül, hogy miről is van szó. Legyen a lapunkon mondjuk 4 kisebb-nagyobb képünk. Amikor a lapunkat a böngészőben meg akarjuk jeleníteni, akkor a képek letöltéséhez a böngészőnek 4 kérést kell intéznie a webszerver felé, és a webszervernek 4 kérést kell kiszolgálnia.

Az eredeti HTML forrás

<!DOCTYPE html>
<html lang="hu">
  <head>
    <title>Példa</title>
  </head>
  <body>
    <p>
      <img src="fb.png" alt="Facebook"/>
      <img src="tw.png" alt="Twitter"/>
      <img src="gp.png" alt="Google+"/>
      <img src="pi.png" alt="Pinterest"/>
    </p>
  </body>
</html>

A CSS Sprite trükkel lehetőségünk van rá, hogy a szerver felé intézett kérések számát csökkentsük. A trükk nagyon egyszerű. A fenti példánál maradva, vegyük a 4 kis képünket, és egy nagyobb képben egyesítsük ezeket. Ha a képek palettái nem térnek el jelentősen, akkor a nagyobb képünk mérete kisebb lehet, mint a 4 kis képünk méretének összege lenne. A lényeg azonban nem ez.

Vegyünk ezután egy transzparens, azaz teljesen átlátszó képet, akár 1×1 pixel méretben (a példában transp.png). Az eredeti képet helyettesítsük be ezzel a képpel a HTML forrásban, és állítsunk be egy osztályt (class) hozzá. A stíluslapunkon (CSS) határozzuk meg a megadott osztályban a kis képünk méretét és az összefűzött képen elfoglalt pozícióját.

A CSS Sprite megoldás HTML forrása

<!DOCTYPE html>
<html lang="hu">
  <head>
    <title>Példa</title>
    <style type="text/css">
	.spfb {width:32px;height:32px;background: url(sprite.png) 0 0}
	.sptw {width:32px;height:32px;background: url(sprite.png) -32px 0}
	.spgp {width:32px;height:32px;background: url(sprite.png) 0 -32px}
	.sppi {width:32px;height:32px;background: url(sprite.png) -32px -32px}
    </style>
  </head>
  <body>
    <p>
      <img src="transp.png" alt="Facebook" class="spfb"/>
      <img src="transp.png" alt="Twitter" class="sptw"/>
      <img src="transp.png" alt="Google+" class="spgp"/>
      <img src="transp.png" alt="Pinterest" class="sppi"/>
    </p>
  </body>
</html>

A transzparens kép és a CSS-ben meghatározott háttérkép beállításával elértük, hogy az eredeti kis képünk helyén az összefűzött, nagy képünk általunk meghatározott részlete jelenjen meg. A szervernek pedig nem 4, hanem csupán 2 kérést kellett kiszolgálnia, miközben a megjelenített tartalom nem változott.

A fenti példában csak 4 képet említettem, de dolgozhatunk akár 40 vagy 100 kép összevonásával is, ahol még látványosabb lehet a megtakarítás.

Természetesen az egyesített képeknek nem kell méretben egyezniük, több weblapnál is láthattok példát arra, hogy akár a weblap összes képi elemét egyetlen nagy képben egyesítve, CSS Sprite megoldással szolgálják ki.

Az eljárás alkalmazása esetén a megtakarítás az összevont képi elemek számával egyenes arányban nő!

Kategória: SEO Címke: , , ,

Vélemény, hozzászólás?

Az email címet nem tesszük közzé. A kötelező mezőket * karakterrel jelöltük

*