Sanity Image Pipeline

Sanity Image Pipeline

Images that are accessible, performant, and never blank the layout.

Ask first

• Next.js next/image in use?
• Existing urlFor helper?
• Fallback local paths (/images/placeholders/…)?

Schema rules

defineField({
  name: "mainImage",
  type: "image",
  options: { hotspot: true },
  fields: [
    defineField({
      name: "alt",
      type: "string",
      title: "Alt text",
      validation: (rule) => rule.required(),
    }),
  ],
})

Human titles in editorial language via sanity-editor-ux.

App rules

1. urlFor from @sanity/image-url with projectId/dataset
2. Prefer width/height or fill + aspect ratio
3. Pass lqip from asset->metadata.lqip as blurDataURL when available
4. If CMS image missing → local placeholder, don’t crash
5. Alt: CMS alt → else meaningful fallback → never empty decorative guess without reason

GROQ snippet

mainImage{
  asset->{ _id, url, metadata { lqip, dimensions } },
  alt,
  hotspot,
  crop
}

Anti-patterns

• Rendering raw Sanity CDN URLs at full resolution everywhere
• Optional alt with no validation on content images
• No fallback → broken `` on partial bootstrap

Deliverable

Schema field pattern · urlFor helper · React image component behavior · placeholder strategy.

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: AIEngKenn
• Source: AIEngKenn/agent-skills
• License: MIT

Install and usage instructions live in the source repository linked above.