blur hash

^ That’s a BlurHash’d image, not a UFO 😄


Here’s an Open Source repo containing an Azure Function written in TypeScript to encode and decode images using the BlurHash algorithm.

It’s hosted under, with a demo on the homepage, and an API, see usage docs below.


The demand for high-quality images has never been greater. However, with higher quality comes larger file sizes, which can make loading times slow and frustrating for users. This is where the BlurHash algorithm comes in.

BlurHash is a compact representation of a placeholder image that can be used to quickly display a preview of the actual image while it’s being loaded. This technique is especially useful for applications and websites that display many images at once, such as social media platforms or online marketplaces.


GET: /api/v1/blur-hash

  • Decodes a BlurHash and return a jpeg with the specified dimensions
  • Request URL GET: /api/v1/blur-hash
    • Required URL Params:
      • blurhash: blurhash for the image
      • width: Width of the decoded image
      • height: Height of the decoded image

Returns a jpeg based on the URL params if the BlurHash is valid.

Example error response (400):

  "error": true,
  "message": "The blurhash is invalid - blurhash length mismatch: length is 18 but it should be 28"

POST: /api/v1/blur-hash

  • Encodes an image and returns a BlurHash
  • Request URL POST: /api/v1/blur-hash
    • Required Body Param:
      • imageUrl: URL for the image

Returns BlurHash if the URL is valid and publicly accessible.

Example request body:

    "imageUrl": ""

Example error response (404):

  "error": true,
  "message": "imageUrl <imageUrl> could not be loaded"

Remotes for the API repo:

  1. GitHub - desholmes/
  2. Azure DevOps - DesHolmes/

Popular related posts for Azure, Azure DevOps and CI/CD:

Related Posts