🔮 Sanity Create is here. Writing is reinvented. Try now, no developer setup

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

36 replies
Last updated: Feb 23, 2021
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?
You can now import or require your images directly in your react components:
export default () => (
    <img src={require('./images/my-image.jpg')} />
    <img src={require('./images/my-small-image.png')} />
    <img src={require('./images/my-icon.svg')} />
Feb 22, 2021, 5:57 AM
I think next-optimised-images only loads local images, yes! next/image might suit for your use-case?
Feb 22, 2021, 7:21 AM
If you want a drop in solution you might want to check https://github.com/bundlesandbatches/next-sanity-image
Feb 22, 2021, 8:12 AM
user S
That was my understanding. Next/image only works with select image optimiser platforms which I'm not intending on using
Feb 22, 2021, 8:15 AM
user L
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.
Feb 22, 2021, 8:20 AM
What was wrong?
Feb 22, 2021, 8:20 AM
To be honest, I can't remember.
Feb 22, 2021, 8:45 AM
Thought i’d ask incase we had the same issues, but thanks anyway.
Feb 22, 2021, 8:45 AM
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.
Feb 22, 2021, 8:48 AM
ok. I think you were getting caught by the next/image layout wrappers.
Feb 22, 2021, 8:49 AM
it adds a number of wrappers to deal with responsiveness as default
Feb 22, 2021, 8:49 AM
Whereas you might want to build the srcset for the image tag yourself.
Feb 22, 2021, 8:50 AM
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.
Feb 22, 2021, 8:50 AM
Nice grid.
Feb 22, 2021, 8:51 AM
Next/image does but the issue with next wasn't the wrappers the dependancy on vercel and image processing platforms was the blocker.
Feb 22, 2021, 8:51 AM
nextimage can be passed a builder and whitelist on asset domains https://nextjs.org/docs/api-reference/next/image#loader
Feb 22, 2021, 8:54 AM
That’s what it preconfigures under the hood for the default platforms.
Feb 22, 2021, 8:54 AM
Feb 22, 2021, 8:54 AM
I'll take a look. I had researched things quite a bit but perhaps I overlooked this.
Feb 22, 2021, 8:55 AM
Sometimes it’s nice to roll your own, so you bypass the magic too.
Feb 22, 2021, 8:55 AM
Yeah, I'm happy with the component I've made and Sanity's urlBuilder but I'm after lazy loading too.
Feb 22, 2021, 8:57 AM
I thought nextjs did a simple
Feb 22, 2021, 8:58 AM
Proper lazy loading relies on something like intersection observer
Feb 22, 2021, 8:58 AM
and also for safari support
Feb 22, 2021, 8:59 AM
Next/image does, hence I'll take a look at you loading reference.
Feb 22, 2021, 8:59 AM
I'm using react-intersection-observer for scrolling animations so perhaps I can leverage that but I haven't looked into it.
Feb 22, 2021, 9:00 AM
Yeah we’ve done that before with vanilla-lazyload https://github.com/verlok/vanilla-lazyload#usage-with-react
Feb 22, 2021, 9:01 AM
user L
I'll dive into both your references
Feb 22, 2021, 9:02 AM
What issue are you having?
Feb 22, 2021, 9:02 AM
Feb 22, 2021, 9:03 AM
Thanks for the pointer.
Feb 22, 2021, 9:03 AM
We didn’t really have an issue as such, was just around image sizing when we were setting things up.
Feb 22, 2021, 9:04 AM
and the default image size being too large.
Feb 22, 2021, 9:05 AM
Ah k.
Feb 22, 2021, 9:06 AM
Well thanks agian
Feb 22, 2021, 9:07 AM
Feb 22, 2021, 9:07 AM
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
Feb 23, 2021, 1:06 AM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Was this answer helpful?