# Visionary

> Visionary turns uploads into production CDN image URLs in about 60 seconds: drag in an image, get a globally distributed URL with responsive AVIF/WebP/JPEG variants and embedded Blurhash placeholder data.

Every Visionary Cloud image URL carries its placeholder data in the URL. Compatible libraries such as visionary-image and visionary-image-js can render the placeholder immediately in the browser, without an extra API request or database lookup. Paid plans add an image dashboard, global delivery from 300+ PoPs, domain controls, and automatic AI-generated alt text.

## Docs

- [Home](https://visionary.cloud/): Product overview, getting started, and how Visionary works
- [Plans](https://visionary.cloud/plans): Paid CDN plans with global edge delivery (300+ PoPs), included uploads, AVIF/WebP/JPEG transcoding, image management, and automatic AI-generated alt text
- [How Visionary Image Works](https://visionary.cloud/how-it-works): Three-layer placeholder rendering with Blurhash URLs
- [Core Web Vitals Essentials](https://visionary.cloud/web-vitals): Guide to LCP, INP, and CLS
- [Measuring Core Web Vitals in the Real World](https://visionary.cloud/web-vitals/measure-core-web-vitals): Measure real-user field data with PageSpeed Insights and CRuX
- [Blurhash URL](https://visionary.cloud/blurhash-url): Blurhash URL format and usage

## Tools

- [Image to Blurhash](https://visionary.cloud/image-to-blurhash): Generate a Blurhash from an uploaded image
- [Blurhash URL Maker](https://visionary.cloud/url-maker): Build a Blurhash URL from image data
- [Blurhash URL Inspector](https://visionary.cloud/url-inspector): Decode and inspect Blurhash URLs
- [Blurhash Drawing Pad](https://visionary.cloud/draw-blurhash): Draw your own custom Blurhash placeholder
- [Blurhash Tools](https://visionary.cloud/tools): All Blurhash utilities in one place

## Demos

- [Image Gallery](https://visionary.cloud/gallery): Live demo of Visionary Image placeholders
- [Storybook](https://visionary-ux.github.io/visionary-image): Component documentation and examples

## Libraries

- [blurhash-url on npm](https://www.npmjs.com/package/blurhash-url): Generate deterministic Blurhash URLs with embedded placeholder data
- [blurhash-url on GitHub](https://github.com/visionary-ux/blurhash-url): Source code and issues
- [visionary-image on npm](https://www.npmjs.com/package/visionary-image): SSR-ready Blurhash placeholders for React and Web Components
- [visionary-image on GitHub](https://github.com/visionary-ux/visionary-image): Source code and issues
- [visionary-image-js on npm](https://www.npmjs.com/package/visionary-image-js): Framework-agnostic JavaScript for rendering instant Blurhash placeholders on any website
- [visionary-image-js on GitHub](https://github.com/visionary-ux/visionary-image-js): Source code and issues
- [CodeSandbox demo](https://codesandbox.io/p/sandbox/visionary-sandbox-qlqkgd): Try Visionary Image in the browser

## Optional

- [Sign up](https://visionary.cloud/signup): Choose a paid plan and create a Visionary Cloud account
- [Log in](https://visionary.cloud/login): Sign in to your Visionary Cloud account
- [Dashboard](https://visionary.cloud/dashboard): Image library for uploads, folders, and Blurhash URLs (requires an active paid plan)