ForHosting KIT · Bilder bearbeiten & analysieren

Blurhash aus einem Bild erzeugen

Dieses Werkzeug aus dem KIT erzeugt aus einem Bild einen Blurhash: eine kurze Zeichenkette, die eine unscharfe Vorschau des Bildes kodiert. Sie speichern diese Zeichenkette statt eines separaten Vorschaubilds und zeigen damit sofort einen passenden Platzhalter an, bevor das eigentliche Foto geladen ist.

● StabilKostenlos · im Browser

Im Browser ausführen – kostenlos API ansehen

Nutzen Sie es über WebAPIE-MailApp baldTelegram bald

Was ein Blurhash eigentlich ist

Ein Blurhash ist eine kurze Textzeichenkette – meist unter 30 Zeichen –, die eine grob verwischte Version eines Bildes beschreibt. Statt ein kleines JPG als Vorschaubild zu laden, zu speichern und zu verwalten, speichern Sie nur diese Zeichenkette in Ihrer Datenbank und wandeln sie im Frontend clientseitig wieder in ein unscharfes Bild um, ganz ohne zusätzliche Bilddatei oder eigenen Speicherpfad.

Warum das besser ist als ein klassisches Vorschaubild

Ein Vorschaubild als eigene Datei bedeutet einen zusätzlichen Netzwerk-Request, bevor überhaupt etwas sichtbar wird, und zusätzlichen Speicherplatz auf Ihrem Server. Ein Blurhash dagegen ist reiner Text, der zusammen mit den übrigen Daten eines Eintrags direkt aus der Datenbank kommt – kein zusätzlicher Ladevorgang, keine zusätzliche Datei, nur ein paar Bytes, die sofort eine sinnvolle Vorschau ergeben, ohne spürbare Verzögerung beim Seitenaufbau.

Typischer Einsatz in einer App

Bildergalerien, Social-Media-Feeds und Onlineshops mit vielen Produktfotos zeigen häufig zuerst einen Blurhash-Platzhalter an, während das hochauflösende Bild im Hintergrund lädt. Das Ergebnis wirkt für Nutzerinnen und Nutzer sofort vollständig und ruhig, statt leere graue Flächen zu zeigen, die erst nach und nach durch echte Bilder ersetzt werden, während Sie durch die Seite oder den Feed weiterscrollen, ohne auf einen ruckelnden Seitenaufbau zu stoßen.

Kostenlos, direkt im Browser

Die Berechnung läuft vollständig in Ihrem Browser, das Bild wird nicht hochgeladen. Das Werkzeug ist kostenlos und ohne Limit nutzbar, praktisch, um während der Entwicklung schnell einzelne Blurhash-Werte zu testen, bevor Sie den Vorgang serverseitig in Ihre eigene Anwendung integrieren und dauerhaft automatisieren, ganz ohne Testkosten oder zusätzliche Wartezeit dabei, egal wie viele Testbilder Sie im Verlauf der Entwicklung ausprobieren.

Anwendungsfälle

Platzhalter für eine Produktgalerie

Ein Onlineshop speichert für jedes Produktfoto einen Blurhash in der Datenbank. Beim Laden der Seite erscheint sofort eine unscharfe Vorschau, bevor das hochauflösende Bild nachlädt.

Ein Social-Feed ohne graue Flächen

Lukas Fischer entwickelt eine App mit einem Bilder-Feed. Statt leerer grauer Kästen beim Scrollen zeigt er sofort den Blurhash jedes Fotos an, bis das Originalbild geladen ist.

Testwerte während der Entwicklung

Ein Entwickler prüft schnell, wie ein Blurhash für ein bestimmtes Testbild aussieht, bevor er die Berechnung serverseitig in die Anwendung einbaut.

Häufige Fragen

Was genau macht ein Blurhash mit meinem Bild?

Er kodiert eine grob verwischte Version des Bildes als kurze Zeichenkette. Diese Zeichenkette wandeln Sie im Frontend clientseitig wieder in ein unscharfes Vorschaubild um, ganz ohne separate Bilddatei.

Wie lang ist die erzeugte Zeichenkette?

In der Regel unter 30 Zeichen, klein genug, um sie direkt als Textfeld in einer Datenbank neben den übrigen Bilddaten zu speichern.

Ist die Erzeugung eines Blurhash kostenlos?

Ja, vollständig kostenlos und ohne Limit, solange Sie das Werkzeug im Browser nutzen.

Verlässt mein Bild dabei mein Gerät?

Nein, die Berechnung findet direkt in Ihrem Browser statt, das Bild verlässt Ihr Gerät nicht.

Kann ich Blurhash-Werte auch automatisch für viele Bilder erzeugen?

Ja, über die API lässt sich die Berechnung in eine Anwendung integrieren, etwa um bei jedem Bild-Upload automatisch den passenden Blurhash zu erzeugen.

Brauche ich Programmierkenntnisse, um einen Blurhash zu nutzen?

Zum Erzeugen eines einzelnen Werts nicht, das Werkzeug reicht aus. Um ihn in einer App als Platzhalter anzuzeigen, brauchen Sie eine kleine Bibliothek, die die Zeichenkette wieder in ein Bild umwandelt.

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/blurhash

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/blurhash \
  -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/blurhash", {
  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/blurhash",
    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/blurhash", 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/blurhash", 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.blurhash",
  "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

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 →

Im Browser ausführen – kostenlos