Sprite-Sheet mit CSS erstellen

Mit Sprite-Sheet können Fotografinnen, Fotografen und Kreative Symbole und ihre CSS-Datei vor der Einbindung bündeln. Fassen Sie Symbole zu einem Blatt mit passender CSS-Datei zusammen.

Fassen Sie Symbole zu einem Blatt mit passender CSS-Datei zusammen. Nutzen Sie es kostenlos im Browser, ohne ein Konto anzulegen.

Bedienung

Wähle mehrere PNG-, JPEG- oder WebP-Bilder aus; jedes muss 20 MB oder kleiner sein, und du brauchst zwischen 2 und 100 Dateien.
Lege die maximale Breite fest, die das fertige Sheet in Pixeln haben soll.
Füge einen Rand um jedes Sprite hinzu, damit die Symbole einander nicht berühren.
Erstelle das Sheet und lade sowohl das Bild als auch die zugehörige CSS-Datei herunter.

Beispiel

Ein Frontend-Entwickler stellt eine Reihe kleiner Symbole für eine Navigationsleiste zusammen. Er lädt die Dateien, wählt eine sinnvolle Sheet-Breite und einen kleinen Rand und fügt dann das erzeugte Sheet samt CSS zum Projekt hinzu. Die Seite kann eine einzige Grafik anfordern statt vieler einzelner Dateien.

Grenzen und Formate

Das Ergebnis ist ein Bitmap-Sheet, kein Vektor-Symbolsystem; starke Vergrößerung kann die Symbole daher weicher erscheinen lassen.
Eingabedateien müssen PNG, JPEG oder WebP sein, mit einer Obergrenze von 20 MB pro Bild und insgesamt zwischen 2 und 100 Dateien.
Prüfe das erzeugte CSS gegen deine Projektstruktur, da Klassennamen oder Dateipfade angepasst werden müssen.
Eine schlecht gewählte Breite oder zu viele Bilder können ein Sheet erzeugen, das später schwer zu pflegen ist.

Wo die Verarbeitung stattfindet

Das Erstellen des Sheets und die CSS-Erzeugung laufen in deinem Browser. Deine Bilddateien werden nicht hochgeladen, ein Konto ist nicht erforderlich, und die fertigen Dateien stehen auf deinem Gerät zum Download bereit.

Häufige Fragen

Wie sollte ich die maximale Sheet-Breite wählen?

Überlege, wie viele Symbole du hast und wo das Sheet verwendet wird. Eine mittlere Breite verhindert, dass das Sheet extrem hoch wird, während ein breiteres Sheet seine Höhe verringern kann. Probiere einen Wert aus, prüfe das Ergebnis und passe ihn an, wenn das Layout unausgewogen wirkt.

Muss ich die erzeugte CSS-Datei verwenden?

Du kannst sie unverändert verwenden, an deine Namenskonventionen anpassen oder einfach als Positionierungsanleitung lesen. Das CSS beschreibt, wo jedes Sprite im Sheet sitzt. Das Sheet-Bild selbst bleibt gleich, ob du die CSS-Datei behältst oder nicht.

Kann ich verschiedene Bildformate in einem Sheet mischen?

Ja, PNG-, JPEG- und WebP-Dateien können gemeinsam ausgewählt werden. Für Symbole eignen sich PNG-Dateien mit Transparenz oft am besten, weil sie sich sauber mit verschiedenen Seitenhintergründen verbinden. Prüfe immer das fertige Sheet, da Kanten und Hintergrundbereiche je nach Ausgangsformat unterschiedlich ausfallen können.