Next.js Image blurDataURL generator
Convert an image into a much smaller, blurred image to display for loading, namely for Next.js Image component. Image is blurred with the blurhash algorithm. You can manipulate the settings of the blurhash algo and the data URL formatting.
Input
Blurhash options
Blurhash
null
Output
Data URL options
Data URL
null
More information
Purpose
The main reason for creating this tool was to quickly and manually generate a blurred data URI for use with Next.js' Image component, which has an optional blurDataUrl field. A blurhash is a very compact representation, but it requires decoding it onto a HTML canvas. Instead, this tool uses the blurhash algorithm to generate the blurred data, and then spits out a data URL, which is more portable, and immediately useful for Next.js Image
Comp X / Comp Y
See explanation in blurhash documentation. Generally, increasing these dimensions increases fidelity of the blurred image at the cost of size.
Image format
WEBP format is the most compact, but at the time of writing, it is only viewable in modern browsers. That may be acceptable for your purposes, especially if you use this blurred image as a placeholder until the actual image loads. You can adjust the quality setting to adjust the compression of the image.
JPEG is both compact/lossy and universally renderable. You can adjust the quality setting to adjust the compression of the image.
PNG is lossless, but will result in the largest size. You almost surely do not want this if you care about the size of the resulting data URL.
Punch
See blurhash documentation. You will generally want a punch of 1.