Get image ratio without GROQ query using @sanity/image-url helper

Good news! You don't need to query for dimensions in GROQ every time. The image asset _id actually contains the dimensions encoded in its format, and @sanity/image-url already parses this information internally.

The asset _id follows this pattern:

image-<sha1hash>-<width>x<height>.<extension>

So you can extract the dimensions directly from the asset reference without expanding it in your GROQ query. Here's how:

// Your GROQ query can just be:
const query = `*[_type == "solutions-singleton"] {
  ...,
}`

// Then in your code:
function getImageDimensions(imageAsset) {
  // imageAsset._ref will be something like:
  // "image-abc123-1920x1080-jpg"
  const dimensions = imageAsset._ref.split('-')[2];
  const [width, height] = dimensions.split('x').map(Number);
  const aspectRatio = width / height;
  
  return { width, height, aspectRatio };
}

Even better, if you're already using @sanity/image-url, it parses these dimensions internally through its parseAssetId function. While it doesn't expose a direct method to retrieve the ratio, you could:

1. Extract it yourself from the asset reference as shown above
2. Open a feature request (or PR) on the @sanity/image-url GitHub repo to expose dimension information - the maintainers suggested this would be a welcome addition

This approach is much more scalable than projecting metadata in GROQ since:

• You don't need to customize your query for each image field
• Your TypeScript types remain consistent with your generated schema
• No additional data fetching required
• Works with any number of images on a page

The dimensions are already there in the asset ID - you just need to parse them!