Image-Sprites, Vorteile und Nachteile
geschrieben von Felix Beuster amWebseiten auf Geschwindigkeiten zu optimieren sollte auch in Zeiten von DSL 100,000, Glasfaser oder was auch immer der Provider gerade anbietet, nicht unterschätzt werden. Auch mobil sind stetig mehr Nutzer online. Und in diesem Bereich haben wir auch sehr schwache Netze und meist Verträge, die nur einige Hundert Megabyte die volle Geschwindigkeit bieten.
Auf der anderen Seite nutzen wir als Gestalter der Website sicherlich auch gerne Grafiken, auch wenn man von seinem Design behaupten mag, es sind nicht viele. Steuerelemente, Icons, Hintergründe, da kann einiges zusammen kommen.
Alles in eigene Dateien zu packen mag logisch erscheinen, und haut auch sicher seine Vorteile, wenn es aber um Optimierung geht, würde ich einer Grafik, die dann mehrere Teile enthält, den Vorzug geben. Hier mal Vor- und Nachteile aus meiner Sicht.
Vorteil: Ladezeit
Was beim Laden einer Website bremsen kann, sind die einzelnen Verbindungen, die für jede Datei aufgebaut werden. Zudem hat jede Datei natürlich auch eine Zeit, die sie braucht um heruntergeladen zu werden. Verwende ich statt sechs Icons nur eine Datei mit allen Icons darin, bleibt die Ladezeit theoretisch gleich, aber ich spare mir fünf Verbindungen, die nicht aufgebaut werden müssen. Jede Verbindung mit 25 Millisekunden (Pi mal Daumen Durchschnitt nach Beobachtung) die gespart werden kann, summiert sich bei sechs Icons immerhin auf bis zu 0,15 Sekunden. Das mag nicht viel klingen, aber bei vielen Grafiken und schwankenden Zeiten zum Verbindungsaufbau, kann der Effekt deutlich spürbar werden.
Ein weiterer Punkt der Ladezeiten reduziert ist die Dateigröße. Je nach Grafiken ist ein Sprite deutlich kleiner als die Summe der Einzeldateien. In einem Projekt habe ich den Fall von 6,3kB für 4 kleine Einzeldateien und nur 2,5kB für das Sprite, eine Reduzierung um 60%. In der Theorie spare ich für die Grafiken also nicht nur 3 Verbindungen, sondern auch 60% an Zeit und Datenvolumen für den Download. Auch hier, je mehr Grafiken optimiert werden, desto besser der Effekt.
Nachteile: Planung und Mehrarbeit
Ein paar Minuspunkte habe ich dennoch zu vergeben. Ist es geplant, die Grafiken in X- und Y-Richtung zu wiederholen, so ist das mit einem Sprite nicht möglich. Wiederholung entlang einer Achse funktioniert, allerdings wird dann Planung nötig, das heißt man muss beachten, dass entlang der Achse keine andere Grafik im Sprite untergebracht wird.Planung ist auch nötig, wenn ich eine Grafik mittels Padding neben einen Text bringen möchte. Setze ich das Sprite als Hintergrund und positioniere es, kann es sein, dass das Sprite in das Element hinein ragt, bringe ich dort also Grafiken unter, sind diese dann ungewollt zu sehen.
Und wenn wir bei Positionierung sind, sind wir auch beim dritten Nachteil von Sprites: Es gibt mitunter einen höheren CSS-Aufwand. Zwar kann ich für eine ganze Reihe von Elementen eine einzige Grafik als Hintergrund festlegen, aber ich muss dann für jedes Element (mitunter extra) die Positionierung des Hintergrundes angeben. Je nach Aufbau der CSS-Datei kaum spürbar bis doch recht deutlich.
Wie geht’s?
Die Nutzung ist relativ einfach. In einem beliebigen Grafikprogramm werden die Einzelbilder zusammengesetzt. Wichtig ist nur, dass darauf geachtet wird, dass sich keine Grafiken überlappen. Bei vielen transparenten Flächen muss man da schon gut hinschauen.
In der CSS-Datei werden dann einfach die jeweiligen Elemente mit einem Hintergrundbild ausgestattet und dieses wird dann positioniert. Die Verschiebung verläuft dabei entlang der x-Achse und im zweiten Wert entlang der y-Achse, dabei sind die Werte 0 oder negativ.
1.myElem {2 background: url(sprite.png) no-repeat -16px 0px;3}Fazit
Für mich überwiegt der Vorteil der kürzeren Ladezeiten klar die Einschränkungen, die sich durch ein Sprite ergeben. Ich würde jedem Entwickler/Gestalter, der das Konzept noch nicht versucht hat ans Herz legen, es nachzuholen. Was sind eure Erfahrungen, gibt es noch weitere Vor- oder Nachteile die ihr festgestellt habt?
Gallerie
Mehr aus Webentwicklung
Ein parr mehr Artikel
Kommentare
Du hast von Grafiken gesprochen, die du mittels "Padding" positionieren willst. Ich habe mir um sowas zu umgehen angewöhnt für Elemente mit Icons einen eigenen kleinen Container neben dem Text zu erstellen, bei dem ich die Größe festlegen kann und der ich positionieren kann, wie ich lustig bin. Ist etwas komfortabler, als mit der Background Position rumzufrickeln.
Wenn ich on the fly ein Design entwickle(entwickeln muss), gehe ich oft so vor, dass ich zuerst Einzelbilder erstelle und sie dann später erst zusammenfasse. Das ist dann natürlich doppelt Zeitaufwendig, was dafür spricht sich mittels Screen Design vorher gut Gedanken zu machen, welche Icons man brauchen wird... und vor allem, ob dafür dann überhaupt Bilder nötig sind. Oft kann man vieles auch nur mit ein bisschen CSS umsetzen(Simple Buttons und Co.).
Leider ist die Unterstützung von SVGs noch zu frisch, als dass sie ohne Fallback eingesetzt werden könnte. Aber in einigen Jahren werden wir das Problem hoffentlich nicht mehr haben und brav mit Inline-SVG arbeiten können. Dann haben wir an Icons keine weiteren Requests mehr nötig. Aber das wird wohl erstmal noch ein Traum bleiben.
Bitt warte 20 Sekunden, bevor du das Formular abschicken kannst.