Über dieses Tool
Ein CSS-Sprite-Sheet packt einen ganzen Satz kleiner Bilder — Icons, UI-Glyphen, Emojis — in eine einzige größere Bilddatei und nutzt dann das CSS-background-position, um für jedes Element genau den richtigen Ausschnitt anzuzeigen. Vor der Multiplexing-Fähigkeit von HTTP/2 war dies ein durchaus sinnvoller Performance-Trick: Ein Browser, der ein Dutzend separate Verbindungen für ein Dutzend winziger Icon-Dateien öffnete, war langsamer, als eine einzige Verbindung für ein kombiniertes Bild zu öffnen, und dieser Unterschied kann bei HTTP/1.1-Verbindungen, strengen CDN-Limits für die Anzahl an Requests oder einfach beim Reduzieren rendering-blockierender Ressourcenanfragen in einem langsamen Netzwerk immer noch relevant sein.
Dieses Tool baut beide Hälften für Sie, vollständig in Ihrem Browser: Icon-Dateien ablegen, wählen, ob sie in einer einzigen Reihe oder Spalte angeordnet werden und wie viel transparenter Abstand sie trennt, und es zeichnet sie auf ein einziges Canvas, kodiert es als PNG (um Transparenz zu erhalten) und generiert für jedes die exakte background-position-CSS-Regel — kopieren Sie sie direkt in Ihr Stylesheet. Allerdings sind Sprites eine ältere Technik: Für die meisten neuen Projekte ist Inline-SVG oder eine SVG-Icon-Schrift meist einfacher zu pflegen und skaliert bei jeder Größe sauberer, betrachten Sie dies also als ein weiteres Werkzeug im Kasten und nicht als die einzig richtige Antwort — greifen Sie darauf zurück, wenn Sie bereits einen Satz Raster-Icons (PNG, keine Vektoren) haben und die Anzahl der Requests reduzieren möchten.
Häufige Fragen
Sind CSS-Sprites noch relevant, oder sollte ich stattdessen SVG-Symbole verwenden?
Für die meisten neuen Projekte ist Inline-SVG oder eine SVG-Symbolschriftart/-Sprite normalerweise die modernere Wahl (scharf bei jeder Zoomstufe, leicht mit CSS umfärbbar, keine Probleme mit der Ausrichtung am festen Pixelraster). CSS-Sprites bleiben für fotografische/Raster-Symbolsätze, die nicht als Vektorformen dargestellt werden können, für Legacy-Codebasen, die bereits um diese Technik herum gebaut sind, oder einfach als schnelle, abhängigkeitsfreie Möglichkeit, einen kleinen Symbolsatz mit minimalen HTTP-Anfragen zu bündeln, wirklich nützlich. Verwenden Sie, was zu Ihren tatsächlichen Einschränkungen passt — dieses Tool ist hier für den Fall, dass ein Raster-Sprite-Sheet das richtige Werkzeug für die Aufgabe ist, nicht als Behauptung, dass es immer die beste Wahl ist.
Warum wird nach dem letzten Bild kein abschließendes Padding hinzugefügt?
Dies hält die Gesamtgröße des Sheets so klein wie möglich — die Padding-Einstellung existiert, um Texturüberlauf ZWISCHEN benachbarten Symbolen zu verhindern, wenn das Sheet skaliert/gezoomt wird, was nur bei Rändern relevant ist, die von zwei Symbolen geteilt werden; der eigene äußere Rand des Sheets hat auf der anderen Seite kein benachbartes Symbol, sodass zusätzlicher Platz dort diesem Zweck nicht dienen würde und nur die Dateigröße verschwenden und eine Inkonsistenz hinzufügen würde, wie weit jedes Symbol je nach Position vom absoluten Rand des Sheets entfernt ist.