Sitefinity Image Optimization Using Kraken.io
In this post, learn how you can integrate a tool like Kraken.io with Sitefinity for simple image optimization and get better, faster pages.
Join the DZone community and get the full member experience.Join For Free
Image Size Over the Years
Websites have come a long way since their inception in 1991. As technology progressed, we've gradually pushed it in the direction of being more and more visually engaging. The modern web page must provide information, but in a way that is interesting for the user and will retain their attention. Thus, caught in a fierce competition, websites have increasingly come to rely on images and video as content. This, of course, has resulted in bigger and bigger pages over the years. In fact, based on information provided by httparchive.org, the average web page size was 702KB in 2010 compared to 3545KB in 2018.
Ouch... that's some heavy visual engagement right there. We're all painfully aware of why we need to optimize web page size and load time, but we're required to deliver exceptional content at the same time. So, a struggle might ensue between content creators who add more media to pages and web developers who try to optimize them - at least, that's what happened with our company websites here at Progress. On one occasion, we had a blog post with over 10 images, each of which was several MBs in size. When using a CMS, content creators rarely pay attention to image sizes, or page load optimization in general... nor should they, their job is to create exceptional content.
So how do we improve the CMS to make the lives of both content editors and developers easier? Let's build an image optimization module!
Kraken.io to the Rescue
There are services available, such as Kraken.io, which compress the image size while retaining the same image quality. The idea is to use such services and reduce the size of images before they are saved in Sitefinity. Luckily, Sitefinity provides a mechanism to plug into the file processing flow. The goal is to plug our optimization logic into the file processing flow, so that users don't have to do anything more than uploading their image.
To be fair, there is an existing open-source project that provides Kraken.io integration with Sitefinity, but it was built 4 years ago and due to the admin re-invention, it won't be compatible with newer versions. This blog post focuses on a simpler, easier to setup approach.
Implementing the Kraken.io and Sitefinity Solution
Create a new Sitefinity solution, containing one web app project. Add a separate project that will store our logic. The idea is to then create a NuGet package for easy installation and reusability. The full code is available here, so you can go and get it, and I'll also be providing Gist links with the code for every step.
First, create a base class called
ImageOptimizationProcessorBase that extends
ProcessorBase and implements
IInstallableFileProcessor. The point of the base class is to provide some common functionality that can be reused by image optimization file processors.
The goal of the
IInstallableFileProcessor is to create a contract for us, so that we can automatically install all image optimization file processors on project startup.
Next, we're going to build our Kraken.io image optimization processor. To do that, we'll need to install the "kraken-net" NuGet package. After that we're going to create a new class called
KrakenImageOptimizationProcessor that extends
Let's add a startup class that will handle the registration of all image optimization processors. We currently have only one processor for Kraken.io, but the idea is that there can be different file processors for different image optimization services. We want to provide logic for automatic registration for all of them and allow the user to pick which one to configure. We're basically automating the file processor registration described in Sitefinity's documentation.
Let's start our website and configure our Kraken image optimization processor. We can see that in Advanced settings, under Libraries we have a new configuration added for "Kraken IO Image Optimization." We need to set the values for the ApiKey and ApiSecret parameters. You can get them from your Kraken account under the API Credentials section.
If you followed the above steps, it means that you are all set! Now, it's time to upload an image and see how the optimization works.
Oooh Weee! That's some fine image optimization right there! Furthermore, it's all done seamlessly through the file processing flow and content editors don't need to think or know about it.
If we have an existing website and want to optimize already uploaded images, we'll need to create a more sophisticated approach using a background task and a way to track already optimized images. Let us know in the comments what your use case is and whether you can see Kraken.io applicable as a solution.
If you're new to Sitefinity and want to learn more, feel free to give it a try.
Published at DZone with permission of Yasen Yankov, DZone MVB. See the original article here.
Opinions expressed by DZone contributors are their own.