Mi az a CSS sprite?

A CSS sprite-ok egy optimalizációs módszer, amely lehetővé teszi több kép egy nagy képbe való egyesítését. Ahelyett, hogy minden képet külön töltenénk be, a böngésző egy nagy fájlt tölt be, majd a CSS tulajdonságokat background-image, background-position és width/height használva jeleníti meg a szükséges részt ebből a képből.

A CSS sprite-ok használatának előnyei:

• HTTP kérések számának csökkentése: Egy fájl betöltése kevesebb, mint sok, ez csökkenti a szerver terhelését és gyorsítja az oldal renderelését.
• Gyorsítótár: Egy nagy kép a böngésző gyorsítótárába kerül, így javítva a teljesítményt ismételt látogatások esetén.
• Fájl méretének csökkentése: Bizonyos esetekben a képek összefűzése kis mértékben csökkentheti az összes fájl méretét a tömörítés optimalizálásával.

Példa használatra (HTML):

<div class="icon home"></div>
<div class="icon settings"></div>

Példa használatra (CSS):

.icon {
  width: 32px; /* Ikon szélessége */
  height: 32px; /* Ikon magassága */
  background-image: url('sprites.png'); /* Az sprite fájl elérési útja */
  background-repeat: no-repeat;
}

.icon.home {
  background-position: 0 0; /* Az "home" ikon pozíciója a sprite-on belül */
}

.icon.settings {
  background-position: -32px 0; /* Az "settings" ikon pozíciója a sprite-on belül */
}

Ebben a példában a sprites.png az a fájl, amely tartalmazza az "home" és "settings" ikonokat. A background-position tulajdonság határozza meg a eltolást, hogy a kívánt ikont jelenítse meg.