search

lorenzodejong / next-sanity-image

Utility for using responsive images hosted on the Sanity.io CDN with the Next.js image component.
MIT License
148 stars 19 forks source link

Feature Request: Support LQIP? #8

Closed RyKilleen closed 1 year ago

RyKilleen commented 3 years ago

Would there be any interest in adding a pre-load state that uses the LQIP metadata when provided? It seems like that'd be super useful, inspired by https://www.sanity.io/plugins/gatsby-plugin-sanity-image

lorenzodejong commented 3 years ago

There's actually some active development on blur up support from the Next.js side. There's been some experiments a couple of weeks ago on possible implementations: https://github.com/vercel/next.js/issues/18858.

Blur up functionality is not easily implemented from this library without creating a custom Image component. I would recommend to wait for a possible integration from the Next.js side (in the next/image component) before we attempt to implement this ourselves.

RyKilleen commented 3 years ago

Thanks for the head's up, that wasn't on my radar! I'll keep an eye over there and some fingers crossed, thanks!

lorenzodejong commented 3 years ago

Hey @RyKilleen just a heads-up that blur-up image support has been added in Next.js 11.0.0 which was released yesterday. I've integrated support for this in the library (version 3.1.0).

Check out #10

RyKilleen commented 3 years ago

Just wanted to follow up here and ask: is there an easy way to build in lqip support? It's a field built on to an asset's metadata by default in sanity, and provides a base-64 without an additional request to the Sanity CDN

edit: happy to work on a PR if there's interest

lorenzodejong commented 3 years ago

Ok great! I wasn't aware of the fact that there's a base 64 encoded version of the image already available. If you'd like you can work on a PR and i'll give it a review along the way! 👍

RyKilleen commented 3 years ago

Great! At a high-level, I think my approach will be to override any of the blurup types if the image metadata exists with a lqip. It'll be on users to include it in their query, and to provide the full image object instead of just a reference.

lorenzodejong commented 3 years ago

Sounds good, i think that approach should work. I've also mentioned issue #17 regarding placeholders for SVG images. Perhaps the metadata field already handles this behavior correctly when using SVG images. Might be worthwhile to try it out with this new implementation and see if this also fixes issue #17 .

lorenzodejong commented 1 year ago

Support for blur up options has been dropped from this library in version 5.0.0. Check out the upgrade guide for more information https://github.com/bundlesandbatches/next-sanity-image#upgrading-from-4xx-to-5xx.