Next.js Image

[rimzzlabs]

I'm looking for discussion, but it looks like this repo didn't enable the discussion feature, so here I am.

I'm using imagekit with nextjs, and my image were like very fast to deliver to the browser, thanks for the service, and here what's I'm gonna ask. What's the benefit using this SDK over Next.js Image? or is there something I'm missing out?

[mayteio]

I think there are trade-offs (https://docs.imagekit.io/getting-started/quickstart-guides/nextjs).

If you use next/image then you get responsive images - next.js will create different images for different viewports. You could probably work with this to accept a similar number of parameters that imagekit-react offers.

If you use imagekit-react then you can pass all parameters directly to the component with a nicer API, AND you can also leverage things like LQIP.

It would be great to have the best of both worlds.

[JayeshVP24]

Hey @rizkimcitra, Well you have to create a custom loader for imagekitio to work with next/image.

The issues with next/image custom loader:

• fixed number of props
• only takes quality height and src as props
• you can't use transformations other than height and quality

Advantages of using imagekit-react over custom loader

• use all the transformations available at imagekitio
• you get exactly the size you asked for
• as @mayteio mentioned, way better API to use all the transformations and other props

One drawback of imagekit-react I found is that it

• the API doesn't account for responsive images I might be wrong about this, but I didn't find any feature in their IKImage API for responsive images.

Overcome the drawback

• just use the normal <img /> tag or <picture /> tag and use the URL directly
• you can also code a custom URL builder which consists

  • your public URL of imagekit
  • props to add other transformation features
  • returns a string of URL which consists all the mentiones features

• If you get the URL then you can use the <img /> tag or <picture /> tags resonsive features

You can also mix and match, use all the three in the same project as per the use case. One thing which would be great for react is that if Imagekit-react made a API or function that takes all the transformation and just provides a URL which we can directly use in img tag, as they already have code for all the transformations.

There is an URL Builder but it's in imagekit-io core API https://github.com/imagekit-developer/imagekit-javascript

If we had this API in imagekit-react itself

• it can use the IKContext to lower redundant code that might happen if we use imagekit core API in react

Thank you, hope I this was helpful for you.

[imagekitio]

You can use IKCore https://github.com/imagekit-developer/imagekit-react#ikcore It exposes underlying ImageKit javascript core SDK which can be used to generate URL. Hope it helps.