Blurhash

A Blurhash is a compact representation of a placeholder for an image. It consists of just few bytes of data and is used to fill the box of the image while the webpage is loading. In order to use blurhash, its string has to be generated before showing the image.

After an image gets upload to the Media gallery, a blurhash is automatically generated and stored in the metadata of the asset.

The blurhash of the image below would be the string LAGl9k0J0jys?_yE.9Vs4T-oH=I::

{
...
    "file": {
        "uuid": "bb1ce06f-2677-581a-85e7-28c01ec50000",
        "name": "map.jpg",
        "size": {
            "bytes": 42014,
            "pretty": "41.03 KB"
        },
...
        "hash": {
            "blurhash": "LAGl9k0J0jys?_yE.9Vs4T-oH=I:"
        },
...
    }
}

For a sample implementation of the blurhash for a webpage, you can check the demo page of our Responsive plugin here:

https://scaleflex.github.io/react-cloudimage-responsive-blur-hash/

Original image

Photo alt \#responsive

Blurhash

Photo alt \#responsive