BlurHash di un'immagine
Questo strumento del KIT calcola il BlurHash di un'immagine: una breve stringa che il tuo sito o la tua app trasforma in un'anteprima sfocata e colorata da mostrare mentre la foto vera si carica. Pesa pochi caratteri, migliora la sensazione di velocità e non richiede di caricare un secondo file. Tutto nel browser.
Esegui gratis nel browser
Funziona nel tuo browser: gratis, senza registrazione, i file non escono dal tuo dispositivo.
Cos'è il BlurHash
Il BlurHash è una stringa di poche decine di caratteri che riassume i colori e le forme principali di un'immagine. Da sola non è un'immagine, ma il tuo sito la sa "srotolare" in una macchia sfocata che ricorda la foto originale. È il segnaposto ideale da mostrare nell'istante in cui la pagina si apre e la foto vera non è ancora arrivata.
Perché migliora il caricamento percepito
Un riquadro grigio vuoto fa sembrare la pagina lenta e disordinata mentre le immagini caricano. Un'anteprima sfocata con i colori giusti, invece, dà subito l'idea di cosa apparirà e rende il caricamento più morbido all'occhio. La foto non arriva più in fretta, ma l'attesa sembra più breve e la pagina appare più curata, cosa che conta su reti mobili lente.
Come si usa nel sito o nell'app
Generi il BlurHash di ogni immagine e lo salvi accanto agli altri dati, ad esempio nel database insieme all'indirizzo della foto. Al momento di mostrare la pagina, una piccola libreria lato client trasforma la stringa nell'anteprima sfocata, che poi sostituisci con la foto vera appena è pronta. La stringa è talmente corta da poter viaggiare comodamente insieme ai testi.
Gratis e nel browser
È uno strumento gratuito del KIT: il BlurHash viene calcolato nel tuo browser, senza limiti e senza registrazione, e l'immagine non viene inviata a nessun server. Puoi generarlo anche per foto di un progetto ancora riservato, dato che il file non lascia il tuo dispositivo.
Casi d'uso
La galleria di un e-commerce
Un negozio online con centinaia di foto prodotto genera un BlurHash per ciascuna. Le pagine si aprono mostrando subito anteprime colorate, e le foto vere si sostituiscono man mano, senza riquadri vuoti.
Un'app di annunci
Un'app di annunci carica lunghe liste di foto durante lo scorrimento. Con i BlurHash l'elenco si popola in modo fluido anche su rete lenta, e l'esperienza risulta più veloce.
Un blog con immagini pesanti
Un blog di cucina usa foto grandi e ricche. I BlurHash mostrano un'anteprima immediata di ogni piatto mentre l'immagine ad alta risoluzione si carica sotto.
Domande frequenti
Cos'è esattamente il BlurHash?
È una stringa di pochi caratteri che riassume colori e forme di un'immagine. Non è un'immagine di per sé, ma può essere trasformata in un'anteprima sfocata da mostrare durante il caricamento della foto vera, occupando pochissimo spazio.
Serve qualcosa per mostrarlo sul sito?
Sì, una piccola libreria lato client che "srotola" la stringa nell'anteprima sfocata. Esistono componenti pronti per i principali ambienti web e per le app: qui generi la stringa, la visualizzazione avviene nel tuo sito o applicazione.
È gratis?
Sì. Il calcolo del BlurHash nel browser è gratuito, senza limiti e senza registrazione, e senza abbonamento.
L'immagine viene inviata da qualche parte?
No. Il BlurHash viene calcolato interamente nel tuo browser e la foto non lascia il dispositivo, quindi puoi usarlo anche su immagini riservate.
Quanto è lunga la stringa generata?
Poche decine di caratteri: talmente compatta da poter essere salvata insieme agli altri dati di un'immagine e inviata con i testi, senza appesantire la pagina.
Posso generarne tanti in automatico?
Sì. Oltre all'uso gratuito nel browser, la generazione è disponibile via API per calcolare i BlurHash di molte immagini in blocco, con un costo per richiesta.
Per sviluppatori — accesso via API
Tutto quello che vedi in questa pagina è disponibile anche via API. Questa sezione è per i team che vogliono integrarlo nei propri sistemi; chi non ne ha bisogno può semplicemente usare lo strumento qui sopra.
Endpoint
Autenticazione con Bearer token: un POST mette in coda l'attività e il risultato arriva via webhook o link firmato.
Chiamala dal tuo stack
curl -X POST https://api.kit.forhosting.com/image/blurhash \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"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['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" => '{"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)Esempio di richiesta
{
"image": "https://ejemplo.com/imagen.jpg"
}Esempio di risposta
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "image.blurhash",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}L'API è asincrona: ricevi subito un task_id e puoi fare polling fino a 1 richiesta al secondo.
Prezzi
Prezzo pubblicato, senza token né crediti. Se l'attività fallisce, non paghi.
Limiti
max_mb | 15 |
max_megapixels | 12 |
Errori
| HTTP | Codice | Significato |
|---|---|---|
401 | unauthorized | Chiave API mancante o non valida: controlla l'header Authorization. |
402 | insufficient_balance | Credito esaurito: ricarica per continuare a eseguire attività. |
404 | unknown_type | Tipo di attività sconosciuto: controlla il campo type della richiesta. |
429 | rate_limited | Troppe richieste in poco tempo: rallenta e riprova tra qualche secondo. |