I would like to make use of the placeholder feature of next/image to show a blurred version of the image during it's being loaded, but unless Prismic supports this directly, it's practically not possible. Each version (different aspect ratio) of each photo would require a base64 hash. In an ideal case scenario, when i upload a photo in Prismic and manipulate it for each resolution, it generates this base64 hash and adds it to the api export.
Prismic's Image optimization does currently not support blurred placeholders. imgix however does.
I was however now advised that there is another ticket that refers to exactly the same and it seems to be on the Prismic's roadmap to integrate: Support for imgix blurhash. I guess it will not be for next/image, but for Prismic/ImgIx own solution.
I would however be interested how prismic's solution compares to next/image in terms of performance for server side rendered pages as well as client side rendered ones. Has anyone looked into this?
It is true, we already have an open feature request to support blurhash, thanks.
For the moment we don't have any document that explains the impact Prismic's Image optimization has on client and server-side sites, but it's an interesting topic to address in our blog.
A while ago, when we released the feature, we published a doc in the blog listing the reasons why this integration has many advantages such as dynamically compressing all your images which improves your website performance, this has an impact on the first rendering of the pages & for SEO, you can check it out if you're interested here:
closed , flag & select 'Something Else' to reopen.
I wanted to add to this question, since prismic already supports the imgix api, why couldn't this be possible to achieve today using the blurDataURL prop from nextjs's Image component using prismic's image url and adding the blur option at the end, something like this
It's not quite the same as I requested and doesn't in my mind offer the true benefit.
Looking at the imgix docu on blur, even if you set blur to 2000, a 47.6KB image will only be reduced to 7.1KB, whereas a base64 hash of the same image in a better quality is only about 30 byte long. That aside, using the blurDataURL parameter makes still a network call to the url to retrieve the blur.
The real benefit would be if the CMS would automatically create and store the hash and when I do an api call to the CMS, it should send the image url as well as it's hash. In this case next/image can display the blur before it fetches any images.
@Pau yes sorry about the type, it is like you said, using the ploaceholder prop and even tho this is better than nothing, like @peter2 said it would be even better to have prismic doing this before hand to prevent the network call. Having said that, even tho nextjs will do a network request, this should only happen the first time and and after that it will be served from the cache. Again, not the same, but it's still better than not having it