Support for Color Palette Extraction about react-imgix HOT 9 CLOSED

Hey there @oyeanuj. Thanks for the suggestion!

What would be the use case for using such a component (Imgix or otherwise) for Color Palettes?

from react-imgix.

@frederickfogerty A classic case for this as placeholder for images waiting for them to load. You'll see this on Google Images, or Pinterest where a color from the image is used as the placeholder. For all of that, you'd need the color palette.

from react-imgix.

Hey @oyeanuj we're looking to implement first class support for lazysizes, which should provide support for LQIP images 👍 I'm gonna close this for now.

from react-imgix.

@frederickfogerty Sorry, I'm seeing this message after a while. I just wanted to point out that LQIP or lazy-loading isn't a substitute for color palette extraction as they are very different choices in terms of design.

I feel like this should be re-opened as at the moment, color palette extraction via imgix is cumbersome and it would be great to have first-class support for it.

Great work on the library with all the new things btw!

from react-imgix.

Thanks for following up @oyeanuj! I'll tag @sherwinski who is responsible for this library at the moment 👍

from react-imgix.

Hey @oyeanuj,

Glad to hear you’re liking the library! I agree that color palette extraction can be tedious, although I am a bit apprehensive to create first-class support for it — let me explain why. A major concern for our team when implementing new first-class features is striking a balance between general usability and utility. By that I mean, is the feature flexible enough to be used across a variety of use cases, while still saving precious engineering time. In the past we’ve been burned trying to fit in very specific features into our libraries, as it tends to lead to an unruly/difficult-to-maintain codebase.

With regards to a new Color Palette component, I wouldn’t want to constrain it past just creating a thin wrapper around the palette=json parameter. But at the point, I would question whether it is providing much utility at all. Perhaps something like constructing URLs with imgix-core-js + palette=json would better suit your use case? If that’s the case, I’d be happy to provide a code sample to get you started.

As always, we’re happy to have these discussions with our users directly because it helps steer future development choices. But at the same time, we want to design new features with the general user in mind.

from react-imgix.

@sherwinski Sorry, I missed this message but funnily enough came back looking to check if this was an offered functionality now. My use-case now, and increasingly I see all over the web is using the image color palette to generate an ambient background for the page/section/card etc. At this point, the option is to just use palette=CSS in which case, we can't actually access the colors for custom usage, or to have a cumbersome way to call the json per image.

In the original request, and even now, I wonder if having a standard component wrapper or a hook wrapper, would be the more React way of using the color palette feature. What do you think?

If not, I'd love a code sample suggestion to see how you suggest integrating color palette JSON in React?

from react-imgix.

Hello @oyeanuj,

Apologies for the delay in joining this conversation, but I wanted to ensure we followed up.

Regarding Sherwin's suggestion, it seems he is proposing fetching the JSON blob per image and using the colors provided in the request to render the element's background color.

Now, to address your original feature request and provide some insights into our thoughts on this matter. We are leaning towards not implementing this feature due to the necessity of making two network requests: one to fetch the palette and another to fetch the image. Our rationale behind this decision is that our library aims to offer a straightforward way to programmatically render an image with image-specific imgix parameters. How loading states are handled depends on the developer who consumes the component, as each project has its unique requirements. For instance, images can be loaded programmatically or hard-coded. However, I am open to discussing further how you envision this feature working and being implemented.

If we were to consider incorporating some form of a "placeholder" feature, I would lean towards a direction similar to how Next.js has implemented their image component, particularly their placeholder feature. For example, we could use a small base64-encoded image during the loading state. This approach would avoid the performance impact of making additional fetches to obtain the palette=json data.

from react-imgix.

@mattlaguardia Thank you for the thoughtful response. It was useful to understand how y'all are thinking about the library as well as I (probably incorrectly) assumed it was going to wrap all of imgix features.

On the placeholder feature, I think your point makes sense.

On the container background issue: @sherwinski I'd love to take you up on the offer for the code sample there to visualize what you are suggesting. That said, I think it might be one of many use-cases for color palette and why this request might come up in other instances, fwiw.

from react-imgix.