Ich weiß nicht wie es euch geht, aber wenn ich neue User App Ideen ausarbeite, lege ich am Anfang nicht sehr viel Wert auf Performance. Was mich im späteren Verlauf der Entwicklung dazu zwingt die ein oder andere Sache zu überarbeiten. Seit einigen Monaten versuche ich daher gezielt das Nachladen von Bildern zu minimieren. Wie man das am besten Macht und ein Praxisbeispiel gibt es im heutigen Blogeintrag.

Gerade User Apps mit vielen Grafiken stellen für User Apps die hauptsächlich von Handyusern genutzt werden ein größeres Problem dar. Jedes Bild muss heruntergeladen werden. Gerade bei Apps wie Memory mit mehr als 100 verschiedenen Motiven, kann das wenn jedes Bild einzeln heruntergeladen werden muss sehr lange dauern. Daher habe ich mich entschlossen zumindest ein paar Requests (Serveranfragen) sowie das Nachladen von Grafiken einzusparen in dem ich Sprites verwende.

Was sind Sprites?

Im Webdesign wird der Begriff Sprites als Bezeichnung für Grafikdateien verwendet, die aus mehreren kleinen Einzelgrafiken bestehen. Diese Sprites können anschließend mit CSS in eure User Apps so eingebunden werden, dass der Client nur die benötigten Teilausschnitte der Spritegrafik anzeigt.

Welche Vorteile bringen Sprites?

Wie bereits oben geschrieben, wirkt sich die Verwendung von Sprites positiv auf die Gesamtladezeit einer User App aus. Gerade für User die über das mobile Internet oder über langsame Internetverbindungen (ja die gibt es auch noch!) online sind, können durch die Verwendung von Sprites enorm an Geschwindigkeit gewinnen. Wenn Sprites allerdings richtig verwendet werden, gibt es noch einen weiteren Vorteil. Es entstehen keine Verzögerungen mehr, die durch das Nachladen von Grafiken entstehen können. Dies kann zum Beispiel passieren, wenn ein Hovereffekt ausgelöst werden soll, bei dem ein anderes Bild angezeigt werden soll.

Können sie auch Nachteile bringen?

Natürlich ist nicht immer alles aus Gold was glänzt, doch die Nachteile kommen für die meisten User Apps nicht wirklich zum Tragen. Der größte Nachteil den es geben könnte, ist das erstellen dieser Sprite-Grafiken. Doch dafür habe ich weiter unten eine Lösung in den Tipps.

Zum anderen müsst ihr euch immer überlegen, wieviele Grafiken verwende ich überhaupt in meinem Projekt? Sind es nur ein Paar, dann kann man auf Sprites verzichten. Die Ladezeit wäre unter Umständen größer, als bei der Verwendung von einzelnen Bildern.

Wie verwende ich Sprites?

Ursprungsbild:

CSS-Block:

.Knuddel-Rot {
  background-image: url('../images/KnuddelSprite.png');
  background-repeat: no-repeat;
}
.Knuddel-Rot {
  height: 234px;
  background-position: 0px -234px;
}
.Knuddel-Rot:hover {
  height: 234px;
  background-position: 0px 0px;
}

HTML-Block:

<div class="Knuddel-Rot"></div>

Vorschau:

Tipps:

Natürlich gibt es auch online schöne Helfer, die das Arbeiten mit Sprites wesentlich vereinfachen und einem das mühsame positionieren der einzelnen Bilder mit einem Grafikprogramm ersparen. Sehr empfehlen kann ich die Seite http://www.de.spritegen.website-performance.org/. Sie ist kostenlos und ohne Registration zu verwenden und mit simplen Einstellungsmöglichkeiten versehen. Ebenfalls positiv fällt auf, dass nicht nur die neu erstellten Grafiken, sondern auch das dazugehörige CSS sowie die HTML-Datei heruntergeladen werden kann.