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

✋ Feature Requests
1

Hi!

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?

2

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.

3

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

4

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
5

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
6

It is probably a good question again after yesterday’s Next.js 13 release. Next.js’s Image component got a big upgrade. Main updates:

  • Ships less client-side JavaScript
  • Easier to style and configure
  • More accessible requiring alt tags by default
  • Aligns with the Web platform
  • Faster because native lazy loading doesn’t require hydration

I am also wondering which would be better/more performant to use… I love DatoCMS’s Rect Image component for the look and feel and simplicity. The only thing that bugs me is that the GraphQL image calls on pages where there are more images will quickly result in this warning:

Warning: data for page “/[…slug]” is 314 kB which exceeds the threshold of 128 kB, this amount of data can reduce performance.

… this is mainly due to the responsiveImages queries which can get quite big if you have more than a few images.

I am still no 100% understanding how Next.js image component work and how to properly and best integrate it into DatoCMS workflow. It would be really nice to see some examples, or comparison, or an article on this topic.

1 Like
7

Hey @primoz.rome, based on your feedback we just released v4 of react-datocms, which should help you significantly reduce the GraphQL response size:

Basically, with v4 your responsiveImage queries can be reduced down to:

responsiveImage(imgixParams: { auto: format }) {
  src width height alt base64
}

Regarding the next/image vs react-datocms/image debate, they’re pretty much identical from any point of view :slight_smile:

The only important difference is that with next/image the bandwidth used to serve images will be counted towards your Vercel limits, and with react-datocms towards your DatoCMS project. Depending on your plans with Vercel and us, one option could be cheaper than the other!

2 Likes
8

Excellet @s.verna :ok_hand:. I will give it a try immediately!

1 Like
9

In general it reduced GraphQL response sizes for about 25% which is great :ok_hand:.

The other big portion of the GraphQL response size is still take by base64 property. If I remove this one it takes another 25% off the response size. But I guess, if we want to have smooth blurred images, this needs to stay…

I appreciate your effort on optimising this.

Kind regards,
Primoz

1 Like
10

I love the react-datocms Image and its simplicity of it. However, when it comes to Server Components I seam to be having some trouble getting them to function.