Bilder zu einem Sprite-Sheet zusammenfügen
Senden Sie zwei oder mehr Bilder und erhalten Sie ein einziges PNG-Sheet mit einer Karte, die Name, Position und Größe jedes Teils nennt. So laden 30 kleine Siegel als eine Datei statt als 30. Sie zahlen pro Nutzung, ohne Abo.
Diese Aufgabe ist derzeit nicht verfügbar und kann daher nicht gebucht werden. Es wird nichts berechnet.
API ansehenDiese Funktion fasst mehrere einzelne Bilder – etwa Icons oder Spielgrafiken – in einer einzigen Bilddatei zusammen und liefert dazu die Koordinaten jedes Ausschnitts. Das spart Anfragen im Browser des Besuchers, weil ein Sprite-Sheet statt vieler kleiner Dateien geladen wird. Die Funktion befindet sich aktuell in der Beta-Phase.
Warum ein Sheet schneller lädt als viele Einzelbilder
Jedes zusätzliche Bild auf einer Seite ist ein weiterer Hin- und Rückweg, auf den Ihre Besucher warten. Icon-Schriften sind aus der Mode gekommen, das eigentliche Problem aber blieb: Dutzende kleine Bilder bedeuten Dutzende Verbindungen, und Verbindungen sind langsam, egal wie schnell die Leitung ist. Spiele-Engines haben das vor Jahrzehnten mit Textur-Atlanten gelöst, die viele Bilder in einem bündeln. Derselbe Trick funktioniert heute für Icon-Sets im Web, Bibliotheken von Oberflächen-Komponenten und Grafiken für mobile Apps.
Wie das Sheet aufgebaut wird und wer es nutzt
Die Bilder werden zu einem kompakten, ungefähr quadratischen Sheet gepackt, und Sie können die Zahl der Spalten festlegen. Typische Einsätze: Ein Designsystem-Team packt jede Nacht 80 Icons in einen Atlas für seine Komponenten, ein unabhängiges Studio legt die Lauf-Animation einer Figur auf ein Sheet, eine Landingpage bündelt 30 Vertrauenssiegel und Zahlungslogos vor einem Performance-Audit, und ein App-Team fasst seine Einführungsgrafiken schon beim Bauen der App zusammen.
Was ein Sprite-Sheet löst
Websites und Spiele mit vielen kleinen Grafiken – Icons, Symbole, Animationsphasen – laden schneller, wenn all diese Bilder in einer einzigen Datei stecken, statt dass der Browser jedes Icon einzeln vom Server anfordert. Ein Sprite-Sheet ist genau das: ein großes Bild, in dem jedes einzelne Motiv eine feste Position hat. Zusätzlich zur Bilddatei liefert die Funktion eine Liste der Koordinaten, damit Sie im CSS oder im Spielcode gezielt auf jeden Ausschnitt zugreifen können.
So läuft die Verarbeitung
Die Anordnung folgt keinem starren Muster, sondern versucht, den verfügbaren Platz mit möglichst wenig Leerraum zu nutzen. Für größere Icon-Sets mit zwanzig oder mehr Einzelbildern zeigt sich der Vorteil gegenüber Einzeldateien am deutlichsten.
Anwendungsfälle
Icon-Set für eine Webanwendung
Die Richter Onlinehandel GmbH aus Nürnberg nutzt zwanzig Icons für ihren Online-Shop. Statt zwanzig einzelner Dateien lädt die Seite jetzt ein einziges Sprite-Sheet, was spürbar schneller lädt.
Animationsphasen für ein Browserspiel
Ein kleines Entwicklerteam aus Köln fügt die zwölf Einzelbilder einer Laufanimation zu einem Sprite-Sheet zusammen und spart sich damit den manuellen Zusammenbau in einem Bildbearbeitungsprogramm.
Symbolbibliothek für ein internes Dashboard
Jonas Weber pflegt ein internes Verwaltungstool mit über dreißig Statussymbolen. Ein einziges Sprite-Sheet ersetzt die bisherige Sammlung einzelner PNG-Dateien im Projektordner.
Häufige Fragen
Was bedeutet Beta bei dieser Funktion?
Die Funktion ist nutzbar und liefert verlässliche Ergebnisse, aber das Format der Koordinatenliste kann sich in künftigen Versionen noch ändern. Für produktive Projekte empfiehlt sich ein kurzer Test vorab.
In welcher Reihenfolge werden die Bilder angeordnet?
Die Funktion ordnet die Bilder automatisch platzsparend an; die genaue Position jedes Ausschnitts steht in der mitgelieferten Koordinatenliste, nicht in einer festen Reihenfolge, auf die Sie sich verlassen sollten.
Werden meine Bilder nach der Verarbeitung gespeichert?
Die hochgeladenen Bilder dienen ausschließlich der Berechnung des Sprite-Sheets und werden danach nicht weiter aufbewahrt.
Gibt es ein Limit für die Anzahl der Bilder?
Ein direktes Limit für die Anzahl gibt es nicht, wohl aber für die Gesamtgröße: Jedes einzelne Bild darf bis zu 15 MB und 12 Megapixel haben.
Was erhalte ich zusätzlich zum zusammengesetzten Bild?
Eine Karte, die jedes Ausgangsbild mit Namen, Position sowie Breite und Höhe im Sheet aufführt. Genau diese Angaben braucht Ihr Stylesheet oder Ihre Spiel-Engine, um jedes Teil einzeln anzuzeigen.
Verwandte Tools
Für Entwickler — API-Zugang
Alles auf dieser Seite ist auch per API verfügbar. Dieser Abschnitt richtet sich an Teams, die es in ihre eigenen Systeme einbinden möchten; alle anderen nutzen einfach das Tool oben.
Endpunkt
Ein authentifizierter POST erstellt die Aufgabe; das Ergebnis kommt per Webhook oder über einen signierten Link. Diese Funktion ist per API verfügbar, nicht als interaktives Web-Werkzeug.
Aufruf aus Ihrem Stack
curl -X POST https://api.kit.forhosting.com/image/sprite \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"images":["https://ejemplo.com/imagen.jpg","https://ejemplo.com/imagen-2.jpg"]}'const res = await fetch("https://api.kit.forhosting.com/image/sprite", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"images": [
"https://ejemplo.com/imagen.jpg",
"https://ejemplo.com/imagen-2.jpg"
]
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/image/sprite",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"images": [
"https://ejemplo.com/imagen.jpg",
"https://ejemplo.com/imagen-2.jpg"
]
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/image/sprite", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"images":["https://ejemplo.com/imagen.jpg","https://ejemplo.com/imagen-2.jpg"]}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"images":["https://ejemplo.com/imagen.jpg","https://ejemplo.com/imagen-2.jpg"]}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/image/sprite", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)Beispiel-Anfrage
{
"images": [
"https://ejemplo.com/imagen.jpg",
"https://ejemplo.com/imagen-2.jpg"
]
}Beispiel-Antwort
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "image.sprite",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}Die API arbeitet asynchron: Sie erhalten sofort eine task_id. Polling ist mit 1 Anfrage pro Sekunde erlaubt.
Preis
Der Preis steht auf der Seite – keine Tokens, keine Credits. Fehlgeschlagene Aufgaben werden nicht berechnet.
Limits
max_mb | 15 |
max_megapixels | 12 |
Fehler
| HTTP | Code | Bedeutung |
|---|---|---|
401 | unauthorized | Der API-Schlüssel fehlt oder ist ungültig – prüfen Sie den Authorization-Header (Bearer). |
402 | insufficient_balance | Ihr Guthaben reicht für diese Aufgabe nicht aus – Aufladungen verfallen nicht. |
404 | unknown_type | Unbekannter Aufgabentyp – prüfen Sie das Feld „type“ gegen den Katalog. |
429 | rate_limited | Zu viele Anfragen – warten Sie kurz; Polling ist mit 1 Anfrage pro Sekunde erlaubt. |
Technische Hinweise
So läuft die Verarbeitung
Sie laden die einzelnen Bilder hoch, die Funktion ordnet sie automatisch in einem Raster an und liefert das fertige Sprite-Sheet zusammen mit einer Koordinatenliste im JSON-Format zurück.
Preis und Beta-Hinweis
Weil sich die Funktion noch in der Beta-Phase befindet, kann sich die Struktur der Koordinatenliste in künftigen Versionen noch leicht ändern; für produktive Projekte lohnt sich ein Blick auf das aktuelle Format vor dem Festlegen, besonders wenn die Koordinaten fest in eine Build-Pipeline einprogrammiert werden sollen. Der Preis liegt bei $0.002 pro Anfrage plus $0.005 pro verarbeitetem Bild – ein Sheet aus zwanzig Icons kostet damit rund $0.10.
Technische Fragen
Was kostet ein Sprite-Sheet mit vielen Bildern?
$0.002 pro Anfrage plus $0.005 pro Bild. Ein Sheet aus fünfzig Icons kostet damit rund $0.25 – unabhängig von der Größe der Ausgabedatei.
Kann ich die Funktion auch per API in eine Build-Pipeline einbinden?
Ja, dieselbe Funktion ist per API ansprechbar, was sich für automatisierte Build-Prozesse anbietet, bei denen sich das Icon-Set häufig ändert.