Overview

The starter’s media path optimises performance by combining:

Primary touchpoints in the enterprise starter:

Asset strategy

defineImageField(...) enables:

This gives frontend components enough metadata to crop and render correctly without ad-hoc per-component rules.

IMAGE_GROQ_PARTIAL standardises image fields across queries:

A stable payload shape keeps rendering components simple and reusable.

BaseImage routes Sanity-backed images through <SanityImage /> and falls back to native <img> for plain URLs.

SanityImage then:

This consolidates optimisation logic in one place instead of duplicating it across blocks.

urlFor(...) and urlForImage(...) build transformed Sanity CDN URLs with settings such as:

The result is smaller payloads with predictable dimensions for metadata surfaces.

Performance-sensitive components pass explicit sizes values based on layout intent, for example:

These choices ensure browsers fetch the right asset size for each viewport rather than downloading oversized images.

Always include image partial fields in GROQ when adding a new visual block.
Always pass a sizes prop when using SanityImage or BaseImage.
Keep fit decisions (cover vs contain) in content model or block config, not hardcoded in multiple components.
Use URL helper utilities for SEO images instead of constructing strings manually.
Treat preview/LQIP as progressive enhancement, not a substitute for correct responsive sizing.

Lower image transfer sizes and faster paint times.
Consistent rendering rules across modular blocks and Portable Text.
Better accessibility via centralised alt text support.
Fewer media regressions because query, schema, and render layers share one contract.