Links

Pre and Post Transformations

Modify media files before upload. Eagerly generate transformations after upload.
Using ImageKit.io, you can specify pre & post transformations on image or video files during upload.
Pre-transformation lets you modify image or video files before they're uploaded.
Post-transformations help you eagerly generate transformations after an image or video file has been uploaded to ensure fast delivery to your users.
To know more about transformations, see:
For complete API reference, refer to Upload API docs.

Pre Transformation

A pre-transformation is applied before the file is uploaded to ImageKit's Media Library. You can only request a single pre-transformation on an asset.
Some things you can use a pre-transformation for:
  • Features like PNG compression to upload smaller files & save on storage costs.
  • Change the height or width of an image or video file
  • Add some text or logo to an image (using Overlays on Image) or a video (using Overlays on Video).
    • You can also use this feature to add watermarking.
  • Trim a video to a max duration.
  • Crop a profile image uploaded by a user.

Post Transformation

A post-transformation is applied after a file has been successfully in the media library. You can request multiple post-transformations on an asset. These transformations are created in addition to the original asset.
Note: ImageKit generates transformations when they're accessed for the first time by default. You can use post-transformations to generate these automatically after file upload so that the transformation is ready & available for fast delivery.
Some things you can use post-transformations for:
Supported types of post transformation:

How to Use Pre and Post Transformations?

During an Upload API call, specify a pre or post transformation under the transformation request parameter.
The transformation parameter for the Upload API is an object with the following properties:
Field Name
Type
Required
Description
pre
string
-
Request parameter for Pre Transformation
post
array of objects
-
Request parameter for Post Transformation
post.type
string
Yes
Type of required post-transformation. Allowed Values: abs, thumbnail, transformation, gif-to-video
post.value
string
If post.type is transformation
Value of required post-transformation.
post.protocol
string
If post.type is abs
ABS Streaming Protocol. Allowed Values: hls, dash See Adaptive bitrate streaming for more details.
Note: A single pre-transformation is allowed per file but you can always combine multiple transformations (separated by commas) in the pre-transformation string. For an example, if you want to modify a video to have height as 300px, width as 400px & have a 5px red border before it's uploaded, you can specify h-300,w-400,b-5_red in the pre request parameter.
Example of a request with a pre transformation:
// Request Body (multipart/form-data) for Upload API
{
/*
...rest of the Upload API request parameters
*/
"transformation": {
"pre": "rt-90"
}
}
Example of a request with multiple post transformations:
// Request Body (multipart/form-data) for Upload API
{
/*
...rest of the Upload API request parameters
*/
"transformation": {
"post": [
{
"type": "abs",
"value: "sr-240_360_480_720_1080",
"protocol": "dash"
},
{
"type": "transformation",
"value": "h-300"
}
]
}
}
You can also use pre & post transformations together in a single request. For an example, we have a request with a pre-transformation to change a video's width to "500px" & then eagerly generate a thumbnail for it using a post-transformation.
// Request Body (multipart/form-data) for Upload API
{
/*
...rest of the Upload API request parameters
*/
"transformation": {
"pre": "w-500",
"post": [
{
"type": "thumbnail"
}
]
}
}
Note: Don't forget to stringify the contents of the post property before making a request.

Asynchronous behaviour

  • Post transformations are always async.
  • Pre transformation is sync for image files but async for video files.

Webhooks

You can use webhooks to receive success and failure notifications for pre & post-transformations after they complete execution. You can integrate these events in your media workflow to ensure that a pre or post transformation happened as requested. See Pre and Post Transformation Events for more details.