Issue #416 (ImageKit.io Review, CSS/HTML, React, Jamstack)07/08/21
The following intro is a paid product review for ImageKit.io, a global image CDN with built-in optimization, real-time transformations, and more.
In the last few years, there's been a big push in ensuring images (which are known to be the largest resources on many websites) are delivered fast and in an optimized fashion. Many apps and websites are taking advantage of Content Delivery Networks (CDN) to help with this.
ImageKit.io is an all-in-one CDN that offers some great features that I'll discuss here, including:
- Real-time Image Optimization
- Real-time Image Transformations (e.g. resizing, cropping, etc.)
- External Storage Integrations
Let's take a look at the optimization service first.
If you're like me, your current workflow might include a multi-step and multi-app process that requires optimizing images manually (or as part of a build process), along with deploying those images to some kind of cloud provider or CDN.
ImageKit.io makes this process so much easier by offering automatic image optimization as part of their CDN service. Once you've got your account set up (which, by the way, is free for up to 20GB bandwidth per month!), go to the "Image Settings" menu option and you'll see the optimizations available:
Image Settings in ImageKit.io
From there you can choose to have automatic image format optimization (which doesn't change the image URL), device-based optimization, and on-the-fly image compression — i.e. you select a level of compression before delivery.
The file format conversion is a really great feature. Basically, you add the file to your media library and you can then set it up to automatically deliver the most optimized file type to each device. For example, WebP for Chrome and AVIF for devices that support that format.
Another powerful feature of ImageKit.io is the ability to do real-time transformations by simply adding parameters to any image URL, which you can see demonstrated in the graphic below.
URL structure for doing on-the-fly transformations
As an example, I've uploaded a single high-resolution image that has the following URL:
https://ik.imagekit.io/impressivewebs/fox_ztCv4pxXbW.jpg
That's a full high-res image that I don't want being downloaded on all devices. I can use the following variations of the image by simply changing the path:
https://ik.imagekit.io/impressivewebs/tr:w-800,h-532/fox_ztCv4pxXbW.jpg
https://ik.imagekit.io/impressivewebs/tr:w-600/fox_ztCv4pxXbW.jpg
https://ik.imagekit.io/impressivewebs/tr:w-400/fox_ztCv4pxXbW.jpg
Notice the width and height values represented by "w" and "h". I can also choose to do the same thing using query string values:
https://ik.imagekit.io/impressivewebs/fox_ztCv4pxXbW.jpg?tr=w-800,h-532
Again, no need to edit the image in the editor, just use the original image as a base, then apply the transformation in real-time by editing the URL.
Other on-the-fly transformations include:
- Image and text overlays (e.g. for adding water marks)
- Blur effect (e.g. for placeholders while a larger image is loading)
- Smart cropping for responsive images
As a bonus, you can also do custom image transformations from within your own dedicated Media Library. This means you can edit images using tools similar to those found in common image editors like Photoshop.
Once you've uploaded an image to your media library, you can choose from options like crop, resize, and rotate, as shown in the screenshot below.
Crop, resize, and rotate options for image editing in ImageKit.io
In fact, the image editor is newly overhauled and new features were pushed out this week.
The last thing I'll cover here is the fact that you can integrate your existing external storage provider with ImageKit.io. This is extremely useful because it's not easy to move your team's entire media library to a new storage service. Using ImageKit.io means there's no need to change services — just integrate your existing provider.
External storage Integrations with ImageKit.io
In my example, I've integrated one of my buckets from my AWS account, which I normally use for my image storage. I can then use the following URL format to reference any of the images in my bucket:
https://ik.imagekit.io/imagekit-id/tr:w-600,h-275/my-file-name.png
The "imagekit-id" part of the URL would be the name of the origin as I've defined it when I set up the bucket integration.
This is a really neat feature and it's possible not only with AWS but also Google Cloud, Digital Ocean, and more.
External storage providers you can integrate with ImageKit.io
When combined with the Media Library feature, ImageKit.io really is a powerful set of tools for hosting, optimizing, and delivering your media content.
If you'd like to give ImageKit.io a test run, you can check out the options on their pricing plans page. As mentioned earlier, the free forever plan allows up to 20GB per month in bandwidth usage, which is a great deal for any project looking for a new solution for managing and delivering media content.
So check out ImageKit.io if you're in the market for a fast and feature-rich CDN service. With their free plan, and no credit card required, I'm sure you won't be disappointed with their service.
Now on to this week's tools!
