rehype-thumbhash
v1.2.0
Published
rehype plugin to set the thumbhash of local images to the data-thumbhash img attribute
Downloads
4
Maintainers
alphajackReadme
rehype-thumbhash
A rehype plugin that generates small thumbnails using from local images using sharp and thumbhash, and adds stores as data-thumbhash attributes.
These thumbnails can then be used by client-side libraries such as lazysizes.
Install
npm install rehype-thumbhashOptions
Optional:
dir: prefix to local imagesformat: thumbhash format, either "hash" or "url". Defaults to "hash".originalAttribute: attribute where to store the original "src". Defaults to "src".thumbhashAttribute: attribute where to store the thumbhash image. Defaults to "data-thumbhash".
Usage
import { rehype } from "rehype";
import rehypeThumbhash from "rehypeThumbhash";
rehype()
.use(rehypeThumbhash, { dir: "./" })
.process('<img src="example.jpg">', function (err, file) {
if (err) throw err;
console.log(String(file));
});Expected output:
<html>
<head></head>
<body>
<img
src="example.jpg"
data-thumbhash="data:image/png;base64,iVBORw0KGgoAAA..."
/>
</body>
</html>