Somehash: A Blurhash-Inspired Exploration

Summary

Somehash: A Blurhash Inspired ExplorationPosted Sat, 08 Feb 2025(Jump Ahead: Demo and Code) Humans have short attention spans. Websites take time to load. What can be done to prevent visitors from leaving? Blurhash, shown below, is one such solution. It offers quick loading placeholder images that do a great job of capturing the attention of visitors until the actual content is ready. Blurhash in Action This in-between space is rather interesting, often neglected, and rarely explored. Let's go on a journey and build an image placeholder, Somehash, from scratch. Overview The journey of an image occurs in three stages: processing, placeholding, and loading. First, information is extracted from the image, hashed, and stored. Next, a React component retrieves the hash and renders a placeholder image. Finally, the full-resolution image is loaded. Creative Exploration The first step to creating Somehash is deciding what it will display. The creative possibilities are endless. There are tons of algorithms for extracting interesting colors, textures, patterns, gradients, and more from images. There are two questions that need answering in this creative exploration. What information should be extracted? The information that is extracted should be small. Blurhash extracts about 20 bytes of data per image. KMeans clustering is a fascinating algorithm. One application is to find dominant colors from an image. The screenshot below shows an example. Dominant colors extracted from a photo How will the extracted information be displayed? Whatever effect that is chosen should occur quickly and work on both fast and slow internet connections. Data Extraction (Data Extraction Code, Extracted Data) The first step is processing the images for the website. This is a computationally intensive task, often taking several seconds per image to extract the necessary information. To handle this efficiently, the processing is done using a script that runs outside the browser. Selecting Tools The...