vite-plugin-thumbhash

Add ThumbHash to your vite project.

Install

npm install vite-plugin-thumbhash --save-dev

pnpm add vite-plugin-thumbhash -D

Usage

import { defineConfig } from 'vite'
import { thumbHash } from 'vite-plugin-thumbhash'

export default defineConfig({
  plugins: [thumbHash()]
})

import Image from 'example.jpg?thumb'

//...
<img src={Image.thumbSrc}
     width={Image.thumbWidth}
     height={Image.thumbHeight}
/>


// If you want to import original image
<img src={Image.originalSrc}
     width={Image.originalWidth}
     height={Image.originalHeight}
/>

TypeScript IntelliSense

Add the following code to vite-env.d.ts :

/// <reference types="vite-plugin-thumbhash/client" />

Options

type Options =
    {
      /**
       * A picomatch pattern, or array of patterns, 
       * which specifies the files in the build the plugin should operate on. 
       */
      include?: Array<string | RegExp> | string | RegExp
      /**
       * A picomatch pattern, or array of patterns,
       * which specifies the files in the build the plugin should ignore.
       */
      exclude?: Array<string | RegExp> | string | RegExp
      /**
       * type OutputExtension = 'png' | 'jpg' | 'webp' | 'avif'
       * @default: 'png'
       */
      outputExtension?: OutputExtension
    }

Example

see playground

License

MIT © nemurubaka