This is part two of a two-part comparison between ImageKit and ImageEngine, you can find part one here.
In a 2018 talk, Google themselves highlighted images as one of the top contributors to page weight and one of the top opportunities for website admins to improve their performance metrics. Since April 2020, Google has also stepped up the role that performance metrics play in search engine rankings with the introduction of core web vitals and user-centric performance metrics.
To keep their websites competitive in the wild-wild internet and Google SERPs, webmasters are adopting smarter image optimization strategies using specialized services like ImageKit and ImageEngine.
In part one of this comparison, I looked at the user experience, features, and capabilities of both tools. In this part, we’re jumping straight to two of the main considerations for users engaging with an image CDN:
- Performance improvement
ImageKit vs ImageEngine — Performance Testing
For this test, I firstly ran a PageSpeed Insight audit against a page without any image optimization to provide a baseline. This page uses around 30+ high-quality images, some of which are oversized even for desktop websites.
In line with the shift towards mobile-dominant consumer traffic and mobile-first indexing by Google, I also focussed on the mobile test results. This also gives an opportunity for both optimization engines to really flex their muscles as mobile screens are often the most challenging, yet crucial, to optimize for.
Finally, I kept to the automated optimizations that each service provides.
So, starting with the unoptimized page, here are the results for ImageKit:
As you can see, the overall score was really poor, especially regarding one of the core web vitals, LCP. Interactivity on the page was also significantly delayed thanks to the slow loading images.
Digging into the opportunities for improvement, we can see that most are somehow related to images:
Serving images in next-gen formats, properly resizing images, and efficiently coding them are some of the biggest challenges to solve. We also drastically need to cut down on the overall image payload, which currently stands at nearly 35 MB.
So, first up, I’ll analyze the results for ImageKit:
Although the overall score remained the same, there are some upsides with using ImageKit. Important metrics, such as the core web vital LCP, and TB were significantly improved. However, we are still some way off from optimal performance levels.
Digging further into the opportunities and diagnostics provides us with some clues as to why:
As you can see, the main issue is that ImageKit doesn’t automatically resize images at run-time. This cost us a lot in potential savings and is why you have to manually implement responsive syntax alongside ImageKit to really optimize performance. For this test, I did set some mobile breakpoints, but it didn’t make much of a difference.
However, ImageKit did convert images to next-gen formats which did lead to an overall payload reduction of around 45%. It should also translate to some tangible improvements in the user experience with a shorter wait for content to load and the page to become interactive.
Next up, here are the results for ImageEngine:
ImageEngine also addressed all of the opportunities for improvement highlighted by PageSpeed Insights. And, in the diagnostics, we can see that it cut the total image payload down to just under 1 MB (roughly a 97% reduction):
As you can see, there is clear daylight that separates these two. I’ve tested and compared numerous CDNs with ImageEngine, and simply put, few can stack up to its intelligent device detection, particularly when optimizing for mobile display.
Pricing and Plans
Starting off, ImageKit actually offers a perpetually free plan that you can use with no time limit. However, unlike the other plans, there is a 20GB hard bandwidth limit (which means you cannot even access paid overages) and a 20GB hard storage limit. It does still offer most of the transformation and auto-optimization features, although the main feature you will miss out on is the ability to configure a custom CNAME.
Instead of a free plan, ImageEngine only offers a free 30-day trial that you can use to test the performance improvements and for proof-of-concept implementation. However, you do get a massive 100 GB of Smart Byte bandwidth (equates to roughly 400 GB of original image payload data). All automatic image optimization and delivery capabilities will work 100% during this period.
Pricing for ImageKit starts at $49 per month for the Premium Plan. For this, you get 40 GB of bandwidth with overages at a rate of $9/20GB (or, $0.45 per 1GB). This plan also comes with free storage up to the total bandwidth usage you were charged with overages of $0.1 per 1GB. You can also register up to 5 user accounts, receive prioritized support, and create 1 custom CNAME ($50 for each additional domain).
The corresponding ImageEngine plan would be the Basic package, also at $49 per month. You still get 100 GB of Smart Bytes bandwidth which is 2.5x what ImageKit offers, but nearly 4x as much if you factor in the payload reduction differential. Basic members will get a default delivery address to use, although it does have HTTPS support.
ImageEngine offers another package for larger sites such as eCommerce platforms or particularly image-heavy sites with a global following. The Standard plan comes with 250 GB of Smart Bytes bandwidth which equates to roughly 1TB of unoptimized image content. Another valuable Standard plan upgrade is that you now get 3 customizable delivery addresses (CNAME).
All ImageEngine plans charge $0.4/1GB of bandwidth overages, marginally cheaper than ImageKit’s rate.
Both ImageEngine and ImageKit also offer enterprise packages with custom bandwidth, storage, and support SLA agreements, so I’ll skip over these.
One thing both these services have going for them is that they only charge for your bandwidth usage. Many competitors also factor in the number of transformations generated or their storage consumption, which can eat into your overall bandwidth budget or lead to unstable month-to-month expenses.
Of course, you also need to factor in that you get extra asset storage space with ImageKit, although its DAM capabilities are not as sophisticated as something like Cloudinary. However, pound-for-pound, you’ll get significantly more mileage from ImageEngine’s bandwidth, especially considering ImageEngine’s more effective optimization.
At the end of this two-part series (you can find part one here), what are my findings?
As I found in part one, both these tools are extremely easy to set up and use with robust features and capabilities. They do differ in that ImageEngine is the more streamlined, set-it-and-forget-it option while ImageKit provides additional tools, providing some art direction as well as a more developer-oriented approach to image optimization.
However, ImageEngine’s device-aware technology and intelligent optimization are far more effective at directly improving key website performance metrics. It also spares you from being totally dependent on less time and effort-friendly optimization strategies like responsive syntax.
While both come in at a similar price point, ImageKit might be the more appropriate option for those who also want to utilize the DAM tools or if you’re satisfied with operating within the boundaries of the free plan.
On the other hand, ImageEngine’s main value comes from its superior performance, bandwidth-to-cost ratio, and its effortlessness. In a world where time=money, the hands-off and future-proof approach of ImageEngine can potentially be priceless.
You can find part one of this two-part comparison series here.