Das Problem, das Sprites lösten

Vor rund einem Jahrzehnt hatte jede Bild-Anfrage im Web spürbare Kosten: Unter dem damaligen HTTP/1.1 konnte ein Browser nur wenige Dateien gleichzeitig laden, und jede einzelne verursachte Verzögerung. Eine Seite mit 30 kleinen Icons bedeutete 30 Anfragen — und damit eine langsame Seite. Die Lösung hieß CSS-Sprite: Man packte alle Icons in ein großes Bild und zeigte per CSS jeweils nur den passenden Ausschnitt.

Wie es funktionierte

Ein Sprite-Bild ist ein Raster vieler kleiner Grafiken. Im CSS gibt man dem Element dieses Bild als Hintergrund und verschiebt mit background-position den sichtbaren Ausschnitt zum gewünschten Icon:

.icon {
  background-image: url("/sprite.png");
  width: 24px;
  height: 24px;
}
.icon-home  { background-position:   0 0; }
.icon-suche { background-position: -24px 0; }
.icon-menu  { background-position: -48px 0; }

Ein Bild, viele Icons, eine einzige Anfrage. Für die damalige Technik ein echter Performance-Gewinn.

Warum das Problem verschwand

Mit HTTP/2 (und heute HTTP/3) hat sich die Grundlage geändert: Moderne Verbindungen laden viele Dateien parallel und effizientüber eine einzige Verbindung — die Kosten pro Anfrage sind drastisch gesunken. Damit ist der Hauptvorteil des Sprites — Anfragen sparen — weitgehend entfallen. Gleichzeitig zeigten Sprites ihre Nachteile immer deutlicher:

  • Pixelbasiert: Sprites (meist PNG) skalieren nicht scharf auf Retina-Displays.
  • Umständliche Pflege: Ein neues Icon bedeutet, das Sprite-Bild und die Positions-Angaben neu zu bauen.
  • Kein einfaches Umfärben: Farbe und Dark-Mode-Anpassung sind mühsam.

Was heute an ihre Stelle tritt

  • Inline-SVG oder SVG per img: skaliert scharf, per CSS umfärbbar. Die Wege dazu stehen im Beitrag SVG einbinden.
  • SVG-Sprite: die moderne Weiterentwicklung des Sprite-Gedankens — eine SVG-Datei mit mehreren symbol-Definitionen, per use referenziert. Man behält die gebündelte Datei, gewinnt Skalierbarkeit und Styling.
  • Einzelne gecachte SVG-Icons: Dank HTTP/2 kein Problem mehr, und maximal flexibel.

Warum SVG für Icons ohnehin die beste Wahl ist, vertieft der Beitrag SVG, PNG oder JPG für Icons.

Wann Sprites noch vorkommen

Ganz tot sind Sprites nicht: In Bestandsprojekten, bei sehr vielen winzigen Raster-Grafiken (etwa Spiel-Assets) oder wo aus anderen Gründen ein einziges Bild gewünscht ist, haben sie weiter ihren Platz. Für eine neue Website mit Icon-Bedarf ist der Sprite-Ansatz aber selten die erste Wahl — SVG löst dasselbe eleganter. Die ehrliche Kurzfassung: Kennen schadet nicht, brauchen wirst du sie selten.

Häufige Fragen

Was ist ein CSS-Sprite?

Ein einzelnes Bild, das viele kleine Grafiken (meist Icons) enthält, angeordnet in einem Raster. Per CSS zeigt man mit background-position jeweils nur den passenden Ausschnitt. Zweck war, viele einzelne Bild-Anfragen zu einer zusammenzufassen und so die Ladezeit zu verkürzen.

Sind CSS-Sprites heute noch sinnvoll?

Meist nicht mehr. Der Hauptvorteil — weniger HTTP-Anfragen — ist mit HTTP/2 und HTTP/3 weitgehend entfallen, weil moderne Verbindungen viele Dateien parallel und effizient laden. Heute sind SVG-Icons, Icon-Fonts oder Inline-SVG in der Regel die bessere Wahl.

Was ist an die Stelle von CSS-Sprites getreten?

Vor allem SVG: als Inline-SVG, als SVG-Sprite (ein SVG mit mehreren symbol-Definitionen) oder als einzelne, gecachte SVG-Dateien. SVGs skalieren scharf, lassen sich per CSS umfärben und sind für Icons ideal. Für einfache Fälle reichen auch einzelne kleine Bilder.

Was ist ein SVG-Sprite?

Die moderne Variante des Sprite-Gedankens: eine SVG-Datei, die mehrere Icons als symbol-Elemente enthält. Im HTML referenziert man per use das gewünschte Symbol. Man behält den Vorteil einer gebündelten Datei, gewinnt aber Skalierbarkeit und CSS-Styling dazu.

Quellen

MDN — Entwicklung von HTTP · MDN — SVG use (SVG-Sprites).