Somehash: A Blurhash-Inspired Exploration

a year ago

The author introduces Somehash, a custom image placeholder solution inspired by Blurhash.
Somehash aims to capture visitor attention during image loading with quick, creative placeholders.
The process involves three stages: processing (extracting image info), placeholding (rendering placeholder), and loading (displaying full image).
Key considerations include extracting minimal data (e.g., 20 bytes) and ensuring fast rendering across all connection speeds.
Python tools like Pillow, NumPy, and scikit-learn are used for image processing and color extraction via KMeans clustering.
Aspect ratios are stored to prevent layout shifts, and data is encoded for transfer between Python and React.
The React component animates extracted colors as vertical lines until the full image loads.
Future improvements could link animations to the image's onload event for smoother transitions.
The project focuses on exploration rather than production readiness, inviting creative ideas for placeholder designs.

Hasty Briefsbeta