Setting up Sanity image pipelines with Remix - do I need @sanity/client?

Great questions! Let me break this down for you:

Do you need to install @sanity/client?

No, you don't need @sanity/client to use @sanity/image-url. The image URL builder can work in two ways:

1. With a configured client (recommended): Pass a configured @sanity/client instance to createImageUrlBuilder(). This is convenient because the builder inherits your projectId and dataset from the client.

2. Without a client: You can configure the builder directly by passing just your projectId and dataset:

import { createImageUrlBuilder } from '@sanity/image-url'

const builder = createImageUrlBuilder({
  projectId: 'your-project-id',
  dataset: 'production',
})

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

So if you already have @sanity/client installed (which you likely do from setting up Sanity), you can use it. But if you only need image URL generation and nothing else, you can skip the client and just pass the config directly.

Step-by-step setup for using images in Remix:

1. Install the package:

npm install @sanity/image-url

1. Create a helper file (e.g., app/lib/sanity/image.ts):

import { createImageUrlBuilder } from '@sanity/image-url'
import type { SanityImageSource } from '@sanity/image-url'

// Option 1: Without @sanity/client
const builder = createImageUrlBuilder({
  projectId: 'your-project-id',
  dataset: 'production',
})

// Option 2: With @sanity/client (if you have it)
// import { client } from './client'
// const builder = createImageUrlBuilder(client)

export function urlFor(source: SanityImageSource) {
  return builder.image(source)
}

1. Use it in your Remix components:

import { urlFor } from '~/lib/sanity/image'

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

Key points:

• Always pass the full image object (not just image.asset) to urlFor() so it respects crop and hotspot settings
• The builder automatically handles Sanity's image transformations and CDN URLs
• You can chain methods like .width(), .height(), .format(), etc.

For more details, check out the official Presenting Images guide and the @sanity/image-url library documentation.