Unlock seamless workflows and faster delivery with our latest releases - Join the deep dive

Setting image size in GROQ query for Sanity.io

3 replies
Last updated: May 24, 2023
Hey friends- Is there a way to set the image size in a GROQ query? Looked all over the dos and only see image sizing with the URL builder after the asset is fetched. I have a thumbnail component and would love to only grab a small version. Thanks in advance for any help!
May 24, 2023, 1:30 PM
You fetch the reference and not the asset, then you can build the url with the wanted size and load the asset
May 24, 2023, 1:41 PM
You're only really fetching the image information from groq not a specific size, the url parameters on the image src specify what size image is fetched from Sanity's cdn. (eg.
?w=100
for 100px wide image)
Granted if you wanted to use a url directly from your query result you could do something like this (would need to change based on your schema), I probably wouldn't do this though:


*[_id == "abc123"] {
  "src": image.asset->url + "?w=100"
}
May 24, 2023, 1:41 PM
Thank you both for the quick response! I will transform with my url builder- didn't realize that was achieving what I wanted, thought it was just doing a CSS resize
May 24, 2023, 2:27 PM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Was this answer helpful?