How Visionary Image Works

Visionary Image renders your images with built-in Blurhash placeholders, using three layers to provide the fastest possible placeholder rendering, improving performance, user experience, and Core Web Vitals. Powered by Blurhash URLs, which embed image placeholder data directly in the URL.

Visionary Image renders three layers:
  • 01. Base layer / Background color representing the average pixel color of the image. This layer is rendered true-to-size using the aspect ratio and max-width data embedded in Blurhash URLs.
  • 02. Blur layer / A Blurhash placeholder is painted on a canvas; this layer provides a blurred preview of the image, giving users an idea of its content while the image loads.
  • 03. Image layer / The image loads and is rendered on the top layer, replacing the blur layer.
Three-stage image loading
01. Base layer
02. Blur layer
03. Image loaded
Create Blurhash URL
Image to Blurhash

Blurhash URLs contain embedded placeholder data to supercharge image loading and boost Core Web Vitals. Create your own Blurhash URL by uploading an image or providing a publicly accessible image URL.

Visionary Image in Action: PageSpeed Filmstrip

Using PageSpeed Insights, we're able to observe a throttled loading filmstrip showcasing each loading state of Visionary Image:

  1. Initial pageload
  2. Immediate rendering of solid color placeholders
  3. Blurhash placeholders replace solid colors
  4. Full image loads

How it Works

Visionary Image renders three layers to provide the fastest possible placeholder rendering, improving Core Web Vitals like Cumulative Layout Shift (CLS). Blurhash URLs embed the placeholder data directly in the URL.

IMAGE LAYERS:
01. A base layer with the image's aspect ratio is quickly rendered in the DOM
02. A soft, configurable blur is overlaid on a canvas
03. The full image loads, replacing the blur layer
Silhouette of palm tree against a pink to orange sunset gradient
Decoded Blurhash URL
https://blurhash.link/image/cmhEMTdzeGo0MCEzNDg4ITYyMDAhZjg4YTdiIUtlUT1-c3hHXjZ2Q2Y3Uit9c2p0OV0hMyEz/sunset-palm-tree.jpg

                  {
                    backgroundColor: "#f88a7b",
                    blurhash: "KeQ=~sxG^6vCf7R+}sjt9]",
                    blurhashX: 3,
                    blurhashY: 3,
                  }
Two palm trees against a pastel sunset sky with distant mountains
Abstract digital art with swirling patterns in green, blue, and purple

Getting Started is Easy

Install Visionary Image in your project:

bash
npm i --save visionary-image

Import and render the component:

jsx
import { Image } from 'visionary-image';

const ImageDetailPage = ({ imageUrl }) => (
  <Image src={imageUrl} alt="Field full of white cherry blossoms" />
);

Create a Blurhash URL

Convert a public image URL with Blurhash URL Maker

Generate from a local image with Drag-and-Drop Image to Blurhash

Generate programmatically using blurhash-url

Blurhash URL Maker
Visionary

© 2026

Docs
Blurhash Tools
Demos
Connect