Visionary Image

Rapid-Render Blurhash Placeholders Boost Core Web Vitals & Search Performance

Toggle Placeholder

Crush Your Core Web Vitals

Eliminate layout shifts and prevent DOM reflows with responsive Blurhash placeholders

Optimize Critical Render Path for faster page loads

Screenshot of 100% total Core Web Vitals scores - across Performance, Accessibility, Best Practices, and SEO

See Sample PageSpeed Insights Report

Quick Start (2 min)View Source How it Works

Built for Speed

Optimize the critical render path by minimizing DOM reflows, deferring off-screen images, and providing a consistent user experience.

Serious UX Wins

Users enjoy fast, stable pageloads with instant Blurhash previews, eliminating Cumulative Layout Shift (CLS) from images (even on slow networks).

Lightweight Loading

Lazy-loading offscreen images reduces initial pageload size and allows your page to become ready faster — boosting Interaction to Next Paint (INP).

Superior Search Performance

Google emphasizes Core Web Vitals as a major ranking signal. Optimizing these metrics can improve your website's performance in search engine results.

"We highly recommend site owners achieve good Core Web Vitals for success with Search"

Developer Friendly

The easiest way to get started with Blurhash.

No backend changes or migrations required. Simply swap your existing image URLs with Blurhash URLs.

Framework-tested (Remix, Astro, Next, Vite) with support for client and server-side rendering (SSR, SSG).

Open source, written in Typescript.

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

Decoded Blurhash URL

https://blurhash.link/image/cmhEMTdzeGo0MCEzNDg4ITYyMDAhZjg4YTdiIUtlUT1-c3hHXjZ2Q2Y3Uit9c2p0OV0hMyEz/sunset-palm-tree.jpg


                  {
                    backgroundColor: "#f88a7b",
                    blurhash: "KeQ=~sxG^6vCf7R+}sjt9]",
                    blurhashX: 3,
                    blurhashY: 3,
                  }

Show placeholder

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

Audit Your Site's Web Vitals

Run a quick scan to analyze your site's performance and uncover optimization opportunities using PageSpeed Insights.

Run Scan at PageSpeed Insights

See how real users experience your web site at Chrome User Experience Report (CRuX) Dashboard

Learn More

Read more about Web Vitals at Core Web Vitals Essentials

Check out free tools to generate and preview Blurhash URLs: Visionary Tools

Query CRuX data programatically via BigQuery dataset and API access