Chained Image Transformations with ImageKit

ImageKit Try it →Watch full video →Jan Marshal · Sep 2025

Demo summary

The creator demonstrates chaining multiple transformations including width, height, focus, crop, rotation, blur, and grayscale using the transformation prop.

Step-by-step

Open an array within the transformation property of the image component
Create an object inside the array to define transformation parameters
Set the width and height values
Add a focus property and set it to auto
Define a crop type such as at_least
Apply a rotation value in degrees
Add a blur percentage and a grayscale boolean
Inspect the generated URL to verify the TR transformation parameters

Options

Set focus to auto
Apply grayscale overlay by setting it to true
Adjust blur by percentage
Rotate image by specific degrees

Tips

Verify the transformation by inspecting the source URL to see the TR query parameters

Highlights

“this worked very nicely”

All demos from “Ultimate Guide to Image Optimization in Next.js (CLS, Placeholders, Transformations, ImageKit)”

30:062:27Adjust Image Quality on the flyThe video demonstrates using the quality prop to dynamically change image compression levels, showing the visual difference between 90% and 5% quality.Next.js· AI Image/Photo Enhancer
43:491:32Chained Image Transformations with ImageKitCurrentThe creator demonstrates chaining multiple transformations including width, height, focus, crop, rotation, blur, and grayscale using the transformation prop.ImageKit· AI Photo Editor
47:351:49Overlay Text on ImagesThe demo shows how to use ImageKit's overlay property to programmatically add a 'Subscribe' text badge with custom background and padding to an image.ImageKit· AI Photo Editor
50:490:48AI-Powered Object-Aware CroppingThe video demonstrates using ImageKit's AI focus (fo-cat, fo-dog) to automatically crop images around specific subjects without manual coordinates.ImageKit· AI Crop Image
Watch “Ultimate Guide to Image Optimization in Next.js (CLS, Placeholders, Transformations, ImageKit)” →

AI Photo Editor

4:270:34URL-based image transformationsThe demo shows adding parameters like 'w-500', grayscale, and background blur directly to the image URL to transform the asset in real-time.ImageKit
5:010:35Adding text and gradients with Layers APIThe presenter demonstrates using the Layers API to programmatically add gradients and dynamic text overlays on top of a base image via URL parameters.ImageKit
43:491:32Chained Image Transformations with ImageKitCurrentThe creator demonstrates chaining multiple transformations including width, height, focus, crop, rotation, blur, and grayscale using the transformation prop.Jan Marshal
47:351:49Overlay Text on ImagesThe demo shows how to use ImageKit's overlay property to programmatically add a 'Subscribe' text badge with custom background and padding to an image.Jan Marshal
4:170:25Real-time image transformations via ImageKit URLsThe demo shows how to use ImageKit's ready-to-use URLs to apply real-time transformations like resizing and optimization by simply modifying the asset URL.ImageKit