Dewdrops on blue hydrangea

Visionary Image

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

Crush Your Core Web Vitals

Eliminate layout shifts and prevent DOM reflows with responsive Blurhash placeholders

Optimize Critical Render Path for faster page loads

Powered by URL-embedded Blurhash data — no backend required

See improvements across multiple Web Vitals metrics (LCP, INP, CLS, FCP, FID, TTI).

Quick Start (2 min)View SourceHow 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 notes Core Web Vitals as an important 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"
Understanding Core Web Vitals and Google Search (Google Search Central)
Developer Friendly
Getting started with Blurhash has never been easier. No backend changes or migrations required — , simply swap your image tags with the Visionary <Image /> component.
The easiest way to get started with Blurhash.
No backend changes or migrations required. Swap your image URLs with Blurhash-encoded URLs.
Framework-tested (Remix, Next.js, Vite) with support for client and server-side rendering (SSR, SSG).
Open source, written in Typescript.
master build statusnpm bundle size (minified)hosted storybook demos

How it Works

Visionary URLs embed placeholder data directly in the URL. Visionary Image uses this data to render fast-loading Blurhash placeholders, improving Core Web Vitals and SEO.

https://link.visionary.cloud/image/cmhEMTdzeGo0MCEzNDg4ITYyMDAhZjg4YTdiIUtlUT1-c3hHXjZ2Q2Y3Uit9c2p0OV0hMyEz/sunset-palm-tree.jpg
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
Three layers ensures there's always a visual component rendered.
Read More: How Visionary Works
Silhouette of palm tree against a pink to orange sunset gradient
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 use the component:

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

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

Create a Visionary URL

Convert a public image URL with Visionary URL Maker

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

Generate programmatically using visionary-url

Visionary 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.

Screenshot of 100% total Core Web Vitals scores - across Performance, Accessibility, Best Practices, and SEO
Screenshot of 100% total Core Web Vitals scores - across Performance, Accessibility, Best Practices, and SEO
Run Scan at PageSpeed Insights

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

CRuX data is also available programmatically via BigQuery dataset and API access

Learn More

Read more about Web Vitals at Core Web Vitals Essentials

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

Visionary

    © 2024

    • Infrequent mailing list:
    Docs
    Demos
    Tools
    Connect