How to query original image dimensions and format in GROQ without transformations?

8 replies
Last updated: Jan 24, 2024
Is there a way for GROQ to query/project attributes that indicate the current/original size of the image? In other words, I don't want to dictate a transformation...I just want to be told what the original dimensions are as part of my query results. Likewise, can GROQ project/offer an attribute that indicates the original image format?
AI Update

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.hasAlpha
  • metadata.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 thread
8 replies
If you query:
*[_type == "sanity.imageAsset"]
you can see the entirety of the item properties. In this case I think you are looking for something similar to:

*[_type == "sanity.imageAsset"]{

extension,

metadata{

dimensions {

width,

height

}

}

}

Result:


{"extension":"jpg","metadata":{"dimensions":{"width":1014,"height":757}}},
OMG. With the clue you gave me, I am now getting what I want with this query:
	*[_type == "carousel"] 
    {
      ...,
      "imageUrl": pic.asset->url,
      'height': pic.asset->metadata.dimensions.height,
      'width': pic.asset->metadata.dimensions.width,
      'format': pic.asset->extension
    }
I really enjoy GROQ. I rarely can’t get what I need out of it.
BTW, I would LOVE to have basic metadata (height, width, format) always visible next to each image within Sanity Studio (within the "structure" plugin...during editing/viewing). Is that possible?The impression I have is I can only get that UI-based information if I install the "media browser" plugin (viz. sanity-plugin-media).
Do you use the media plugin?
I do not currently have the media plugin installed. I was going to install it later today or tomorrow...precisely because I have the impression there is no other way to have basic image metadata shown in the UI.
I use it 100% of the time.
If you wanted to create a custom component for images you could display that info. Within the studio.

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.

Was this answer helpful?