Resizing and cropping
Deliver resized images URL from the backend to render pixel perfect images on all devices.
- 40+ real-time image manipulation options.
- Adapt images using multiple crop and aspect ratio options.
- Deliver high-resolution images using the DPR transformation.
// In the Node.js backend
var resizedImageURL = imagekit.url({
path : "/girl_in_white.jpg",
transformation : [{
height: 400,
width: 500,
dpr: 2,
cropMode: "pad_resize",
background: "69C3EF"
}]
});
// Use resizedImageURL on the frontend
<img src="https://ik.imgkit.net/ikmedia/girl_in_white.jpg?tr=w-500,h-400,dpr-2,cm-pad_resize,bg-69C3EF" />
AI-based smart cropping
Automatically bring the subject of the image in the center with the content-aware smart crop.
- Crop around faces using computer vision based face detection algorithms.
- Define your own coordinates using the UI or API for custom cropping.
// In the Node.js backend
var profilePicture = imagekit.url({
path: "/original-image.jpg",
transformation : [{
height: 400,
width: 500,
fo: "face" // accepts auto and face
}]
});
// Use profilePicture on the frontend
<img src={profilePicture} />
Image and text Overlays
Use URL-based parameters to dynamically add watermark and text on images.
- Modify overlay size, position, padding, text font styles, color etc. directly from the URL.
- Chain multiple overlays and other transformations to create an engaging visual experience.
// In the Node.js backend
var dynamicBanner = imagekit.url({
path: "/white-canvas.png",
transformation: [{
height: 667,
width: 1000,
raw: "l-image,i-site_graphics@@girl_in_white_500.jpg,w-500,h-667,fo-face,lx-0,ly-0,l-end",
}, {
raw: "l-image,i-site_graphics@@guy_in_yellow_500.jpg,w-500,h-667,fo-face,lx-500,ly-0,l-end"
}, {
raw: "l-text,i-GET%20FLAT%2040%25%20OFF,co-FFFFFF,bg-0450D5,pa-20,fs-30,lx-350,ly-550,r-16,tg-b,l-end",
}]
});
// Use dynamicBanner on the frontend
<img src="https://ik.imgkit.net/ikmedia/white-canvas.png?tr=w-1000,h-667:l-image,i-site_graphics/girl_in_white_500.jpg,w-500,h-667,fo-face,lx-0,ly-0,l-end:l-image,i-site_graphics/guy_in_yellow_500.jpg,w-500,h-667,fo-face,lx-500,ly-0,l-end:l-text,i-GET%20FLAT%2040%25%20OFF,bg-0450D5,pa-20,fs-30,co-FFFFFF,tg-b,r-16,lx-350,ly-550,l-end" />
Signed URLs with expiry
- Set time-based expiry and prevent third-parties from using random image transformations on your assets.
- Prevent unauthorized users from accessing your original assets and their variants.
// In the Node.js backend
var signedURL = imagekit.url({
path: "/original-image.jpg",
transformation: [{
"height": "300",
"width": "300",
"signed": true
}]
});
// Use signedURL on the frontend
<img src={signedURL} />
File upload made easy
The SDK provides a simple interface using the .upload() method to upload files to the ImageKit Media Library.
- Upload, manage, search, and tag resources for efficient digital asset management in the cloud.
- Store optimized image URL from the API response and start using them in your application.
// In the Node.js backend
const fsPromises = require('fs').promises;
const fileBuffer = await fsPromises.readFile('/image.jpg');
var uploadResponse = await imagekit.upload({
file: fileBuffer, // It accepts remote URL, base_64 string or file buffer
fileName: "my_file_name.jpg", // required
tags: ["tag1", "tag2"], // optional
isPrivateFile: false
});
console.log(uploadResponse);