Sanity Integration with ImageKit.io

Sanity is a platform for structured content that powers remarkable digital experiences at scale. The ImageKit plugin for Sanity enables you to browse, manage, and deliver optimized media directly from your Sanity Studio, leveraging ImageKit's complete media storage, optimization, and transformation solution along with an image and video CDN.

This guide walks you through installing and configuring the ImageKit plugin in your Sanity Studio to enhance your workflows with powerful media management capabilities. You can view the source code on GitHub.

• Media Library Integration: Browse and manage your ImageKit media library directly in Sanity Studio without leaving your content editor.
• Asset Source Integration: Integrates seamlessly with Sanity's image fields for a native editing experience.
• Custom Schema Support: Provides imagekit.asset schema type for storing comprehensive asset metadata.
• Rich Asset Data: Access complete asset metadata including dimensions, file size, custom metadata, and more.
• Video Support: Browse and select both images and video content from your ImageKit media library.
• Asset Preview: View thumbnails and detailed asset information before selection.
• No Configuration Required: Works out of the box without additional configuration.

To install the ImageKit plugin in your Sanity Studio instance, run one of the following commands from your project's root directory:

Using npm:

npm install sanity-plugin-imagekit

Using yarn:

yarn add sanity-plugin-imagekit

Using pnpm:

pnpm install sanity-plugin-imagekit

The package exports two plugins that serve different use cases:

• imagekitAssetSourcePlugin - Use this when you want ImageKit to appear as an asset source for standard image fields in your Sanity Studio.
• imagekitSchemaPlugin - Use this if you intend to define a custom schema type that stores comprehensive asset metadata from ImageKit, allowing you to access detailed information about each asset in your content.

To use ImageKit as an asset source, import the plugin in your sanity.config.ts file:

// sanity.config.ts
import { defineConfig } from 'sanity'
import { imagekitAssetSourcePlugin } from 'sanity-plugin-imagekit'

export default defineConfig({
  projectId: 'your-project-id',
  dataset: 'production',
  // ... other configuration
  plugins: [
    imagekitAssetSourcePlugin(),
  ],
})

Once configured, ImageKit will automatically appear as an asset source option in the dropdown when you add or select images in your Sanity Studio. For most use cases, you can simply use the standard Sanity image field:

{
  type: "image",
  name: "heroImage",
  title: "Hero Image",
  // ImageKit will appear as an option in the asset source dropdown
}

For more control, you can use the custom imagekit.asset schema type.

To do this, first import the imagekitSchemaPlugin in your sanity.config.ts:

import { imagekitSchemaPlugin } from 'sanity-plugin-imagekit'

// Add to plugins array
export default defineConfig({
  // ... other configuration
  plugins: [
    imagekitSchemaPlugin(),
  ],
})

Then use it in your schema definitions:

{
  type: "imagekit.asset",
  name: "imagekitImage",
  title: "ImageKit Image",
  description: "Select an image from your ImageKit media library"
}

This custom type stores comprehensive asset metadata from ImageKit, allowing you to access detailed information about each asset in your content.

When you select an asset from ImageKit, it's stored with comprehensive metadata. Here's what the asset object looks like:

{
  "_type": "imagekit.asset",
  "fileId": "unique_file_id",
  "name": "image_name.jpg",
  "url": "https://ik.imagekit.io/your_account/image.jpg",
  "width": 1920,
  "height": 1080,
  "fileType": "image",
  "size": 245760,
  "createdAt": "2024-01-01T00:00:00Z",
  "mime": "image/jpeg",
  // ... other fields
}

The stored url field provides a direct link to your asset on the ImageKit CDN. You can use this URL directly in your frontend or even apply ImageKit's real-time transformations:

// Direct URL
const directUrl = asset.url;

// With transformation (example: resize to 300px width)
const transformedUrl = `${asset.url}?tr=w-300`;

When querying your Sanity documents, the asset data is readily available:

// Example GROQ query
const query = `*[_type == "article"][0] {
  heroImage {
    url,
    width,
    height
  }
}`;

// Result
{
  "heroImage": {
    "url": "https://ik.imagekit.io/your_account/image.jpg",
    "width": 1920,
    "height": 1080
  }
}

ImageKit's custom metadata feature allows you to store additional information with your assets. This data is accessible through the plugin:

{
  "customMetadata": {
    "alt": "Hero image for homepage",
    "photographer": "John Doe",
    "license": "CC0"
  }
}

All custom metadata fields are automatically included in the asset object and can be queried alongside standard asset properties.

ImageKit provides 50+ image and video transformations that can be applied in real-time via URL parameters on the asset url. Some common transformations include:

// Resize and crop
const resizedUrl = `${asset.url}?tr=w-400,h-300,cm-pad_resize`;

// Format conversion and quality
const optimizedUrl = `${asset.url}?tr=f-webp,q-80`;

// Multiple transformations
const transformedUrl = `${asset.url}?tr=w-400,h-300,c-maintain_ratio:e-grayscale`;

Learn more about available transformations here.

You can use both plugins in the same Sanity Studio project. This allows you to use ImageKit as an asset source for standard image fields while also having access to the custom schema type for fields that require comprehensive metadata:

// sanity.config.ts
import { defineConfig } from 'sanity'
import { imagekitAssetSourcePlugin, imagekitSchemaPlugin } from 'sanity-plugin-imagekit'

export default defineConfig({
  projectId: 'your-project-id',
  dataset: 'production',
  plugins: [
    imagekitAssetSourcePlugin(),
    imagekitSchemaPlugin(),
  ],
})

This gives you the flexibility to choose the appropriate approach for each field in your content model.