Hogyan valósulnak meg a CSS sprite-ok egy oldalon…

CSS sprite-ok egy olyan módszer, amellyel több képet egy nagyobb képpé lehet összefűzni. Ezt CSS segítségével valósítják meg, a nagy kép szükséges részének láthatóságát a background-image, background-position és background-repeat tulajdonságokkal szabályozva.

Előnyök:

HTTP-kérések számának csökkentése. Ahelyett, hogy sok kicsi képet töltenénk be, egy nagy képet töltünk be.
Az oldal betöltési idejének gyorsítása. Kevesebb kérés a szerverhez, gyorsabb renderelés.
Adatforgalom megtakarítása. A fájl összmérete gyakran kisebb, mint az egyes képek összege.

Megvalósítás:

Sprite létrehozása: A képek egyesítése grafikus szerkesztőkkel vagy speciális online eszközökkel/összeállítókkal (pl. Webpack css-spritesmith-plugin plugin segítségével).

CSS: A sprite-ot használó elemekhez az alábbi stílusokat alkalmazzuk:

.icon {
  background-image: url('path/to/sprite.png'); /* A sprite fájl elérési útja */
  background-repeat: no-repeat; /* A kép nem ismétlődik */
  display: block; /* vagy inline-block, az elem függvényében */
  width: 32px; /* A szükséges ikon szélessége */
  height: 32px; /* A szükséges ikon magassága */
}

.icon-home {
  background-position: 0 0; /* A "Home" ikon szükséges részének pozíciója */
}

.icon-settings {
  background-position: -32px 0; /* A "Beállítások" ikon szükséges részének pozíciója */
}

A megadott CSS-kódban a .icon határozza meg az összes sprite-ot használó elem általános tulajdonságait. Az olyan osztályok, mint a .icon-home és .icon-settings, meghatározzák a szükséges kép pontos helyét a sprite-on belül a background-position segítségével.

Hogyan valósulnak meg a CSS sprite-ok egy oldalon vagy webhelyen?