Skip to main content

Get product images with responsive transformations

Fetch product media with on-the-fly image resizing and format conversion for different viewport sizes.

Query​

query GetProductImages($productId: Int!, $language: String) {
  product(productId: $productId) {
    ... on Product {
      media {
        images(search: { sort: ASC, page: 1, offset: 12 }) {
          items {
            alt(language: $language) {
              value
            }
            priority
            imageVariants(
              input: {
                transformations: [
                  {
                    name: "thumbnail"
                    transformation: {
                      width: 100
                      height: 100
                      fit: BOUNDS
                      format: WEBP
                    }
                  }
                  {
                    name: "medium"
                    transformation: {
                      width: 400
                      height: 400
                      fit: BOUNDS
                      format: WEBP
                    }
                  }
                  {
                    name: "large"
                    transformation: {
                      width: 800
                      height: 800
                      fit: BOUNDS
                      format: WEBP
                    }
                  }
                ]
              }
            ) {
              url
              name
            }
          }
          itemsFound
        }
      }
    }
  }
}

Variables​

{
  "productId": 123,
  "language": "EN"
}

Response​

{
  "data": {
    "product": {
      "media": {
        "images": {
          "items": [
            {
              "alt": [{ "value": "Product front view" }],
              "priority": 1,
              "imageVariants": [
                { "url": "https://media.example.com/images/product-front.png?fit=bounds&format=webp&width=100&height=100", "name": "thumbnail" },
                { "url": "https://media.example.com/images/product-front.png?fit=bounds&format=webp&width=400&height=400", "name": "medium" },
                { "url": "https://media.example.com/images/product-front.png?fit=bounds&format=webp&width=800&height=800", "name": "large" }
              ]
            },
            {
              "alt": [{ "value": "Product side view" }],
              "priority": 2,
              "imageVariants": [
                { "url": "https://media.example.com/images/product-side.jpg?fit=bounds&format=webp&width=100&height=100", "name": "thumbnail" },
                { "url": "https://media.example.com/images/product-side.jpg?fit=bounds&format=webp&width=400&height=400", "name": "medium" },
                { "url": "https://media.example.com/images/product-side.jpg?fit=bounds&format=webp&width=800&height=800", "name": "large" }
              ]
            }
          ],
          "itemsFound": 2
        }
      }
    }
  }
}

How it works​

Each image has multiple variants identified by the name you defined in the query. Use thumbnail for listings and large for detail pages. The fit mode controls resizing: BOUNDS fits within the dimensions, COVER fills and crops to fill them and CROP crops centrally to match them exactly. Common output formats are AUTO, WEBP, AVIF, JPG and PNG. For the full list and the other transformation options, see Media and assets. Images are sorted by priority (lower = first).

See also​