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, CONTAIN fits with padding. Supported output formats are WEBP, JPEG, and PNG. Images are sorted by priority (lower = first).

See also​