React Image Component

🆘 Support
1

Hey, I’ve been comparing Dato’s react image component with the Next Image component recently.

I really like the ease of use you get with Dato’s Image component, and the default transition effect is awesome. However, a few things I find it lacking compared with Next’s solution and wondered if I was missing something. For example:

  • the srcset that Dato supplies out of the api seems to only provide 3 pixel widths/breakpoints. Is there a way I can get Dato to provide more? In the Next Image it gives 15 out of the box.

  • the ‘priority’ prop that you can give an image in Next is a pretty cool feature that allows you to make sure certain images in the viewport take priority in loading over all others. Does the Dato image have something similar?

Always like to recommend Dato and I hope there are some decent work arounds out there for these two areas. Cheers,

D

2

Hi @daniel.hutchings!

  • for srcset we generate URLs for the following scalings of the original image: [0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4]. If you see less alternative versions, it’s because to keep GraphQL payloads (-> HTML size) light, we do not send variants with size < 50px (too small, negligible benefits), or if the final transformed image is bigger than the original one (the result would be upscaled anyway)

  • you can pass priority also to our Image component :slight_smile:

3

Ah, so it’s probably because the image I’ve supplied is too small to get those upper scalings. Great to know, thank you!
Also good to know you can pass priority to it too. Many thanks for the swift response. This will definitely keep me using the Dato solution now