made with react.js

React Native BlurHash

Blurred Image Placeholders

Visit Site

Description

Blurred Image Placeholders

"Give your users the loading experience they want.

BlurHash is a compact representation of a placeholder for an image. Instead of displaying boring grey little boxes while your image loads, show a blurred preview until the full image has been loaded.

In short, BlurHash takes an image, and gives you a short string (only 20-30 characters!) that represents the placeholder for this image. You do this on the backend of your service, and store the string along with the image. When you send data to your client, you send both the URL to the image, and the BlurHash string. Your client then takes the string, and decodes it into an image that it shows while the real image is loading over the network.

The string is short enough that it comfortably fits into whatever data format you use. For instance, it can easily be added as a field in a JSON object."


Creator

Marc Rousavy
@mrousavy


Social Media Links

Jellify Mobile Player App for the Jellyfin Media Server
icon-eye-dark Created with Sketch. 88
Stream Activity Feed React Activity Feed API & SDK
icon-eye-dark Created with Sketch. 2.243
Sentry for React React Application Monitoring
💙 Sponsored by Friends
React Native Collapsible Customizable Collapsible Views
icon-eye-dark Created with Sketch. 187
React ApexCharts Open-source SVG Charts
icon-eye-dark Created with Sketch. 3.679
React Toolbox Open-source Material Design Component Set
icon-eye-dark Created with Sketch. 1.168