Home Verzeichnis Aktuelles Werbung Impressum

CSS Sprite Generator

The CSS sprite generator takes a number of source images and combines them into a single "sprite" image and supplies CSS to map to each image within the sprite. The technique this tool employs is often used to improve the performance of a web site by reducing the number of HTTP requests that the client's browser needs to make. Diese Seiten liegen in mehren Sprachen vor
+++++++++++++++++++++++

Was sind CSS sprites?

CSS Sprites ist eine Technik, mir der man die Anzahl von HTTP Verbindungen der Seite herunterschrauben kann. Jede HTTP Verbindung die während des Ladens der Seite erstellt wird verlangsamt die Seite. Die Idee von CSS Sprites ist das man anstatt von vielen Bildern ein einziges verwendet und nur Teile dieses Bildes mittels der background-position Regel von CSS anzeigt.

Diese Technik kann sehr effektiv sein, besonders dann wenn man viele kleine Bilder wie Icons auf einer Seite verwendet. Zum Beispiel sind alle Bilder im linken Menu auf der Yahoo! Anfangsseite in einem einzigen File.

Probleme

Es gibt ein paar sehr nervige Browserfehler die man umgehen muss wenn man mit CSS Sprites arbeiten will.

Opera

Opera (bis zur Version 9.0) kann keine Hintergrundposition von über 2024 Pixel oder weniger als -2024 Pixel verarbeiten und rundet diese auf diesen Wert auf oder ab. Dieses Werkzeug umgeht das Problem indem es alle 2024 pixels eine neue Spalte erzeugt.

Safari

Safari hat ein Problem das Hintergrundbilder mehrfach angezeigt werden. Man kann das Problem umgehen indem man zwischen den Bildern ausreichend Freiraum beibehät. Dies kann im Werkzeug definiert werden.

Weitere Informationen

Bei A List Apart gibt es einen Artikel mit dem Titel "CSS Sprites: Image Slicing's Kiss of Death" der das Konzept von CSS Sprites im Detail erklärt. Falls dieser Trick was ganz Neues für Sie sein sollte, raten wir Ihnen den Artikel durchzulesen, damit Alles einfacher wird.

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

Mit diesem Werkzeug können Sie CSS Sprites automatisch erstellen. Alles, was Sie machen müssen ist eine Zip Datei mit zwei oder mehr Bildern im GIF, JPG oder PNG Format hochzuladen. Das Werkzeug erstellt für Sie das zusammengefügte Bild und die dazugehörige CSS Regeln um jedes einzelne Teilbild anzuzeigen.

Optionen

Sie können die Art und Weise wie das Werkzeug das Bild und die CSS Informationen erstellt mit mehreren Optionen Ihren Bedürfnissen anpassen. Diese Optionen sind die folgenden:

Ursprungsbilder vergrössern oder verkleinern

Breite und Höhe: Wenn Sie entweder die Breite oder die Höhe als weniger von 100% angeben werden die Bilder dementsprechend vergrössert oder verkleinert. Werte über 100% sind nicht erlaubt da die Bildqualität leiden würde. Die Voreinstellung ist 100% was bedeutet dass die Bilder nicht verändert werden.

Doppelte Bilder

Doppelte Bilder ignorieren: Doppelte Bilder werden in das Endbild eingefügt und für jedes eine eigene CSS Regel erstellt.
Doppelte Bilder entfernen und CSS Klassen zusammenfügen: Das Werkzeug vergleicht die Bilder mittels MD5 um sicherzustellen das es sich wirklich um Duplikate handelt. Diese werden entfernt und die CSS Regeln in einen Selektor zusammengefügt.

Sprite Ausgabeoptionen

Horizontaler Abstand: Definiert den Abstand zwischen den einzelnen Bilderreihen. Dieser Wert muss gross genug sein um einer fehlerhaften Darstellung in Safari vorzubeugen. Wir empfehlen den Originalwert beizubehalten.
Vertikaler Abstand: Definiert den Abstand zwischen den einzelnen Bildern. Dieser Wert muss gross genug sein um es Besuchern zu erlauben Ihre Schriftgrösse zu verändern ohne ungewollt Teile von anderen Bildern anzuzeigen.
Hintergrundfarbe: Definiert die Hintergrundfarbe des Ausgabebildes. Das Feld erwartet einen sechs Zeichen langen hexadezimalen Farbwert. Falls keine Farbe angegeben wird erstellt das Werkzeug transparente PNG oder GIF Bilder.
Sprite Ausgabeformat: Unterstützte Formate sind GIF, PNG und JPG. GIF und PNG können transparente Hintergründe haben. Voreinstellung ist PNG.

CSS Ausgabeoptionen

CSS Präfix: Jede CSS Positionsangabe wird an diesen Text angehängt was Ihnen erlaubt weitere ID und CSS Klassen zu definieren. Erlaubte Zeiceh sind a-z, 0-9, _, -, # und .
Erlaubt sind reguläre Ausdrücke.: Die Teile des Ausdruckes in runden Klammern werden Teil des Klassennamens für die Positionierung.
CSS Präfix: Der eingegebene Text wird vor jedem erstellten Klassennamen eingefügt. Dies ist wichtig, da Klassennamen nicht mit einer Nummer beginnen dürfen. Erlaubte Zeichen sind - a-z, 0-9, _ und -. Der eingegebene Text darf nicht mit einer Nummer beginnen.
CSS Suffix: Der eingebene Text wird am Ende von jeder CSS Regel eingefügt. Die Regeln sind die gleichen wie bei "CSS Präfix".

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

http://de.spritegen.website-performance.org/ In deutsche Sprache

Link zur Website: https://launchpad.net/css-sprite-generator