Next/image placeholder base64 hash

Developing with Prismic
,
1

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.

see details:

Is there any option to customize Prismic to do this already or should this be flagged up as a feature idea?

Best,
Peter

2

Hey Peter!
You can replace this functionality with Prismic's Image optimization feature
It allows you to edit the image URL and add as many customization parameters as you need.

This feature is possible thanks to Imgix. You can check out their Rendering API docs. And here's an equivalent feature that you may find helpful:

4

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?

5

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:

6

This is being tracked as an open feature request.

If you have another use-case for this feature, you can 'Flag' this topic to reopen. Please use the :heart: button to show your support for the feature and check out our Feature Request Guidelines.

8

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

<Image
  src={image.url}
  blur
  blurDataURL={`${image.url}&blur=200`}
  width={image.dimensions.width}
  height={image.dimensions.height}
  alt={image.alt}
/>
10

I didn't knew about this option in next/image. I think there's one thing missing. I read this on the official doc: Only takes effect when combined with placeholder="blur" .

11

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.

2 Likes
12

@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

13

I understand why it'll be helpful to have it via the Prismic API. I'll add your comments to the feature request.

Thanks a lot for the outlook on this topic.

3 Likes
14

This is being tracked as an open feature request.

If you have another use-case for this feature, you can 'Flag' this topic to reopen. Please use the :heart: button to show your support for the feature and check out our Feature Request Guidelines.

18

Are there any updates on this topic?
I'd be really interested in using the placeholder="blur" on <PrismicNextImage>s.

1 Like
19

We don't have news for the moment.

22

have you done any exploration into that answer? I am curious if it is worth switching to next/image or not

27

Is there any news yet?

As using Next/Image in a NextJS project is good practice it would be really nice to have good compatibility here between Prismic and NextJS. Generated BlurImage in Base64 would be really nice!