Transform and Optimize existing images

ImageKit allows you to reduce the size of your images and resize them or crop them into different dimensions in real time. Not only does this work for all the new images that you upload on Imagekit but also helps to optimize existing images.

This means zero migration effort. Image optimization is just a matter of minutes. A lot of our clients have been able to go live with our image optimization technique in less than 15 minutes.

What do you mean by existing images?

Every website or mobile application needs images. A medium-sized e-commerce company will easily have close to a million unique product images or banners. All these images, that are being used on a website or app, prior to using ImageKit are referred here as “existing images”.

It is not practical to upload all these images to a new storage to optimize them. Not only will this activity take a lot of time and money, you can never be certain if all the images have been migrated to the new location or not.

However, to work around this uncertainty and effort, ImageKit provides a simple Plug-and-Play migration to optimize existing images.

What is the method offered by ImageKit?

With the Plug-and-Play migration, you can tell ImageKit about the location of your original images. Your original images could be in a storage like S3 or could be stored directly on your server. Currently, ImageKit supports adding an S3 bucket and an HTTP server as an existing image source.

How does this method optimize existing images?

ImageKit does not start downloading the images from your original image sources. Instead, when you request one of your existing images via ImageKit, ImageKit will get it from the source you have added, optimize the image, transform it if needed and deliver it. All in real-time.

Once the optimized image has been delivered, ImageKit stores a copy of the same. This ensures high performance in the future and also reduces the cost and hits on your existing image sources.

What change do I need to make in my URLs

The change is very simple.

If you currently served images from

http://www.mydomain.com/path/to/my/image.jpg

And if you add http://www.mydomain.com or the S3 bucket that is associated with it as the original image source, then your new URL would look like

https://ik.imagekit.io/{ImageKit_ID}/path/to/my/image.jpg

The above ImageKit URL automatically optimizes the image before delivering it. Generally, this results in about 40% reduction in bandwidth.

To transform your original image to a new size, let’s say 200px by 100px, the new URL would look like

https://ik.imagekit.io/{ImageKit_ID}/tr:w-200,h-100/path/to/my/image.jpg

This way, you can optimize and transform all your existing images with just a simple “Find and Replace” operation in your code.