Discussion on using next-optimized-images with Sanity's CDN and potential issues with next/image and lazy loading.

Hi chat. I'm reading through next-optimized-images with the intention of paring it with Sanity's CDN. My understanding is that next-optimized-images only loads images from the filesystem. Is this correct or am I missing something and I can load remote images?

I think next-optimised-images only loads local images, yes! next/image might suit for your use-case?

If you want a drop in solution you might want to check https://github.com/bundlesandbatches/next-sanity-image

That was my understanding. Next/image only works with select image optimiser platforms which I'm not intending on using

Thanks Raffi, I tested next-sanity-image last week but found it didn't suffice and unfortunately didn't commit a git log as to why.

What was wrong?

To be honest, I can't remember.

Thought i’d ask incase we had the same issues, but thanks anyway.

I think it was related to the layout I was trying to achieve. Using tailwind and an image grid I needed the images to present full width by 'x' height. The plugin/module wraps the image in a div and I think I couldn't get the image to reliably to respond, resize and crop the height correctly when two images were placed side by side with different heights in a css grid.

ok. I think you were getting caught by the next/image layout wrappers.

it adds a number of wrappers to deal with responsiveness as default

Whereas you might want to build the srcset for the image tag yourself.

This is the layout solution which has been achieved simply by using sanity's imageUrlBuilder. All of these images vary in height but I'm able to crop them using my own component with srcset.

Nice grid.

Next/image does but the issue with next wasn't the wrappers the dependancy on vercel and image processing platforms was the blocker.

nextimage can be passed a builder and whitelist on asset domains https://nextjs.org/docs/api-reference/next/image#loader

That’s what it preconfigures under the hood for the default platforms.

Hmm,

I'll take a look. I had researched things quite a bit but perhaps I overlooked this.

Sometimes it’s nice to roll your own, so you bypass the magic too.

Yeah, I'm happy with the component I've made and Sanity's urlBuilder but I'm after lazy loading too.

I thought nextjs did a simple

loading="lazy"

attribute

Proper lazy loading relies on something like intersection observer

and also for safari support

Next/image does, hence I'll take a look at you loading reference.

I'm using react-intersection-observer for scrolling animations so perhaps I can leverage that but I haven't looked into it.

Yeah we’ve done that before with vanilla-lazyload https://github.com/verlok/vanilla-lazyload#usage-with-react

Thanks I'll dive into both your references

What issue are you having?

Oh i didn’t realise next/image did intersections https://github.com/vercel/next.js/blob/canary/packages/next/client/image.tsx#L260

Thanks for the pointer.

We didn’t really have an issue as such, was just around image sizing when we were setting things up.

and the default image size being too large.

Ah k.

Well thanks agian

again*

Just for reference if this comes up in a search. I experimented with next/image and was reminded that next/image requires a width and height to be set. This wasn't workable in my use case as image heights vary and need to be unspecified. I ended up using react-intersection-observer to lazy load image which was straight forward https://github.com/thebuilder/react-intersection-observer/blob/HEAD/docs/Recipes.md#lazy-image-load