CSS Image Sprites. Exemplu explicat.

Image Sprites

Un image sprite este o colecție de imagini puse într-o singură imagine.
O pagină web cu multe imagini poate dura mult timp pentru a se încărca și generează mai multe solicitări de server.
Utilizarea image sprite-urilor va reduce numărul de solicitări de server și va economisi lățimea de bandă.

Image Sprites - Exemplu simplu

În loc să folosim trei imagini separate, folosim această singură imagine („img_navsprites.gif”):



Cu CSS, putem afișa doar partea din imagine de care avem nevoie.

În exemplul următor, CSS specifică ce parte a imaginii "img_navsprites.gif" să arate:

Exemplu:

#home {
  width: 46px;
  height: 44px;
  background: url(img_navsprites.gif) 0 0;
}

Exemplu explicat:

<img id = "home" src = "img_trans.gif"> - Definește doar o imagine transparentă mică, deoarece atributul src nu poate fi gol. Imaginea afișată va fi imaginea de fundal pe care o specificăm în CSS.
width: 46px; height: 44px; - Definește portiunea imaginii pe care dorim sa o folosim.
background: url(img_navsprites.gif) 0 0; - Definește imaginea de fundal și poziția acesteia (left 0px, top 0px).
Acesta este cel mai simplu mod de a utiliza image sprites, acum dorim să-l extindem folosind link-uri și efectele hover.