🗓️ Everything *[NYC] is back. A free gathering for AI builders. Sept 9 →

Last updated August 04, 2026

Prepare square social images from Sanity assets (without wrecking the crop)

Prepare square social images from Sanity assets (without wrecking the crop)

Sanity’s image hotspot helps on your own site, but Instagram, WhatsApp, and many share cards still expect a square file. This guide walks through keeping the master asset in Sanity, choosing crop vs pad for each channel, and exporting a clean 1:1 image so social apps don’t cut off faces or edges.

If you store photos in Sanity, you’ve probably already set hotspot/crop so the Studio preview looks right. That helps on your site — but Instagram DPs, WhatsApp avatars, and many share cards still want a square file. Upload a tall portrait as-is and the network will crop again.

Keep the canonical asset in Sanity
Leave the original in the dataset. Use @sanity/image-url (or your existing image pipeline) for on-site images. Don’t overwrite the master every time a social channel wants a different ratio.

Crop vs pad

  • Crop when the subject should fill the square and edges don’t matter.
  • Pad / blur-fill when the whole frame matters (groups, screenshots, text near the edges).

Sanity’s hotspot is great for where to crop. It doesn’t invent pixels when you need the full image inside 1:1 — that’s when padding is better.

Export a dedicated square
Center faces before export; circle masks cut tighter than a square preview. 1080Ă—1080 is a safe default for feed tiles.

When you need that square quickly — especially “keep everything visible” — a free browser tool for making images square works: pull a high-res derivative from Sanity, square it, then upload to the social app. Keep the Sanity asset as source of truth.

Optional later
If you do this often, generate square derivatives in a pipeline and store them in a separate field. For occasional posts, a manual export is fine.

Sanity owns the master + hotspot; social networks get a purpose-built square.

Sanity – The Content Operating System that ends your CMS nightmares

Sanity replaces rigid content systems with a developer-first operating system. Define schemas in TypeScript, customize the editor with React, and deliver content anywhere with GROQ. Your team ships in minutes while you focus on building features, not maintaining infrastructure.

Sanity scales from weekend projects to enterprise needs and is used by companies like Puma, AT&T, Burger King, Tata, and Figma.

Was this guide helpful?

Related contributions