Show HN: SplatHash – 16-Byte Blurry Image Previews for Blazing Fast UI

As developers, we constantly strive for optimal user experiences, and few things impact perceived performance as much as image loading. While lazy loading and optimized image formats help, users often still see blank spaces or spinners before the full image appears. This is where blurry image placeholders come in, providing an immediate visual cue that content is on its way, reducing perceived latency.

Existing solutions like BlurHash and ThumbHash have proven invaluable, encoding an image into a compact string that can be quickly decoded to render a low-resolution preview. However, a new contender, SplatHash, has emerged, promising an even more lightweight and performance-optimized approach. It compresses any image into a fixed 16 bytes, reconstructing a 32x32 blurry preview, and aims to deliver superior decode performance.

The Drive for Compact, Rapid Placeholders

The fundamental challenge with image placeholders is finding the sweet spot between visual quality, hash size, and the performance of both encoding (generating the hash) and decoding (rendering the preview). For client-side rendering, particularly in lists or grids of images, decoding speed and minimal memory allocations are paramount. Every millisecond and byte saved on decode contributes directly to a smoother, faster user interface.

SplatHash addresses this by making specific design choices focused on an extremely compact representation and rapid client-side rendering. Unlike some alternatives, it commits to a fixed output size, simplifying storage and transmission considerations.

Unpacking SplatHash: Fixed Size, Blazing Decode

SplatHash's core value proposition is its ability to encode any image into exactly 16 bytes, which translates to a 22-character base64url string. This fixed size is a significant advantage for predictable data transfer and storage, especially when dealing with large numbers of images. Upon decoding, it produces a 32x32 pixel blurry preview, striking a balance between detail and speed.

Its standout feature is its decode performance. Benchmarks show SplatHash decoding in 0.067 ms with just 7 memory allocations. This is significantly faster than ThumbHash's 0.50 ms (1,168 allocs) and BlurHash's 6.55 ms (5 allocs). While SplatHash's encoding time (3.53 ms) is slower than ThumbHash (0.86 ms), it’s still orders of magnitude faster than BlurHash (445 ms). The rationale here is clear: encoding happens once during upload, but decoding happens on every page load for every user, making decode optimization critical.

Under the Hood: A Glimpse into the Algorithm

SplatHash achieves its efficiency through a sophisticated algorithm detailed in its ALGORITHM.md document. At a high level, it represents an image using a combination of a background color and six spatially localized Gaussian blobs. The process involves:

1. Perceptual Color Space: Operations are performed in the Oklab color space, which is perceptually uniform. This means that numerical differences in Oklab values correspond more accurately to human perception of color differences, leading to more visually pleasing and accurate blurry previews.
2. Matching Pursuit for Placement: Gaussian blobs are strategically placed within the image using a matching pursuit algorithm to capture prominent features.
3. Ridge Regression for Color Optimization: The colors of these blobs and the background are optimized using Ridge Regression, ensuring the best possible color representation within the limited data.
4. 128-bit Packing: All the derived coefficients—background color and the parameters for the six Gaussian blobs—are meticulously packed into a mere 128 bits (16 bytes) for the final hash.

This combination of techniques allows SplatHash to generate a visually reasonable preview from a remarkably small footprint.

Integrating SplatHash into Your Stack

SplatHash provides implementations across popular languages, with Go serving as the reference implementation. All other language versions are verified to produce bit-for-bit identical hashes, ensuring consistency across your ecosystem. You can easily integrate it into your projects:

For Go: shell go get github.com/junevm/splathash/src/go

For TypeScript / JavaScript: shell npm install splathash-ts

For Python: shell pip install splathash-py

Once installed, the general workflow involves encoding an image (e.g., during upload or asset processing) to get the 16-byte hash, storing this hash alongside your image metadata, and then decoding it on the client-side to render the blurry preview while the full image loads.

Key Differentiators and Tradeoffs

SplatHash introduces several distinct features:

• Fixed Output Size: Always 16 bytes (22 base64url characters), simplifying data management.
• 128-bit Integer Storage: The hash can be stored directly as a 128-bit integer, offering efficient database storage and manipulation.
• Perceptual Color Space (Oklab): Ensures more accurate and natural color representation in the preview.
• Spatially Localized Basis (Gaussians): Helps in capturing more localized image details within the compact hash.
• Global Weight Optimization (Ridge): Contributes to overall color accuracy.
• Alpha Channel Support: Handles images with transparency.
• Bit-Exact Cross-Language Parity: Guarantees consistent results across Go, TypeScript, and Python.

The primary tradeoff for SplatHash's fixed 16-byte size and superior decode performance is the lack of configurable quality versus size. Unlike BlurHash, you cannot adjust parameters to generate a larger hash for a higher-fidelity preview; it's a fixed-quality, fixed-size solution. This design decision prioritizes predictability and speed for the most common use case.

SplatHash presents a compelling option for developers seeking a highly performant, ultra-compact image placeholder solution. Its focus on decode speed, fixed size, and advanced algorithmic techniques makes it an excellent candidate for enhancing perceived performance and user experience in demanding applications.

Technical FAQ

Q: Why is decode performance prioritized over encode performance in SplatHash?

A: Decode operations happen frequently on the client-side for every user and every image display, directly impacting perceived load times. Encoding, on the other hand, typically occurs once during image upload on a server, making its performance less critical for user experience.

Q: How does SplatHash achieve its fixed 16-byte output size?

A: SplatHash achieves its fixed 16-byte size by carefully packing the coefficients for its background color and six Gaussian blobs into 128 bits. This compact representation is a fundamental design choice, contrasting with solutions that use variable-length hashes for adjustable quality.

Q: What is the significance of using the Oklab color space and Gaussian basis in SplatHash?

A: Oklab is a perceptually uniform color space, meaning color differences in Oklab correlate more closely to how humans perceive color differences, leading to more visually accurate blurry representations. The spatially localized Gaussian basis functions allow for capturing prominent image features efficiently within the fixed 16-byte constraint, contributing to better visual quality from minimal data.