Image

Represents an image resource.

Show definition 
# Represents an image resource.
type Image {
  # A word or phrase to share the nature or contents of an image.
  altText: String

  # A unique identifier for the image.
  id: ID

  # The location of the original (untransformed) image as a URL.
  originalSrc: URL!

  # The location of the image as a URL.
  src: URL!

  # The location of the transformed image as a URL.
  #
  # All transformation arguments are considered "best-effort". If they can be applied to an image, they will be.
  # Otherwise any transformations which an image type does not support will be ignored.
  transformedSrc(
    # Image width in pixels between 1 and 5760.
    maxWidth: Int

    # Image height in pixels between 1 and 5760.
    maxHeight: Int

    # Crops the image according to the specified region.
    crop: CropRegion

    # Image size multiplier for high-resolution retina displays. Must be between 1 and 3.
    scale: Int = 1

    # Best effort conversion of image into content type (SVG -> PNG, Anything -> JGP, Anything -> WEBP are supported).
    preferredContentType: ImageContentType
  ): URL!
}

Fields

altText   (String)

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

id   (ID)

A unique identifier for the image.

originalSrc   (URL!)

The location of the original (untransformed) image as a URL.

src   (URL!) deprecated

The location of the image as a URL.

Previously an image had a single src field. This could either return the original image location or a URL that contained transformations such as sizing or scale.

These transformations were specified by arguments on the parent field.

Now an image has two distinct URL fields: originalSrc and transformedSrc.

  • originalSrc - the original, untransformed image URL
  • transformedSrc - the image URL with transformations included

To migrate to the new fields, image transformations should be moved from the parent field to transformedSrc.

Before:

{
  shop {
    productImages(maxWidth: 200, scale: 2) {
      edges {
        node {
          src
        }
      }
    }
  }
}

After:

{
  shop {
    productImages {
      edges {
        node {
          transformedSrc(maxWidth: 200, scale: 2)
        }
      }
    }
  }
}

transformedSrc   (URL!)

The location of the transformed image as a URL.

All transformation arguments are considered "best-effort". If they can be applied to an image, they will be. Otherwise any transformations which an image type does not support will be ignored.

Argument Type Default Description
crop CropRegion

Crops the image according to the specified region.
maxHeight Int

Image height in pixels between 1 and 5760.
maxWidth Int

Image width in pixels between 1 and 5760.
preferredContentType ImageContentType

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

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

This page was printed on 26 Apr 2018. For the latest version, please go to https://help.shopify.com/api/storefront-api/reference/object/image/