`next/image` vs `react-datocms` Image


With the (not so) recent announcements of Next.js related to images, I was wondering what is the best solution to load images coming from DatoCMS (when using Next.js). I love using react-datocms Image component because it makes image responsiveness so easy, but it seems to me that next/image offers a few extra things.
Is there any plan in the future to have them both work together?

Since DatoCMS is using Imgix, you can choose to use next/image directly - I think it makes sense, since it’s highly focused on delivering performant images.

You can you can also get the blur placeholder by querying for blurUpThumb.

Thanks! I supposed next/image was working more optimally with local images. I guess I’ll give it a try then!

next/image can use different loaders. If you’d rather serve the images straight from DatoCMS’s imgix integration, use the imgix loader.

Otherwise, if you’re hosting on Vercel, using the default loader would still allow you to fetch remote images straight from the CMS output (i.e. you can point an <Image src> to the DatoCMS image URL). If you do that, Vercel will fetch the image from DatoCMS/Imgix but then process and proxy it on their own CDN.

I am not sure which is more performant. There are bandwidth considerations too (would you rather exhaust hosting bandwidth with Vercel or Dato).

1 Like

Hey @mick.coelho welcome to Community and thank you for the good question!

Thank you very much @roger and @dsc for the replies!

First of all let me link the docs to our component: GitHub - datocms/react-datocms: A set of components and utilities to work faster with DatoCMS in React environments and an example: https://react-datocms-example.netlify.app/

Coming to the differences instead:

  • responsive images work out of the box without doing anything
  • we generate a blurred version that comes inlined in the HTML without any additional network request (comes together from the initial GraphQL call)
  • you can do all sorts of image manipulation with Imgix, not only simple resizing
  • images are delivered by the Imgix global CDN which is very fast all over the world
  • we offer 2TB of traffic included in the Pro subscription, with Vercel I’m not 100% clear: Fair Use Policy - Vercel Documentation

If you have further questions feel free to ask!

1 Like