Skip to main content
Anchor to Image

Image

object

An image resource with URL, dimensions, and transformation options. Used for product images, collection images, media previews, and other visual content throughout the storefront.

The url field accepts an ImageTransformInput argument for resizing, cropping, scaling for retina displays, and converting between image formats. Use the thumbhash field to display lightweight placeholders while images load.

Anchor to FieldsFields

Anchor to altTextaltText
•String

A word or phrase to share the nature or contents of an image.

Anchor to heightheight
•Int

The original height of the image in pixels. Returns null if the image isn't hosted by Shopify.

Anchor to idid
•ID

A unique ID for the image.

Anchor to thumbhashthumbhash
•String

The ThumbHash of the image.

Useful to display placeholder images while the original image is loading.

See https://evanw.github.io/thumbhash/ for details on how to use it.

Anchor to urlurl
•URL!
non-null

The location of the image as a URL.

If no transform options are specified, then the original image will be preserved including any pre-applied transforms.

All transformation options are considered "best-effort". Any transformation that the original image type doesn't support will be ignored.

If you need multiple variations of the same image, then you can use GraphQL aliases.

Arguments

Anchor to transformtransform
•ImageTransformInput

A set of options to transform the original image.

Anchor to widthwidth
•Int

The original width of the image in pixels. Returns null if the image isn't hosted by Shopify.

Deprecated fields

Anchor to originalSrcoriginalSrc
•URL!
non-nullDeprecated
Anchor to srcsrc
•URL!
non-nullDeprecated
Anchor to transformedSrctransformedSrc
•URL!
non-nullDeprecated

Arguments

Anchor to maxWidthmaxWidth
•Int

Image width in pixels between 1 and 5760.

Anchor to maxHeightmaxHeight
•Int

Image height in pixels between 1 and 5760.

Anchor to cropcrop
•CropRegion

Crops the image according to the specified region.

Anchor to scalescale
•Int
Default:1

Image size multiplier for high-resolution retina displays. Must be between 1 and 3.

Anchor to preferredContentTypepreferredContentType
•ImageContentType

Best effort conversion of image into content type (SVG -> PNG, Anything -> JPG, Anything -> WEBP are supported).

Was this section helpful?