Was ist ein Sprite im digitalen Design?

Bitmap-Sprites

Ein Sprite (engl. für Kobold, Elfe, Wicht, aber auch für eine Farn-Art, woher der Name wohl am ehesten stammt) ist eine Bilddatei, die mehrere Einzelbilder bzw. Grafiken enthält. Das Bild wird dann im Hintergrund verschiedener Elemente der HTML-Struktur geladen und jeweils so im sichtbaren Bereich auf der X- und Y-Achse verschoben, dass immer das richtige Bild angezeigt wird.

Ein Sprite wird erstellt, weil weniger “Socketverbindungen” aufgebaut werden müssen, um alle Grafiken zu laden, als wenn die Bilder einzeln herunter geladen werden. Da es für die Programmierung einer Seite wichtig ist, zu wissen wo welche Grafik auf dem Sprite sitzt, übernehmen meist die Frontend-Programmierer diese Aufgabe.

Bei der Absprache mit den Programmierern ist ggf. zu beachten, ob es unterschiedliche Sprites für Grafiken gibt die 1Bit oder 8Bit Alpha brauchen. Dies wäre sinnvoll, weil Optimierungen für 1Bit Grafiken, die meist auch nur mit geringem Farbumfang gespeichert werden sinnlos werden, wenn diese ein einem Sprite landen das als unkomprimiertes PNG24 exportiert wird. Hier sollte ggf. TinyPNG zum Einsatz kommen, das ich in den Online-Ressourcen im Abschnitt Grafiken erzeugen und optimieren neben der Sprite-Hilfe SpriteCow verlinkt habe.

Da die meisten Browser inzwischen SVGs unterstützen (zumindest mit den gängigsten, noch nicht allen Spezifikationen) werden Sprites kaum noch gebraucht. Ein Einsatzszenario können jedoch nach wie vor Spezialgeräte sein, deren Architektur den Einsatz von Bitmapgrafiken erfordert.

Auf Autobahnkirche.de ist das Headerbild als CSS-animiertes Sprite eingebunden. Das Sprite besteht aus 10 Einzelbildern, die hintereinander, ohne animierten Übergang, in den sichtbaren Bereich geschoben werden.

Facebook nutzt auch 2020 im Web ein Sprite für die Gruppen-Icons. Xing hingegen hat zwar das alte Sprite noch online, ist jedoch inzwischen auf eine Kombination von Inline-SVGs die direkt im HTML-Code integriert wurden und One-Div-Icons für die Indikatoren.

Auch in Spielen, die auf Pixelgrafiken basieren, werden Sprites eingesetzt. Bei der Suche nach SpriteCow habe ich dieses Kuh-Spritesheet gefunden, das verschiedene Walk-Cycles von diversen Kühen enthält und für ein Spiel heruntergeladen werden kann.

Auch in der Software Scratch, in der Kinder und Erwachsene mit vorgefertigten Funktions-Bausteinen an die Programmierung herangeführt werden, werden die animierbaren Charaktere als Sprite bezeichnet. Warum, das erschließt sich erst nach dem man ein die Kostüme geschaut hat: dort sind verschiedene Ausführungen der Figuren, z.B. für einen Walk-Cycle, zwischen denen der User mit Hilfe der Programmierung hin und her switchen kann.