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 image container while the webpage is loading. In order to use Blurhash, its string has to be generated before showing the image and saved as metada into the Filerobot asset database.

Each time an image is uploaded into the Filerobot store, a Blurhash is automatically generated and stored in the metadata of the asset (see Filerobot File System).

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",
...
        "hash": {
            "blurhash": "LAGl9k0J0jys?_yE.9Vs4T-oH=I:"
        },
...
    }
}

For a sample implementation of the Blurhash for a webpage, you can check the demo page with our Responsive Images plugin here.

Original image

Blurhash