Installation

Requirements

Environment	Minimum version
Node.js	20+
vue	3.3+ (only for hazehash-vue)
nuxt	3.9+ (only for hazehash-nuxt)
sharp	0.33+, optional (reading image files, the command line, Nuxt hashes)

The decoder and the encoder have no dependencies and run in any modern browser, in Node.js, in Cloudflare Workers and in other runtimes. sharp is only needed where HazeHash has to read an image file: the Node.js helper, the hazehash command and the Nuxt module's build-time hashes. Building the repository from source needs Node.js 22 and pnpm, but the published packages support Node.js 20+.

Installation

npm install hazehash

For reading image files, the hazehash command and the Node.js helper, add sharp:

npm install --save-dev sharp

For Vue 3, hazehash-vue takes hazehash and vue as peer dependencies:

npm install hazehash hazehash-vue

For Nuxt, hazehash-nuxt brings hazehash and hazehash-vue with it; add sharp so the module can generate hashes during the build:

npm install hazehash-nuxt
npm install --save-dev sharp

Quick start

Encode an image once, on the server or at build time, and keep only the string:

import { encodeToString } from 'hazehash/encode'

// rgba: straight (non-premultiplied) sRGB pixels, 4 bytes per pixel
const hash = encodeToString({ data: rgba, width, height })
// "Ed7UwRWKKv5znm6a7sC1tziHDNpMuCikxrYpIg"

Decode it where the image is shown:

import { decode, getAverageColor } from 'hazehash'

const { width, height, data } = decode(hash) // RGBA, 32 px on the long side
const { r, g, b, a } = getAverageColor(hash) // a is 0–1

Files on disk go through the Node.js helper:

import { encodeFileToString } from 'hazehash/node' // needs sharp

const hash = await encodeFileToString('photo.jpg', { budget: 24 })

or through the command line:

npx hazehash encode photo.jpg --budget 24

Quick start: Vue

<script setup lang="ts">
import { PlaceholderImage } from 'hazehash-vue'
</script>

<template>
  <PlaceholderImage
    hash="Ed7UwRWKKv5znm6a7sC1tziHDNpMuCikxrYpIg"
    src="/photo.jpg"
    alt="Photo"
    :width="1280"
    :height="959"
  />
</template>

See PlaceholderImage Component.

Quick start: Nuxt

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['hazehash-nuxt'],
})

<template>
  <PlaceholderImage src="/images/hero.jpg" alt="Hero" :width="1600" :height="900" />
</template>

The module hashes every image in public during the build, and the component finds the hash by src. See Nuxt Module.