How to query original image dimensions and format in GROQ without transformations?
Yes! GROQ can absolutely query and project image asset metadata, including the original dimensions and format. When you reference an image asset in GROQ, you can access all the metadata stored on the sanity.imageAsset document.
Accessing Image Dimensions
The image asset document includes a metadata.dimensions object with width, height, and aspectRatio. Here's how to query it:
*[_type == "post"] {
title,
"imageData": mainImage.asset-> {
metadata {
dimensions {
width,
height,
aspectRatio
}
}
}
}Accessing Image Format
The original image format is stored in two fields on the asset document:
extension- The file extension (e.g., "jpg", "png", "svg")mimeType- The MIME type (e.g., "image/jpeg", "image/png", "image/svg+xml")
*[_type == "post"] {
title,
"imageInfo": mainImage.asset-> {
extension,
mimeType,
originalFilename,
metadata {
dimensions {
width,
height
}
}
}
}Complete Example
Here's a comprehensive query that gets all the original image information:
*[_type == "post"] {
title,
mainImage {
asset-> {
_id,
url,
extension,
mimeType,
originalFilename,
size,
metadata {
dimensions {
width,
height,
aspectRatio
},
hasAlpha,
isOpaque
}
}
}
}Always-Available Metadata
According to the image metadata documentation, these fields are always included and cannot be disabled:
metadata.dimensions(width, height, aspectRatio)metadata.hasAlphametadata.isOpaque
The extension and mimeType fields are also always available on the asset document itself, as shown in the image type documentation.
Alternative: Decoding from Asset ID
If you only have the asset reference ID (which follows the pattern image-{assetId}-{width}x{height}-{format}), you can also extract dimensions and format using pattern matching, though querying the asset document directly is more reliable and gives you the complete metadata.
Show original thread8 replies
Sanity – Build the way you think, not the way your CMS thinks
Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.