Handling Images in Sanity: The Complete Guide

Images are where a lot of Sanity sites quietly go wrong, oversized files, layout shift, blurry thumbnails. Sanity’s asset pipeline is genuinely good, but only if you use it deliberately. Here’s how it works and how to get it right.

How Sanity stores images

When you upload an image, Sanity stores it as an asset and gives you a reference to it, along with metadata baked into the asset ID, including the original dimensions. That last detail matters: because the width and height travel with the reference, your front end can set correct dimensions without a round trip, which is how you avoid layout shift.

The image URL builder

You don’t serve the original file. Sanity’s image pipeline generates resized, reformatted, cropped versions on demand from a URL. Ask for the width you’ll actually display, let it serve a modern format, and you get a small, fast image instead of a multi-megabyte original scaled down in the browser.

Hotspots and crops

Sanity lets editors set a hotspot, the part of an image that must stay in frame, so automated crops for different aspect ratios don’t cut off someone’s head. Respecting the hotspot in your rendering is what makes responsive crops look intentional rather than random.

Putting it together on the front end

On a Next.js site, combine the URL builder with next/image, feed it the real dimensions from the asset reference, and request an appropriate width. That gets you correctly-sized, lazy-loaded, layout-stable images almost for free, the difference between a fast site and a sluggish one.

The bottom line

Sanity’s image handling rewards a little care: serve derived sizes, pass real dimensions, respect hotspots. Do that and images stop being the thing that slows your site down. For where the front end runs, see /sanity.