Generar un BlurHash
Antes de que una foto termine de descargarse, la mayoría de las apps no muestran nada, o peor, un destello blanco. Este endpoint genera una cadena corta y codificada que se renderiza como una vista previa suave y difuminada de la imagen real, para que el diseño se sienta vivo desde el primer instante en vez de vacío.
Ejecutar — gratis
Corre en su navegador. Gratis y sin límite: sus datos no salen de esta página.
El problema del espacio en blanco
Los feeds, galerías y marketplaces cargados de fotos enfrentan el mismo problema de renderizado: las imágenes son el recurso más pesado de la página, y hasta que llegan, algo tiene que ocupar su espacio. Una caja gris o un spinner funcionan, pero no le dicen nada al usuario sobre lo que viene y hacen que el diseño se sienta inconcluso. Una aproximación difuminada de la foto real, en cambio, transmite de inmediato una sensación de color y composición, y el paso de borroso a nítido se percibe como una revelación natural y no como un salto brusco en el diseño.
Qué codifica realmente la cadena
Envía una imagen a POST /image/blurhash y la tarea devuelve una cadena corta codificada, normalmente muy por debajo de cien caracteres, que captura la forma general y la distribución de color de la imagen. Esa cadena se puede incrustar directamente en la respuesta de su API o en un registro de base de datos, sin necesidad de guardar ni pedir un archivo de imagen aparte, y se decodifica del lado del cliente en un lienzo difuminado o un fondo CSS con unas pocas líneas de código ampliamente disponible.
De dónde viene la técnica
El enfoque detrás de una codificación tipo BlurHash se apoya en una idea mucho más antigua de la compresión de imágenes: representar una imagen como una suma de funciones base suaves en lugar de píxeles individuales, conservando solo los primeros términos para describir su aspecto general. Es conceptualmente cercano a cómo el propio JPEG logra comprimir, solo que llevado a un extremo donde se conserva apenas la información suficiente para describir la forma y la paleta generales, descartando todo lo que permitiría reconstruir el detalle fino, que es justo el objetivo de un placeholder.
Cómo llega el resultado
Toda tarea de esta API es asíncrona: enviar una imagen devuelve un task_id de inmediato, y la cadena codificada llega después por webhook firmado o por un enlace firmado válido durante 24 horas. Como el resultado es apenas una cadena corta y no un archivo, resulta barato almacenarla de forma permanente junto al registro de la imagen original y reutilizarla en cada renderizado sin volver a calcularla.
Cómo encaja en un flujo real
El lugar natural para llamarlo es una sola vez, al momento de subir la imagen, guardando la cadena resultante junto a la URL de la imagen en su base de datos, de modo que cada carga futura de página ya la tenga disponible antes de siquiera pedir la foto real. A $0.002 por solicitud y sin cobro por intentos fallidos, generar un placeholder para cada imagen de un catálogo cuesta apenas una fracción de lo que vale el ahorro de ancho de banda y la mejora en la velocidad percibida.
Qué puede hacer con ella
Feeds de fotos y apps sociales
Muestre una vista previa difuminada en el instante en que el feed se renderiza, y luego reemplácela por la foto completa al cargar, evitando espacios vacíos al hacer scroll.
Galerías de producto en comercio electrónico
Genere un placeholder para cada imagen de producto al subirla, para que las páginas de galería nunca muestren cajas vacías en la primera pintura.
Marketplaces cargados de imágenes
Guarde una cadena de blur con cada foto de anuncio para que los resultados de búsqueda se sientan instantáneos incluso en conexiones móviles lentas.
Apps móviles nativas e híbridas
Decodifique la cadena compacta localmente para mostrar un placeholder suave antes de que termine cualquier solicitud de red por la imagen real.
Preguntas frecuentes
¿En qué se diferencia BlurHash de una miniatura de baja resolución?
BlurHash devuelve una cadena de texto corta, no un archivo de imagen, así que no hay nada extra que guardar ni descargar; una miniatura sigue siendo un archivo aparte que necesita su propia solicitud.
¿La API de BlurHash es gratuita?
La herramienta de arriba es gratis en su navegador. La API es de pago: cada llamada se descuenta de su saldo prepago de ForHosting KIT — se recarga desde $10.00 (no caduca), se paga el precio publicado de cada solicitud, y una llamada sin saldo devuelve HTTP 402. Sin suscripción, sin tokens, y una tarea fallida no se cobra.
¿Qué tan larga es la cadena resultante?
Normalmente muy por debajo de cien caracteres, lo bastante pequeña como para guardarla directamente en un campo de base de datos junto al registro de la imagen.
¿Necesito una librería especial para mostrarla?
La cadena se decodifica del lado del cliente con decodificadores abiertos y ampliamente disponibles para web, iOS y Android; el trabajo de la API es solo generar la cadena codificada.
¿Puedo generar placeholders para toda una biblioteca de imágenes en lote?
Sí, envía una solicitud por imagen; cada una se encola y se factura por separado, así que procesar una biblioteca completa es solo repetir la llamada, sin un modo de lote especial.
¿Cómo recibo la cadena generada?
Por webhook firmado, recomendado para flujos automatizados, o mediante un enlace firmado válido por 24 horas.
¿Qué formatos de imagen puedo enviar?
Se admiten formatos rasterizados estándar como JPEG y PNG para generar la codificación del placeholder.
¿Debo regenerar la cadena si redimensiono la imagen?
No, la cadena codificada captura la forma y el color generales de la imagen y sigue siendo válida sin importar el tamaño de pantalla en el que la renderice.
Para desarrolladores — acceso por API
Todo lo de esta página está disponible por programación. Esta sección es para equipos que quieren integrarlo en sus sistemas; el resto puede usar la herramienta de arriba sin más.
Endpoint de API
¿Prefiere automatizarlo? Un POST autenticado crea la tarea; el resultado llega por webhook o enlace firmado. La misma capacidad también se ejecuta aquí en la web, y pronto desde nuestra app, el email y Telegram.
Llámela desde su 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)Ejemplo de solicitud
{
"image": "https://ejemplo.com/imagen.jpg"
}Ejemplo de respuesta
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "image.blurhash",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}La API es asíncrona: la llamada devuelve un task_id al instante y el resultado llega por webhook. El polling está limitado a 1 req/s por tarea.
Precio
Precio publicado — sin tokens ni créditos inventados. Una tarea fallida no se cobra.
Límites
max_mb | 15 |
max_megapixels | 12 |
Errores
| HTTP | Código | Significado |
|---|---|---|
401 | unauthorized | API key ausente o inválida. |
402 | insufficient_balance | El saldo no cubre el precio de la tarea. |
404 | unknown_type | El tipo de tarea no existe. |
429 | rate_limited | Demasiadas peticiones. Use el webhook en vez de sondear. |