Sie befinden sich hier:
» 
» 
19.01.2011

Performancegewinn durch CSS-Sprites

Die Ladezeit einer Webseite ist ein zunehmend wichtigeres Kriterium für deren Ranking. Aus diesem Grund sollten Sie versuchen, die Ladezeiten zu optimieren und somit die Performance zu steigern. Eine von vielen Möglichkeiten ist es, die Anzahl der http-Requests (Anfragen) zu minimieren. Jedes kleine Hintergrundbild muss nicht beim Laden einer Seite separat geladen werden.

Wenn Sie versuchen, mehrere Bilder in ein gemeinsames Bild zu kombinieren, so kann auf effektive Art a) das zu übertragende Datenvolumen und b) die Anzahl der Requests verringert werden. Der Zugriff auf die einzelnen Elemente erfolgt über die Variation der background-position.
Die Technik wird als „CSS-Sprites“ bezeichnet.

Das folgenden Beispiel soll das Prinzip veranschaulichen.
Generell gilt:
Die notwendigen Stylesheet-Angaben sind idealerweise in einer separaten Datei abzulegen und einzubinden.

Schritt 1 - Erstellung einer Grafik

  • Das Bild enthält mehrere Bilder.
  • Des Weiteren beinhaltet das Bild mehrere Zustände, um auch hover-Effekt mit darstellen zu können.

Schritt 2 - Erzeugung der Stylesheets, um auf die einzelnen Bildbereiche zugreifen zu können.

<style type="text/css">
  .bgImage {
    width: 20px;
    height: 20px;
    margin: 0px;
    padding:0px;
    background: url(./image/controls.png) top left scroll no-repeat;
    cursor:pointer;
    float:left;
  }
  #btnStop{
    background-position: -100px 0;
  }
  #btnStop:hover{
    background-position: -100px -25px;
  }
  #btnPlay {
    background-position: -75px 0;
  }
  #btnPlay:hover{
    background-position: -75px -25px;
  }
  #btnNext {
    background-position: -25px 0;
  }
  #btnNext:hover{
    background-position: -25px -25px;
  }
  #btnPrev {
    background-position: 0 0;
  }
  #btnPrev:hover{
    background-position: 0 -25px;
  }
  #btnClose {
    background-position: -50px 0;
  }
  #btnClose:hover{
    background-position: -50px -25px;
  }
</style>

Schritt 3 - Zuweisung der Stylesheets

  <div id="btnStop" class="bgImage"></div>
  <div id="btnPlay" class="bgImage"></div>
  <div id="btnNext" class="bgImage"></div>
  <div id="btnPrev" class="bgImage"></div>
  <div id="btnClose" class="bgImage"></div>

Ergebnis:

Autor: Mein Name ist Harry Kämpf und ich bin seit vielen Jahren als Projekt Manager im Webumfeld tätig. Auf diesen Erfahrungen basieren die Tipps zur Webseitengestaltung. Ich schreibe gern über Webthemen, nehme aktuelle Trends auf und gebe bei Bedarf kompetente Beratung. Mehr Infos können Sie auf ueber-mich.html nachlesen.

11