Optimizing images with ImageKit CDN

Images play an important role in determining the page load speed because images are data heavy and use more bandwidth when loaded. If a page has multiple images then it slows down the page performance. 

ImageKit is a well known image CDN that can help in optimizing the images in your web page. ImageKit also optimizes images based on the screen size so we don't need to customize our images for small screen devices i.e. mobiles and tablets.

ImageKit provides a free plan to test its CDN services and is good enough for personal projects. It provides up to 20 GB of bandwidth that should be enough for personal projects. If we have any existing image storage then also it works well integrating with that.

Adding images to ImageKit media library is a one step process and after uploading it provides the URL of the uploaded image and we can use this URL in our web page for image optimization.

ImageKit also provides customizing image dimensions on the go, we just have to supply image height and width and then it delivers image in specified dimensions.

e.g if your image url is https://ik.imagekit.io/portfolio/default-image.jpg then you can use

https://ik.imagekit.io/portfolio/default-image.jpg?tr=h-200,w-400

This query parameter will trim image into 200*400 .

ImageKit works smoothly with third party image stores e.g AWS S3 store, personally I used to store images in AWS S3 bucket and moving to ImageKit was seamless. I just had to configure S3 details with ImageKit and it automatically took all images and provided the URL of all images.

I created a external data source named portfolio and integrated it with my existing AWS S3 bucket and then ImageKit provided me the URL for these images. The names of these images were also same as my S3 image names.

e.g. suppose if I stored my images in S3 at /blog/images/image1.jpg 

then ImageKit URL would be

https://imagekit.io/<my data source name>/blog/images/image1.jpg

That simple it becomes after integration, we just have to provide the bucket details and a valid credentials of the user that has access to your S3 bucket.

Handling all images was getting difficult for me especially with different devices and ImageKit worked like a charm , this blog page is also using ImageKit , please check all the image URL in this page. 

All those who are planing to optimize their website loading speed and if images are slowing you down then you should definitely explore ImageKit image CDN.

Happy Coding!!!