CSS/Tutorials/Sprites

Aus SELFHTML-Wiki
< CSS‎ | Tutorials
Wechseln zu: Navigation, Suche

In diesem Artikel lernen Sie, wie Sie grafische Elemente wie Icons, Logos und Dekorationen zu einer größeren Grafik, einem Sprite zusammenfassen können.

Funktionsweise[Bearbeiten]

Der Begriff Sprite kommt von älteren Videospielen, bei denen zu Beginn eine größere Grafik in den Speicher geladen und nur abschnittweise angezeigt wurde. In einer späteren Spielphase wurde die Grafik verschoben und konnte so sofort ohne Ruckeln angezeigt werden.

CSS-Sprites[Bearbeiten]

Im Webdesign funktioniert dies ähnlich. Icons und Dekorationsgrafiken sollten immer als Hintergrundbilder verwendet werden, um den HTML-Code übersichtlicher zu behalten. Das Sprite, das alle Grafiken beinhaltet, wird anfangs geladen, das einzelne Icon wird dann durch background-position passend verschoben.

Vorteile[Bearbeiten]

Wenn Sie alle Grafiken einer Webseite in einem Sprite zusammenfassen, benötigen Sie nur einen HTTP-Request. Gerade bei gif-Grafiken ist der Speicherbedarf einer größeren Grafik oft geringer als die der Summe vieler kleiner Einzelgrafiken. Dies sorgt so für eine schnelleres Laden einer Webseite.

Anwendungsbeispiel[Bearbeiten]

  • Chrome
  • Firefox
  • IE
  • Edge
  • Opera
  • Safari

Ist Ihnen schon einmal unsere Iconset-Vorlage aufgefallen? Wenn Sie mit Rechtsklick das Kontextmenü öffnen und anschließend das Element untersuchen sehen Sie, dass die verschiedenen Icons in einer großen Grafik zusammengefasst sind:

Iconset.png

Das Listenelement li hat eine feste Breite und Höhe von je 32px, das darin befindliche absolut positionierte Bild wird passend verschoben. Überstehende Bereiche des Bildes werden mit overflow:hidden; ausgeblendet.

In unserem Anwendungsbeispiel wollen wir das gleiche Sprite für Hintergrundgrafiken nutzen.

Beispiel ansehen …
a {
  background: url(//wiki.selfhtml.org/images/d/d8/Iconset.png);  /*Protokoll-relative URL */
  height: 32px;
  width: 32px;
  overflow: hidden;
}
.chr{
  background-position: 0 -155px;
}
.fx {
  background-position: 0 -62px;
}
.ie {
  background-position: 0 -31px;
}
.edge {
  background-position: 373px -31px;
}
.op {
  background-position: 0 0;
}
.saf {
  background-position: 0 -93px;
}
<p>    
  <a class="chr" href="https://www.google.de/chrome/browser/desktop/">Chrome</a>
  <a class="fx" href="https://www.mozilla.org/de/firefox/new/">Firefox</a>
  <a class="ie" href="windows.microsoft.com/de-de/internet-explorer/download-ie">
    Internet Explorer</a>
  <a class="edge" href="http://windows.microsoft.com/de-de/windows/preview-microsoft-edge-pc">
    Edge</a>
  <a class="op" href="http://www.opera.com/de">Opera</a>
  <a class="saf" href="https://www.apple.com/de/safari/">Safari</a>
</p>
Der Text der einzelnen Verweise wird mittels Image-Replacement ausgeblendet.

Anstelle dessen wird mittels background das Iconset-Sprite geladen. Höhe und Breite der einzelnen Icons sollen jeweils 32px betragen, überstehende Bereiche werden mit overflow:hidden; abgeschnitten.

Jeder Verweis erhält eine Klasse. Im CSS wird nun mittels background-position der jeweils passende Bereich festgelegt. Das Iconset wird passend verschoben.

Sprites erstellen[Bearbeiten]

Es gibt zwei Ansätze. Sie können bereits bei der Konzeption Ihres Webprojekts Icons entwerfen und in einem möglichst gleichmäßigen Raster anordnen. Dies erleichtert später das Berechnen der nötigen Verschiebung.

Bequemer ist die Verwendung von Sprite-Generatoren, die Sie im Internet kostenlos in Anspruch nehmen können. Sie laden Ihre Grafiken entweder einzeln oder gezippt hoch, der Generator fasst sie zu einem Sprite zusammen und entwirft dazu das passende CSS-Stylesheet.


Alternativen[Bearbeiten]

  • Data-URI -Grafiken können direkt im Stylesheet integriert werden und benötigen so einen HTTP-Request weniger. Allerdings ist eine spätere Veränderung nur sehr schwer möglich.
  • Icon-Fonts ähneln Sprites, da sie ebenfalls alle Grafiken in einer Datei zusammenfassen. Darüber hinaus haben sie den Vorteil, da sie
    • als Text problemlos skalierbar sind
    • mit CSS in Farbe, Form und Schatten gestaltet werden können.
  • SVG-Icons verbinden die Vorteile beider Ansätze, da sie
    • als Vektorgrafiken immer gestochen scharf skalierbar sind
    • durch CSS und mit den Möglichkeiten von SVG mehrfarbig gestaltet, mit Filtern verändert und sogar animiert werden können.
    • ebenfalls in Sprites zusammengefasst werden können


Weblinks[Bearbeiten]

Artikel[Bearbeiten]

Sprite-Generatoren[Bearbeiten]