feat(imgix): format keys

[shadow81627]

resolves #363

[productdevbook]

blurhash library used ? I couldn't see https://github.com/nuxt/image/blob/main/package.json

[shadow81627]

@productfrontenddeveloper my understanding is that blurhash is a image format supported by imgix?
https://docs.imgix.com/apis/rendering/format/fm#blurhash

What is the library we need to include and what functionality does it provide?

[productdevbook]

imgix return blurhash -> 'eEC|aSROj=WAt:f-n#WXe-N4bJtRj]j[M{oNkXj[ozRjj^a$ayfl' and see loading etc with.

https://blog.imgix.com/2021/01/26/blurhash

https://blurha.sh/

https://github.com/woltapp/blurhash/tree/master/TypeScript

[shadow81627]

@pi0 is it in scope for @nuxt/image to transform blurhash into placeholder images? https://github.com/woltapp/blurhash/tree/master/TypeScript

[pi0]

Thanks!

is it in scope for @nuxt/image to transform blurhash into placeholder images?

Nop. It happens on server side of imgix

[productdevbook]

Thanks!

is it in scope for @nuxt/image to transform blurhash into placeholder images?

Nop. It happens on server side of imgix

@pi0
https://docs.imgix.com/apis/rendering/format/fm#blurhash

It only freezes a key on the imgix side, you need to use it inside. so when we add this, the picture does not come back.

When uploading a picture, you need to first take it and show it. You can show the image when the image is finished uploading.

[pi0]

You are correct @productfrontenddeveloper. We still need placeholder support (#189) for loading strategy. Normally for providers not supporting blurhash, we use a pixel resized version of image but can also support native server blur ike this.

Meanwhile this format can be useful for cases a static blurry version is desired like a banner background image.

[Rigo-m]

What I did in userland is this:

1. Fetched with $http the imgix blurhash hash
2. Rendered the blurhash as a Base64 (using node-canvas if in SSR, using native canvas if in frontend)
3. Placed Base64 as a background in a div
4. Hid blurhash if image has already been loaded (image.complete attribute) or on @load event

It works well imho, should I try to implement it in nuxt-img? Any caveats/ideas on it?