Generador de BlurHash y ThumbHash
BlurHash / ThumbHash
Codifica una imagen en una cadena corta de BlurHash o ThumbHash para usarla como marcador mientras carga.
Un BlurHash son veintitantos caracteres que se decodifican en una versión difuminada de una imagen: lo bastante corto para caber en una columna de base de datos junto a la URL y viajar en el mismo JSON, para que el diseño muestre algo reconocible antes de que llegue la foto.
'/%3E%3Ctext x='50%25' y='50%25' fill='%23ffffff' font-family='system-ui, sans-serif' font-size='79' text-anchor='middle' dominant-baseline='central'%3E1200×630%3C/text%3E%3C/svg%3E)
Data URI de SVG
580 BCodificado con porcentajes en lugar de base64: un 25 % más pequeño, y todavía se puede leer. Pégalo directamente en background-image: url("…")
Cómo se usa
Suelta una imagen o pega un hash
Las dos direcciones funcionan en el mismo panel: una imagen te da un hash, un hash te da la vista previa decodificada.
Elige el número de componentes
Un hash son 4 + 2·x·y caracteres, así que 4×3 son 28. Más componentes significan más detalle y una cadena más larga; cuatro por tres es el valor habitual.
Usa el realce (punch) en una fotografía plana
Escala la variación sin mover el color medio, lo que rescata una imagen de bajo contraste que de otro modo se decodificaría como un rectángulo plano.
Preguntas frecuentes
¿Por qué el original se reduce primero a 32 px?
Porque todo lo que está por encima de esa frecuencia lo descarta la transformada de todos modos. Codificar a resolución completa gasta cien millones de evaluaciones de base para producir los mismos 28 caracteres.
Solo necesito un color medio.
Entonces toma los seis primeros caracteres del hash: eso es exactamente lo que codifican, así que una página que solo necesita un color de fondo no tiene que decodificar nada.
¿BlurHash o ThumbHash?
BlurHash es el que tiene bibliotecas en todas partes y es lo que emite esta página. ThumbHash es más corto a la misma calidad y lleva alfa, pero necesitas un decodificador en el cliente de todos modos: elige el que tu stack ya tenga.
Puede recibir de
Imagen de relleno
Placeholder Image
Genera una imagen de relleno de color plano o degradado en cualquier tamaño, con las dimensiones escritas encima.
Color medio y color dominante
Average & Dominant Colour
Devuelve un color representativo de una imagen —media, mediana o el más frecuente— como valor de color reutilizable.
Compresor de PNG
PNG Compressor
Reduce la paleta de colores y reescribe el flujo comprimido para bajar el peso de un PNG sin cambiar sus dimensiones.
Compresor de JPEG
JPEG Compressor
Vuelve a codificar un JPEG con la calidad que elijas y muestra el peso antes y después junto con la diferencia visible.
Después
Estas aceptan lo que produce esta herramienta, así que el resultado puede pasar directamente.
Color medio y color dominante
Average & Dominant Colour
Devuelve un color representativo de una imagen —media, mediana o el más frecuente— como valor de color reutilizable.
Redimensionar imágenes
Image Resizer
Cambia el tamaño por píxeles, por porcentaje o fijando el lado más largo, con proporción bloqueada y ajustes preestablecidos para lotes.
Imagen de relleno
Placeholder Image
Genera una imagen de relleno de color plano o degradado en cualquier tamaño, con las dimensiones escritas encima.
Codificador y decodificador Base64
Base64 Encoder & Decoder
Codifica y decodifica Base64 y Base64URL, para texto o archivos, tratando UTF-8 correctamente.
Base64 a imagen
Base64 to Image
Descodifica una cadena Base64 o un data URI y lo devuelve como imagen que puedes ver y descargar.
Conversor de códigos de color
Colour Format Converter
Convierte un color entre HEX, RGB, HSL, HWB, LAB, LCH y OKLCH, y nombra el color conocido más próximo.