jzebedee / ThumbHash

.NET implementation of ThumbHash: a very compact representation of a placeholder for an image. Store it inline with your data and show it while the real image is loading for a smoother loading experience.

ThumbHash

This library is a .NET implementation of ThumbHash.

What is a thumbhash?

A very compact representation of a placeholder for an image. Store it inline with your data and show it while the real image is loading for a smoother loading experience.

Image	ThumbHash	ThumbHash Image
	93 4A 06 2D 06 92 56 C3 74 05 58 67 DA 8A B6 67 94 90 51 07 19
	A1 19 8A 1C 02 38 3A 25 D7 27 F6 8B 97 1F F7 F9 71 7F 80 37 67 58 98 79 06

See a demo of ThumbHash for .NET in Blazor here

Learn more about ThumbHashes here.

Usage

The ThumbHash library has no external dependencies and can be used on its own, or with your choice of image library (e.g., SkiaSharp, ImageSharp) for rendering.

Images must be in the format of unpremultiplied RGBA8888 before working with ThumbHash.

Convert an image into a thumbhash (SkiaSharp)

using SkiaSharp;
using ThumbHashes;

using var original = SKBitmap.Decode("original.png");
using var rgba8888 = original.Copy(SKColorType.Rgba8888);
var thumbhash = ThumbHash.FromImage(rgba8888.Width, rgba8888.Height, rgba8888.GetPixelSpan());

Load a thumbhash and render it to RGBA

using ThumbHashes;

byte[] hash = Convert.FromHexString("934A062D069256C374055867DA8AB6679490510719");
var thumbhash = new ThumbHash(hash);

var (width, height, rgba) = thumbhash.ToImage();

Save a rendered RGBA to a PNG (SkiaSharp)

using SkiaSharp;

var (width, height, rgba) = thumbhash.ToImage();
var image_info = new SKImageInfo(width, height, SKColorType.Rgba8888, SKAlphaType.Unpremul);
using var sk_img = SKImage.FromPixelCopy(image_info, rgba);
using var sk_png_data = sk_img.Encode(SKEncodedImageFormat.Png, 100);

using var fs_png = System.IO.File.Create("test.png");
sk_png_data.SaveTo(fs_png);

Save a ThumbHash to a PNG data url (no dependencies)

string dataUrl = thumbhash.ToDataUrl();

<img src="@dataUrl" />

Support

Discussion and technical support is available on Discord.