gatsby-transformer-blurhash
gatsby-transformer-blurhash copied to clipboard
m5r
Add querying for blurhash string to be decoded on the client?
From my understanding, serving image as base64 doesn’t realize full potential of blurhash. Full benefit of blurhash algorithm is that it produces a string significantly smaller than base64 of the thumbnail-sized JPEG.
This transformer sends base64 to client, if I followed the code correctly.
Perhaps exposing blurhashed variable via graphql would allow the user to query only for the shorter hash to be used with https://github.com/woltapp/react-blurhash.
You're right, this transformer is serving already decoded blurhashed images to the client.
Technically, the transformer could expose a blurhashed variable and let the client decode it but that would utilize the user's CPU in order to decode this temporary image.
The goal here is to serve a placeholder while the real image is loading and doing all the CPU-intensive work at build time will make it easier on the user's CPU to do other tasks.
The way blurhash is advertised is to do decoding on the client. I believe if it’s not done that way it might be misleading to users of this plugin.
From https://blurha.sh/
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.
It is not that CPU intensive and takes under 16ms, but more like 1-4ms in my testing for previews of around 30x40 pixels. On mobile web browsers it also runs smooth including iPhone 5C (a phone from 2013). Blurhash wouldn’t really make sense as an idea if it was too heavy.
People who use blurhash in a form of gatsby plugin might assume they get much smaller representation of the encoded image, whereas in fact they simply get base64 string. You could bypass blurhash entirely and get the processed jpeg from sharp or jimp directly and result would be the same base64 string.
I think the addition concerns exposing blurhash string and updating README to make it explicit about two options:
- to get the full benefit of
blurhash, where users would queryblurhashstring and addreact-blurhashon the client - get similar but heavier (in terms of bytes delivered to users) base64 version that doesn’t require client side modification at the expense of response weight.
I think the addition concerns exposing
blurhashstring and updating README to make it explicit about two options:* to get the full benefit of `blurhash`, where users would query `blurhash` string and add `react-blurhash` on the client * get similar but heavier (in terms of bytes delivered to users) base64 version that doesn’t require client side modification at the expense of response weight.
That sounds good, want to make a PR ?
Hey @m5r I am getting this error when trying to push a branch to this remote: "Permission to m5r/gatsby-transformer-blurhash.git denied to gryzzly"
Before I update README I wanted you to see the code in [work-in-progress] PR.
@m5r hey, I would like to get your OK on the code before I update README, thanks. Opened the PR ^^