CSS/Tutorials/Hintergrund/Sprites

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Sprites waren früher ein beliebter Trick, um Webseiten schneller zu machen: Viele kleine Bilder wurden zu einem einzigen großen Bild zusammengefügt. Dadurch musste der Browser weniger HTTP-Anfragen stellen. Mit background-position konnte man anschließend den gewünschten Ausschnitt anzeigen.

Heute könnte man Bilder mit object-position auch innerhalb eines <img>-Elements positionieren. Außerdem können moderne Browser viele Dateien effizient parallel laden.

SVG bietet gegenüber klassischen Bild-Sprites aber noch einen entscheidenden Vorteil: SVG ist nicht einfach ein fertiges Pixelbild, sondern beschreibt die Grafik als Vektoren.

  • CSS: Farben, Linien und andere Eigenschaften eines SVG lassen sich mit CSS verändern.
  • Hell- und Dunkelmodus: Ein SVG kann sich beispielsweise mit prefers-color-scheme an das Farbschema der Seite anpassen.
  • Animationen: Einzelne Formen eines SVG lassen sich animieren. So kann beispielsweise aus einem Kreis allmählich ein Quadrat werden (Shape-Morphing).

Damit wird aus einem früher hauptsächlich zur Einsparung von HTTP-Anfragen verwendeten Bild-Sprite ein viel flexibleres Werkzeug: SVG kann Grafik, Gestaltung und Animation miteinander verbinden.

→ SVG-Icons erstellen und verwenden

Funktionsweise

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 und mit background-position so verschoben, dass das einzelne Icon dann passend angezeigt wird.

Empfehlung: Wenn du alle Grafiken einer Webseite in einem Sprite zusammenfasst, benötigt man 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 ein schnelleres Laden einer Webseite.

background-position

Browserunterstützung
caniuse.com

Man kann mithilfe der Eigenschaft background-position bestimmen, an welcher Stelle sich die linken oberen Ecken der Hintergrundbilder befinden sollen. Dies wird beispielsweise angewendet, um durch Spritegrafiken die Ladezeit einer Internetseite zu verringern.


Beispiel ansehen …
      ... 
      #eins { background-position: center; }
      #zwei { background-position: -50px 100px; }
      #drei { background-position: right bottom; }
      #vier { background-position: left -50px bottom 100px; }


Mit background-position positionierst du das Hintergrundbild innerhalb des Anzeigebereiches (siehe auch background-clip).

Anwendungsbeispiel

In der Iconset-Vorlage wurden die verschiedenen Icons in einer großen Grafik zusammengefasst:

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;
}


Beispiel 
<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

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 man im Internet kostenlos in Anspruch nehmen kann. Lade Grafiken entweder einzeln oder gezippt hoch, der Generator fasst sie zu einem Sprite zusammen und entwirft dazu das passende CSS-Stylesheet.


Alternativen

  • Data-URI -Grafiken können direkt im Stylesheet integriert werden und benötigen so einen HTTP-Request weniger. Allerdings …
    • benötigen sie ca. 30% mehr Speicherplatz
    • 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

  1. ↑ Wikipedia: Sprite (Computergrafik)
  2. ↑ Wikipedia: CSS-Sprites


Sprite-Generatoren

Abgerufen am 3.10.2026
von "http://wiki.selfhtml.org/wiki/CSS/Tutorials/Hintergrund/Sprites"