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

You're correct that next-optimized-images primarily works with images from the filesystem through webpack imports. However, for working with Sanity's CDN, you don't actually need next-optimized-images at all - Sanity provides its own powerful image optimization solution that's better suited for remote images.

Sanity's Image Pipeline is an on-demand image transformation service that handles all the optimization you'd want from next-optimized-images (and more) directly through URL parameters. When you upload images to Sanity's Content Lake, they're automatically available through the global CDN at cdn.sanity.io with support for:

• Automatic format conversion (WebP, AVIF) with auto=format
• Dynamic resizing and cropping
• Quality optimization
• Hotspot/focal point preservation
• Global CDN caching

For Next.js specifically, the recommended approach is to use Sanity's image URLs with Next.js's built-in <Image> component. You can use the @sanity/image-url helper library to build optimized URLs programmatically:

import imageUrlBuilder from '@sanity/image-url'
import Image from 'next/image'

const builder = imageUrlBuilder(client)

function urlFor(source) {
  return builder.image(source)
}

export default function MyComponent({ image }) {
  return (
    <Image
      src={urlFor(image).width(800).url()}
      alt={image.alt}
      width={800}
      height={600}
    />
  )
}

There's also a community package called next-sanity-image that provides even tighter integration between Sanity's Image Pipeline and Next.js's Image component, handling the props mapping automatically.

So to directly answer your question: yes, next-optimized-images is designed for filesystem imports, but you don't need it for Sanity images - Sanity's CDN already provides all the optimization features you need for remote images.