Mit CSS-Image-Sprites können Sie die Anzahl der HTTP-Anforderungen auf einer Site drastisch reduzieren, indem Sie viele oder alle Bilder auf Ihrer Site in einer einzigen Datei zusammenfassen. Diese Datei kann dann in Verbindung mit der CSS-Hintergrundpositionierung verwendet werden, um einzelne Bilder zu implementieren.
Der Nachteil dieser Technik ist, dass es ein mühsamer, komplizierter Prozess ist, der erfordert, dass Sie Ihre Bilder manuell kombinieren und mit dem CSS arbeiten, um jedes Bild richtig anzuzeigen. Glücklicherweise gibt es eine Reihe kostenloser Online-Tools, die diesen Prozess vollständig automatisieren. Heute verfügen wir über eine beeindruckende Sammlung von zwölf dieser Tools, von denen jedes seinen eigenen einzigartigen Ansatz für den Sprite-Generierungsprozess hat. Egal, ob Sie ein Sprite aus einem Ordner mit Bildern erstellen oder eine vorhandene Site konvertieren möchten, wir haben die Tools, die Ihnen dabei helfen, Ihre Arbeit in Sekundenschnelle zu erledigen.
CSS Sprite Generator: Projekt Fondue
Ein guter Generator mit vielen Optionen. Sie laden eine ZIP-Datei mit allen Bildern hoch, die in ein Sprite umgewandelt werden sollen, und kümmert sich um den Rest. Es spuckt ein Bild aus und alle verschiedenen "Hintergrundpositionen" werden angezeigt. Werte, die Sie brauchen.
CSS-Sprites-Generator
Dieser Sprite-Generator zwingt Sie, jedes Bild einzeln hochzuladen. Probieren Sie es aus, um zu sehen, was Sie denken, aber ehrlich, es gibt bessere Alternativen auf dieser Liste.
CSS Sprites - Online CSS Sprite Builder / Generator
Das ist ziemlich nett. Sie können ganz einfach mehrere Bilder gleichzeitig hochladen, Ihren Ausgabedatentyp auswählen und sogar wählen, ob Sie entweder Sass- oder CSS-Code erhalten möchten. Es gibt auch einige nette Optionen, um automatisch Hover-Effekte wie entsättigte und umgedrehte Effekte zu erzeugen. Alles in allem recht beeindruckend.
Spritebox - Erstellen Sie CSS aus Sprite-Bildern
Diese nimmt eine andere, etwas weniger automatisierte Route. Anstatt ein Sprite-Bild für Sie zu erstellen, können Sie Ihr bereits erstelltes Sprite hochladen und bestimmte Bereiche definieren, um das resultierende CSS zu generieren. Ein großartiges Werkzeug, wenn Sie Sprites lieber in Photoshop erstellen und nur Hilfe zum Code benötigen.
Canvas: CSS-Sprites-Generator
Wenn Sie Bilder für dieses hochladen, müssen Sie dies nacheinander tun, was ein wenig schmerzhaft ist. Wenn Sie jedoch Links haben, können Sie einfach eine Liste mit den entsprechenden Klassennamen einfügen und schon kann es losgehen. Zu den Optionen gehören Auffüllen und Hintergrundfarben. In meinen Tests hat es gut funktioniert, definitiv einen Blick wert.
Stitches - Ein HTML5-Sprite-Blattgenerator
Hier können Sie Bilder ziehen, was nach der Verwendung aller unhandlichen Entlader, die andere Entwickler entwickelt haben, großartig ist. Danach können Sie einfach auf eine Schaltfläche klicken, um das Bild zu erhalten, und eine weitere, um das CSS zu übernehmen. Es gibt praktisch keine Optionen und es funktioniert nur in Chrome und Firefox, aber es ist perfekt, wenn Sie nur eine schnelle und einfache Lösung wünschen.
Spritemapper
Dies ist nur für Super-Nerds, es ist ein herunterladbarer Sprite-Generator, den Sie über die Befehlszeile ausführen. Die Implementierung ist jedoch sehr glatt, Sie zeigen einfach auf Ihre vorhandene CSS-Datei und erledigen den Rest der Arbeit. Dies macht das Problem des Langzeit-Sprite-Managements zu einem Kinderspiel, da Sie Ihre ursprünglichen CSS- und Image-Dateien einfach festhalten und sie bei einer Änderung erneut verarbeiten können.
SpriteMe
SpriteMe ist ein großartiges Werkzeug, mit dem Sie Ihren typischen Entwicklungsprozess vollständig auf dem neuesten Stand halten können. Erstellen Sie Ihre Seite einfach so, als würden Sie normalerweise einzelne Bilder verwenden. Wenn Sie fertig sind, öffnen Sie die Seite in einem Browser und klicken Sie auf das SpriteMe-Bookmarklet. Dadurch werden alle Bilder auf der Seite erfasst, ein Sprite erstellt und das CSS generiert. Dies ist besonders nützlich, wenn Sie eine vorhandene Site konvertieren.
Spritefy
Spritefy ist eine weitere Option, mit der Sie ganz einfach mehrere Dateien in den Browser ziehen können, um sie zu verarbeiten. Wie bei Stitches gibt es wirklich keine Optionen, aber es ist definitiv eine sehr schnelle Möglichkeit, Sprites (nur Chrome und Firefox) in Betrieb zu nehmen.
CSS-Sprite-Generator
Dieser Vorgang hat einige unnötige Schritte bei der Generierung und beim Setup. Daher dauert er einige Sekunden länger als die meisten anderen Alternativen. Er hat jedoch eine Menge Code-Ausgaben, einschließlich CSS und HTML, sowie verschiedene Ausschnitte zum Hinzufügen der Bilder ein div oder span, Einfügen von Links usw.
SpriteMeister - Automatischer CSS-Sprite-Generator
SpriteMeister ist sehr ähnlich wie SpriteMe, nur weniger automatisiert. Anstatt ein Bookmarklet zu verwenden, laden Sie jedes Bild und Ihre aktuelle CSS-Datei manuell hoch und erhalten dann einen Download mit aktualisiertem Code und einem einzelnen Bild.
Sprite Creator 2.0
Dieses funktioniert genauso wie Spritebox oben. Sie laden das Sprite-Bild hoch, das Sie an anderer Stelle erstellt haben, und verwenden einen einfachen Auswahlvorgang, um automatisch das entsprechende CSS für jedes Bild zu generieren.
Liebe es? Teilt es!
Wenn Ihnen die Freebies-Sammlung dieser Woche gefallen hat, teilen Sie die Liebe und senden Sie einen Link auf Ihre bevorzugten Websites. Hier ist ein praktischer Ausschnitt, den Sie nach Belieben kopieren und einfügen können!
12 kostenlose CSS-Sprite-Generatoren: http://goo.gl/NhLNR