Transformations

Transforming URL Structure

The maximum accepted image size is 100.000.000 pixels. An image with this many pixels could have width and height combinations like 10.000 x 10.000 or 5.000 x 20.000, etc. The maximum file size of an image can not be larger than 256mb.

An essential feature of GraphCMS is the image processing engine. It enables you on the fly image transformations, such as resizing or cropping just by adding parameters to your assets URL.

https://media.graphcms.com/[(1) Transformation Tasks]/[(2) File Handle]
  1. One or multiple transformation tasks and their parameters
  2. The source images handle to run the transformation tasks on.

Using the API

You also have the possibility to use the Content API of your project directly to fetch transformed asset URLs.

The url field of an asset takes a transformation argument:

{
  assets {
    url(
      transformation: {
        image: { resize: { width: 200, height: 200, fit: crop } }
      }
    )
  }
}

Instead of image you can also use document for file type conversions:

{
  assets {
    url(transformation: { document: { output: { format: jpg } } })
  }
}

Both of these transform options are also combinable:

{
  assets {
    url(
      transformation: {
        image: { resize: { width: 200 } }
        document: { output: { format: jpg } }
      }
    )
  }
}

Resize Transformation

resize=height:200

The resizing feature comprises two main functions: manipulating the width and height of an image, and changing the fit and alignment of the image. Either width or height is required.

Resize Task URL Format:
https://media.graphcms.com/resize=[options]/[File Handle]

Parameters

ParamValue
width (w)integer (1-10000)
height (h)integer (1-10000)
fit (f)one of:
clip, crop, scale, max
align (a)one of:
top, bottom, left, right, faces, center

Example

https://media.graphcms.com/resize=width:300/IvwxgEnhSOWuQsVxvvnc

TransformedImage

File Type Conversions

output=format:FILE_TYPE

See our File Conversion Matrix for info on all supported conversions.

Parameters

ParamValue
format (f)one of:
doc, docx, html, jpg, odp, ods, odt, pjpg, pdf, png, ppt, pptx, svg, txt, webp, xls, xlsx

Example

https://media.graphcms.com/output=format:jpg/IvwxgEnhSOWuQsVxvvnc

Converted Image