Image Kit

1.7.1

2026-10-07

Fixed: the preview now behaves exactly like the image it stands for. The idle placeholder of a <VImage> used to be an empty <span> with inline width: 100% and height: auto, so with width: 50%, a fixed height or a parent that shrinks to its content it differed in size from the loaded image, and the layout jumped when loading started. It is now an <img> with the same width/height attributes and classes (a transparent image of the same size as src, the hash as its background), and the browser sizes it by the same rules and CSS as the real image. The box also stays the same while the file downloads: until its first bytes arrive the <img> carries contain-intrinsic-size of its width×height. If you looked for the placeholder as a span in a test or a stylesheet, look for img[aria-hidden="true"].

2026-10-07

HazeHash placeholders, the preferred ones: new hazehash prop on <VImage> and hazehash in SourcePlaceholder, ImageMeta and manifest entries. A 7–48 byte string (28 by default) from the optional peer hazehash decodes to a blurred preview with the right aspect ratio and alpha channel. hazehash wins over blurhash, thumbhash and placeholder; v-lazy-img and useBackgroundImage() use it too. The package loads on demand; without it one warning is logged and the next placeholder is used.
The build tools make HazeHash: mode: 'hazehash' for the Vite plugin and the Nuxt option, placeholders --mode hazehash, generate --hazehash, the ?hazehash and ?placeholder=hazehash imports.
New tuning.budget (--budget, &budget= in an import): the size of a HazeHash string in bytes, 7–48, default 28.
Changed: the default placeholder mode is hazehash when the hazehash package is installed, blurhash otherwise. To keep BlurHash, set mode: 'blurhash'; install hazehash in the app, because the browser decodes the hashes.