40 | BlurHash 41 |
42 |43 | BlurHash is a compact representation of a placeholder for an image. 44 |
45 | 48 | 49 | More on our blog 50 | 51 |BlurHash demo
47 |
48 |
71 |
72 |
73 |
74 |
--------------------------------------------------------------------------------
/Kotlin/demo/src/main/res/drawable-v24/ic_launcher_foreground.xml:
--------------------------------------------------------------------------------
1 |
49 |
62 | Encode
50 | 51 | 55 | 61 |
63 |
66 | Blurhash
64 | 65 |
67 |
70 | Decode
68 | 69 |
13 |
36 | %>)
37 |
38 |
53 |
14 |
35 |
15 |
16 | %>)
17 |
18 |
17 |
19 |
20 | %>)
21 |
22 |
21 |
23 |
24 | %>)
25 |
26 |
25 |
27 |
28 | %>)
29 |
30 |
29 |
31 |
32 | %>)
33 |
34 |
33 |
37 |
39 |
52 |
54 |
72 |
55 |
71 | Why BlurHash?
56 |Why would you want this?
57 |58 | Does your designer cry every time you load their beautifully designed screen, and it is 59 | full of empty boxes because all the images have not loaded yet? Does your database 60 | engineer cry when you want to solve this by trying to cram little thumbnail images into 61 | your data to show as placeholders? 62 |
63 |BlurHash to the rescue!
64 |65 | Replace boring grey boxes with beautiful blurhash states and the designers will be happy. 66 | Blurhash strings are short enough to be added as a field in a JSON object and to be stored 67 | in a database. The implementations are small and easy to port to new languages, and the end 68 | result is a smooth and interesting experience for your users. 69 |
70 |
73 |
142 | How does it work?
74 |75 | In short, BlurHash takes an image, and gives you a short string (only 20-30 characters!) 76 | that represents the placeholder for this image. You do this on the backend of your service, 77 | and store the string along with the image. When you send data to your client, you send both 78 | the URL to the image, and the BlurHash string. Your client then takes the string, and 79 | decodes it into an image that it shows while the real image is loading over the network. The 80 | string is short enough that it comfortably fits into whatever data format you use. For 81 | instance, it can easily be added as a field in a JSON object. 82 |
83 |
84 |
141 |
85 |
120 |
86 |
90 |
94 |
98 |
102 |
103 |
104 | 105 | Pick image or upload your own 106 |
107 | 110 | 111 |
112 | Components
113 |
119 |
114 |
115 | x
116 |
117 |
118 |
121 |
131 |
122 |
123 |
124 | 125 | BlurHash string 126 |
127 |128 | The blurhash algorithm encodes your image into the short string above, ready to save in a database 129 |
130 |
132 |
133 |
140 | 134 | Result 135 |
136 |137 | The blurhash string is decoded into a small image that is rendered on to a canvas. 138 |
139 |
143 |
152 |
153 |
154 |
--------------------------------------------------------------------------------
/Website/deploy.sh:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env bash
2 | set -o errexit #abort if any command fails
3 | me=$(basename "$0")
4 |
5 | help_message="\
6 | Usage: $me [-c FILE] [Get started
144 |145 | The same exported data can be used on all platforms. Get the BlurHash library for your 146 | platform of choice. 147 |
148 | 149 | More on github 150 | 151 |