How to set image size in GROQ query for thumbnails?

You're absolutely right that GROQ itself doesn't have built-in image resizing – GROQ is purely for querying data. However, you can construct the sized image URL directly within your GROQ query by concatenating URL parameters to the asset URL! This way your thumbnail component receives a ready-to-use sized URL.

Here's how:

*[_type == "post"] {
  title,
  "thumbnailUrl": image.asset->url + "?w=150&h=150&fit=crop&auto=format"
}

This returns a complete URL like https://cdn.sanity.io/images/.../image.jpg?w=150&h=150&fit=crop&auto=format that Sanity's CDN will automatically transform when requested.

Common URL parameters for thumbnails:

• w=150 - set width in pixels
• h=150 - set height in pixels
• fit=crop - cropping mode (also clip, fill, min, max)
• auto=format - automatically serve WebP/AVIF when browser supports it
• q=80 - quality (0-100, default is 75)

You can also build more complex URLs:

"smallThumb": image.asset->url + "?w=100&h=100&fit=crop&auto=format&q=80",
"mediumThumb": image.asset->url + "?w=300&h=300&fit=crop&auto=format"

Important caveat: While this gives you convenient sized URLs, the actual image transformation happens on Sanity's CDN when the URL is requested, not during the GROQ query execution. So you're still fetching the full asset reference from the API – the bandwidth savings happen at the image delivery level, not the query level.

Alternative approach: If you're working in JavaScript/TypeScript, the @sanity/image-url package provides a cleaner builder API:

import imageUrlBuilder from '@sanity/image-url'

const builder = imageUrlBuilder(client)
const thumbnailUrl = builder.image(image).width(150).height(150).fit('crop').auto('format').url()

Both work great! String concatenation in GROQ is perfect when you want the URL ready to go in your query response, while the builder gives you more flexibility for dynamic sizing logic in your components.