npm.io
0.1.1 • Published yesterdayCLI

@zachtrice/optimize-images

Licence
MIT
Version
0.1.1
Deps
1
Size
11 kB
Vulns
1
Weekly
0
SummaryDependencyVersions

@zachtrice/optimize-images

Build-time image optimizer built on sharp:

  • Converts every .png / .jpg in a folder to WebP (typically 60–75% smaller).
  • Generates a tiny base64 blur placeholder for each, written as a map you can feed straight into next/image placeholder="blur" (or anything else).
  • Use it as a CLI (drop it in an npm script) or call the API.

Install

npm install --save-dev @zachtrice/optimize-images

CLI

// package.json
{
  "scripts": {
    "optimize-images": "optimize-images",
    "prebuild": "optimize-images"
  }
}
npx optimize-images --dir public/images --out lib/image-blur.ts
Option Default Description
--dir <path> public/images Source image directory.
--out <path|none> lib/image-blur.ts Blur-map output file (none = skip).
--format <ts|js|json> ts Blur-map format.
--export-name <name> imageBlurData Export name for ts/js output.
--url-prefix <prefix> /images Public URL prefix used for map keys.
--quality <1-100> 82 WebP quality (full-size).
--blur-width <px> 20 Blur placeholder width.
--blur-quality <1-100> 20 Blur placeholder quality.

Use with next/image

import Image from 'next/image'
import { imageBlurData } from '@/lib/image-blur'

<Image
  src="/images/hero.webp"
  alt="Hero"
  width={1200}
  height={630}
  placeholder="blur"
  blurDataURL={imageBlurData['/images/hero.webp']}
/>

API

import { optimizeImages, serializeBlurMap } from '@zachtrice/optimize-images'

const { blur, results } = await optimizeImages({
  dir: 'public/images',
  out: 'lib/image-blur.ts',
  format: 'ts',
  quality: 82,
  log: console.log
})
  • optimizeImages(options) → { blur, results }. blur maps "/images/name.webp" to a base64 data URI; results lists per-file byte sizes.
  • serializeBlurMap(blur, format?, exportName?) → source string (ts | js | json).

Existing .webp files are overwritten; source PNG/JPEG are left in place.

License

MIT ZachTRice

Keywords

imageoptimizewebpsharpblurplaceholdernextnextjsclibuild