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 ca…

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. [image] Configure the Image Field This article explains what the Image field is and how to configure it in t…

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 n…

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 …

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} blu…

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" .

[image] levijesica: blur 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 ab…

@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 sh…

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.

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

We don't have news for the moment.

Next/image placeholder base64 hash

Developing with Prismic

Topic		Replies	Views
PrismicNextImage blurDataURL utilities or metadata Developing with Prismic product-feature-idea , nextjs , page-builder	1	373	March 28, 2024
Best practice for next/image support? Developing with Prismic nextjs	1	2005	January 17, 2022
Image optimization with Next.js Developing with Prismic nextjs	6	5687	March 9, 2022
Support for imgix blurhash Features	1	1351	July 21, 2021
Future Image component of next.js Developing with Prismic nextjs	1	1217	September 4, 2020

Next/image placeholder base64 hash

Related topics