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.
npm install rehype-thumbhashOptional:
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".
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="ZhgODYKHh3l/ioh0d5hohkVtEOYG"
/>
</body>
</html>