Für die Erstellung von CSS Sprites braucht man kein Fachmann, bzw. Webdesigner sein. Mittels einfacher Online-Tools lassen sich solche kombinierten Bilder sehr schnell und problemlos erstellen. Im Folgenden stellen wir Euch den CSS Sprite Generator von website-performance.org etwas genauer vor.
Der Generator kann kostenlos direkt online im Browser genutzt werden. In dem freien Feld sind bereits 6 kleine Bilder/grafische Elemente zu sehen. So erhaltet Ihr einen Einblick wie die Sprites funktionieren. Wenn Ihr mit der Maus auf eines der kleinen Bilder klickt, erhaltet Ihr in der rechten Seite alle wichtigen Informationen, wie etwa die Koordinaten für die direkte CSS Ansprache.
Klickt oben auf den Button „Clear“ und ladet anschließend Eure eigenen Bilder hoch und verknüpft diese zu einem einzigen großen Bild. Notiert Euch die Koordinaten und ladet am Ende das neue, fertige Bild wieder herunter. Bindet die Änderungen in Eure CSS-Dateien mit ein, testet diese und schon habt Ihr mit Hilfe von CSS-Sprites die Anzahl der http Request Anfragen reduziert.
Link zu dem CSS Sprite Generator: http://www.de.spritegen.website-performance.org/
