Image Transformations

URL Based transformations
ImageKit.io can perform real-time transformations to deliver perfect images to the end-users. These transformations can be performed by using the URL-based transformation parameters. 
URL structure
        URL-endpoint        transformation       image path                                    
┌──────────────────────────┐┌────────────┐┌───────────────────────┐
https://ik.imagekit.io/demo/tr:w-300,h-300/medium_cafe_B1iTdD0C.jpg
Original 600x600 image
https://ik.imagekit.io/demo/medium_cafe_B1iTdD0C.jpg​
Resized 300x300 image
https://ik.imagekit.io/demo/tr:w-300,h-300/medium_cafe_B1iTdD0C.jpg​
These transformation parameters w-300,h-300 can be added in the URL as path params or as query parameters.
As path parameter https://ik.imagekit.io/demo/tr:w-200,h-200/medium_cafe_B1iTdD0C.jpg​
As query parameter https://ik.imagekit.io/demo/medium_cafe_B1iTdD0C.jpg?tr=w-200,h-200​
Images transformation are subject to certain limits.
Use cases:
The transformations can be as basic as manipulating the height and width of the image, to complex transformations like watermarking or smart cropping of your images. A few common use-cases are explained below.
1. Creating multiple variants from a single master image
Often you need multiple variations of a single image to cater to different devices and sections within your application layout. Now you can create as many variations using ImageKit.io real-time image transformation parameters. Just change the URL to get a new image.
Learn about all commonly used resizing parameters
Resize, crop and other common transformations
Learn how to used named transformations for better code readability
Named Transformations
2. Low-quality image placeholder 
You can load a small size blurred image as a placeholder while the actual image loads in the background. ImageKit.io provides a blur parameter bl that can give you a blurred file that is smaller in file size but can be used as a placeholder as it shows the content. This technique is used by many applications, including Medium publication.
https://ik.imagekit.io/demo/medium_cafe_B1iTdD0C.jpg?tr=bl-6
3. Deliver Responsive and Art Directed Images
With the ability to resize images by changing URL, it becomes very easy to implement responsive images in your web applications. Learn more about responsive images in our detailed guide:
Responsive Images - A Reference Guide from A to Z
4. Smart-cropping for generating meaningful thumbnails
ImageKit.io can automatically detect the most important part of the image and preserves it in the output thumbnail. This could be super useful while creating small thumbnails. Learn more from the blog post below.
How Smart Crop Can Help Deliver Perfect Responsive Images
ImageKit.io Blog
Practical applications of smart crop
5. Watermarking or image overlay
You can overlay multiple images or colored rectangles on your original image directly from the URL. If you happen to change the overlay image, it can be done in minutes instead of days.
Here we have put the ImageKit.io logo (https://ik.imagekit.io/demo/logo-white_SJwqB4Nfe.png) on another image using overlay parameter i.e., oi
Learn more about image overlay
Overlay
https://ik.imagekit.io/demo/tr:h-300,oi-logo-white_SJwqB4Nfe.png/medium_cafe_B1iTdD0C.jpg
6. Text overlay
You can overlay text on an image and create dynamic banners. You can also control the font, font size, weight, color, and position of the text.
Learn more about text overlay
Overlay
https://ik.imagekit.io/demo/tr:ot-overlay%20made%20easy,ots-45,otc-00FFFF/medium_cafe_B1iTdD0C.jpg

Testing and Infrastructure Setup - Previous

Using with a custom domain name

Resize, crop and other common transformations

Last modified 11mo ago

Copy link

Outline

URL Based transformations

Use cases:

1. Creating multiple variants from a single master image

2. Low-quality image placeholder

3. Deliver Responsive and Art Directed Images

4. Smart-cropping for generating meaningful thumbnails

5. Watermarking or image overlay

6. Text overlay