ForHosting KIT · Bilder bearbeiten & analysieren

Bilder zu einem Sprite-Sheet zusammenfügen

Diese 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.

● Betapro Anfrage + pro Bild$0.002

Ausführen — $0.002 + $0.005/Bild API ansehen

Nutzen Sie es über WebAPIE-MailApp baldTelegram bald

Online ausführen

Führen Sie dies mit Ihrem Konto auf unseren Servern aus. Kostenlose Tools laufen in Ihrem Browser; dieses wird zum oben genannten Preis von Ihrem KIT-Guthaben abgebucht.

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

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. 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.

Preis und Beta-Hinweis

Der Preis liegt bei $0.002 pro Anfrage plus $0.005 pro verarbeitetem Bild – ein Sheet aus zwanzig Icons kostet damit rund $0.10. 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.

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.

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.

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.

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.

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

POSThttps://api.kit.forhosting.com/image/sprite

Authentifizierung per Bearer-Token. Ein einziger POST stellt die Aufgabe in die Warteschlange; das Ergebnis erhalten Sie per Webhook oder über einen signierten Link.

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 &#39;{"image":"https://ejemplo.com/imagen.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({
    "image": "https://ejemplo.com/imagen.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[&#39;KIT_KEY']}"},
    json={
    "image": "https://ejemplo.com/imagen.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" => &#39;{"image":"https://ejemplo.com/imagen.jpg"}',
  ],
]));
$task = json_decode($res, true);

body := bytes.NewBufferString(`{"image":"https://ejemplo.com/imagen.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

{
  "image": "https://ejemplo.com/imagen.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

pro Anfrage$0.002

pro Bild$0.005

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.

Vollständige KIT-Dokumentation lesen →