[K050V4]

Hallo liebe Community,

ich hatte wieder ein bisschen Zeit gefunden und habe an einem kleinen Projekt weitergearbeitet.
Es handelt sich um einen Sprite-Generator. Sprites sind kurz gesagt Grafiken, die aus mehreren Grafiken zusammengefügt worden und mittels CSS werden die einzelnen Grafiken (Ausschnitte) HTML-Elementen als Hintergrund gesetzt. Dadurch spart man HTTP-Anfragen ein und minimiert u.A. auch die Größe der zu ladenden Dateien. Das Ganze schont Webserver und Bandbreite.

Die Benutzung des Tools ist hoffentlich selbsterklärend, wenn nicht bitte ich um Feedback. Schaut es euch mal an: www.spritify.com

Ich würde mich über Verbesserungsvorschläge sehr freuen. Das ganze ist noch Beta und basiert auf:

HTML 5
Silex (symfony2)
Twig
jQuery + jQuery UI

Liebe Grüße

[Ludacris]

Aaaaaaaah IE9 sollte das ganze eigentlich unterstützen :S solltest da mal schaun

[Holger_N]

Hmm also wenn ich auf eine Seite gehe, die mir eine Technik anbietet, die meine Seite schneller machen soll und ich kann das nicht ausprobieren, weil mir die Ladezeiten auf der Seite einfach zu lang sind, dann ist das nicht so förderlich für das Projekt.
Ich verstehe auch die Funktionsweise noch nicht so ganz. Also wenn ich ein 100kb Bild habe und splitte das in 10 Bilder je 10 kB, dann hab ich doch die Datenmenge trotzdem. Ich kann die Einzelbilder doch auch nur soweit minimieren, wie ich auf deren Summe auch das Gesamtbild minimieren könnte und dann aus den Stücken noch ein Bild zusammenfriemeln, ist für die Technik doch noch mehr Arbeit, als ein einziges Bild anzuzeigen.

[NikiLaus2005]

Umgekehrt, Holger: Du hast 10 Grafiken (Gogle Mail macht das auch so, so erklaer ich's mals): Das Google-Logo, den Markierungs-Stern, den Loeschen-Button, den Papierkorb und sowas. Un anstatt jetzt die alle einzeln auszuliefern, wird das nebeneinader in ein bild gequetscht, und dann mittels css vom browser zerschnitten, und die teile da hingetan, wo sie hingehoeren.

Dadurch werden weniger dateien uebertragen, und das bild kann u.U. kleiner werden, da statt 10 PNG-Headern nur 1 uebertragen wird, oder so.

[Bullayer]

Die Ladezeiten der Seite sind definitv viel zu lang.

[K050V4]

Ja, das ist ein Billigerhoster. Die Seite werde ich auf jeden Fall auf einen viel schnelleren Server umziehen :-)

@Holger_N
NikiLaus2005 hat's super erklärt. :-)

@Ludacris
Der Internet-Explorer tut sich da leider sehr schwer... ich benutze viel HTML5-Funktionen, z.B. Drag & Drop und damit kommt der IE gar nicht klar :-/

[Bullayer]

Dann solltest du einen Hinweis einblenden, dass der IE als Browser mit der Seite Probleme hat.

[Holger_N]

Zitat (NikiLaus2005: 24.06.2011, 19:04)

Umgekehrt, Holger: Du hast 10 Grafiken (Gogle Mail macht das auch so, so erklaer ich's mals): Das Google-Logo, den Markierungs-Stern, den Loeschen-Button, den Papierkorb und sowas. Un anstatt jetzt die alle einzeln auszuliefern, wird das nebeneinader in ein bild gequetscht, und dann mittels css vom browser zerschnitten, und die teile da hingetan, wo sie hingehoeren.

Dadurch werden weniger dateien uebertragen, und das bild kann u.U. kleiner werden, da statt 10 PNG-Headern nur 1 uebertragen wird, oder so.

Achso - ja das macht dann technisch schon Sinn, wäre mir aber zu umständlich.

[K050V4]

Zitat (Holger_N: 24.06.2011, 22:08)

Achso - ja das macht dann technisch schon Sinn, wäre mir aber zu umständlich.

Genau das sollt dir ja das Tool abnehmen. Die Grafiken werden zusammengefügt und der CSS-Code wird für dich automatisch generiert. Du musst nur diese eine Grafik hochladen und dein CSS ein wenig anpassen.

Zitat (Bullayer: 24.06.2011, 20:10)

Dann solltest du einen Hinweis einblenden, dass der IE als Browser mit der Seite Probleme hat

Es wird eigentlich bei den IE alles ausgegraut, sodass man nichts anklicken kann und eine Meldung dass der Browser nicht unterstütz wird erscheint auch. Ich werde es aber mit allen IEs testen und verbessern.

[Holger_N]

Zitat (K050V4: 24.06.2011, 22:27)

Genau das sollt dir ja das Tool abnehmen. Die Grafiken werden zusammengefügt und der CSS-Code wird für dich automatisch generiert. Du musst nur diese eine Grafik hochladen und dein CSS ein wenig anpassen.
...

Nee da hab ich ne andere Philosophie.

[G701R]

Zitat (Holger_N: 24.06.2011, 22:08)

Achso - ja das macht dann technisch schon Sinn, wäre mir aber zu umständlich.

Ich weiß nicht ob das schon richtig klar geworden ist, indirekt wurde es ja schon genannt: Weil statt 10 Bildern nur 1 Bild vom Server geholt wird, hat das einen großen Geschwindigkeitsvorteil, wenn es um Bildwechsel geht, z.B. bei a:focus oder a:hover. Wenn man zu einem gänzlich neuen Bild wechselt, geht das nicht flüssig, weil es erst nachgeladen wird. Bei der Verwendung von Sprites ist das Bild, zu dem gewechselt wird, schon geladen, weil es im Sprite enthalten ist. Per background-position wird nun einfach ein anderer Ausschnitt des Sprites gezeigt (und somit das Bild gewechselt). Wartezeit für den Bildwechsel gleich 0.

Seit ich das mal bei einem Praktikum gelernt habe, benutze ich das immer und frage mich oft, warum diese eigentlich geniale Technik nicht verbreiteter ist.

Der Nutzen, für "feststehende" Grafiken Sprites zu benutzen, ist dagegen kleiner, glaube ich.

Dieser Beitrag wurde von G701R bearbeitet: 25. Juni 2011 - 15:35

[Holger_N]

Zitat (G701R: 25.06.2011, 16:28)

Ich weiß nicht ob das schon richtig klar geworden ist, indirekt wurde es ja schon genannt: Weil statt 10 Bildern nur 1 Bild vom Server geholt wird, hat das einen großen Geschwindigkeitsvorteil, wenn es um Bildwechsel geht, z.B. bei a:focus oder a:hover. Wenn man zu einem gänzlich neuen Bild wechselt, geht das nicht flüssig, weil es erst nachgeladen wird. Bei der Verwendung von Sprites ist das Bild, zu dem gewechselt wird, schon geladen, weil es im Sprite enthalten ist. Per background-position wird nun einfach ein anderer Ausschnitt des Sprites gezeigt (und somit das Bild gewechselt). Wartezeit für den Bildwechsel gleich 0.

Seit ich das mal bei einem Praktikum gelernt habe, benutze ich das immer und frage mich oft, warum diese eigentlich geniale Technik nicht verbreiteter ist.

Der Nutzen, für "feststehende" Grafiken Sprites zu benutzen, ist dagegen kleiner, glaube ich.

Jetzt wo ich drüber nachdenke merke ich, dass ich das auf einigen Seiten auch so mache, allerdings eben genau für diesen Zweck, bei Wechselbildchen in Navigationsleisten und nicht für Bilder auf der Seite. Da sehe ich keinen Vorteil bzw. kann ich mir nicht vorstellen, an welcher Stelle man da ein Tool einsetzen sollte.

[Witi]

Der Sinn dahinter ist nicht unbedingt die Geschwindigkeit, sondern die Latenz.

Ich habe das in einem Projekt mitbekommen, wo Besucher aus Japan versucht haben auf eine Webseite zuzugreifen, die auf einem deutschen Server lag. Die Seite hat in Japan Minuten gebraucht um zu laden, in Deutschland war sie dagegen in Millisekunden da.
In diesem Fall wurde die hohe Latenz durch duzente von JavaScript-Dateien verursacht, die die Browser _nacheinander_ geladen haben. Als man sie zu einer Datei "gemergt" hat, konnte die Webseite auch aus Japan ohne Geschwindigkeitsprobleme besucht werden.

[hartex]

Funktioniert die Seite überhaupt mit irgendeinem Browser?
Habe es gerade geestet mit FF5, IE9, Safari 5.0.5, Chrome 12 und Opera 11 getestet und immer erhalte ich "This browser is NOT supported".

[tobias86]

Zitat (hartex: 21. Juli 2011 - 01:17)

Funktioniert die Seite überhaupt mit irgendeinem Browser?

Chrome ging bei mir auch nicht Mit welchem Browser sollte sie gehen?