X
Closing this message and/or accessing our website tells us you are happy to receive all cookies on the ClearPeople website.
However, if you would like to, you can change your cookies settings at any time.
ClearPeople are a certified Partner of Kentico, a popular CMS (Content Management System) based on .Net architecture. Like any other CMS, the web content depends on the editor’s work, and often, content optimisation is not as good as it might be. One of the most common performance problems our web app may have relates to images uploaded by the editors to the website. Normally the editor will not have image editing skills which causes the images to be uploaded unoptimised, with some extra KBs of weight that will impact the overall performance and data transfer of the website.
Kentico plugin

To deal with this problem, we have built a Kentico plugin for our last project that will automatically optimise all the images the editor uploads to the Media Library. Source code can be found here at  and is distributed via Nuget. This plugin is a fork from the original Dianoga for Sitecore, by Kamsar, that  we have adapted for Kentico. It’s available for both Kentico 8.x and Kentico 9. It has also been approved in the Kentico Marketplace

 

Installation

Installation is really easy and transparent, and it’s done through the Nuget Package Manager. You just need to look for “dianoga” in nuget.org and install your correspondent version: 8 or 9.

 

Kentico plugin

 
Or  also via Nuget console:
Kentico 8.x: PM> Install-Package Dianoga.Kentico_8
Kentico 9: PM> Install-Package Dianoga.Kentico_9

 

Once the right package is installed, it already works without any other configuration. These are the changes in the source Project:

 

Web.config

These elements are added to the web.config file:

  <section name="dianoga" type="Dianoga.Config.DianogaSection" />
  <dianoga>
    <optimizers>
      <add type="Dianoga.Png.PngOptimizer, Dianoga" path="~/Dianoga Tools/PNGOptimizer/PNGOptimizerDll.dll" />
      <add type="Dianoga.Jpeg.JpegOptimizer, Dianoga" path="~/Dianoga Tools/libjpeg/jpegtran.exe" />
    </optimizers>  </dianoga>

 

Source code:

A new folder is copied into the solution, “/Dianoga tolos”, that will host the libraries needed at runtime to perform the optimisations, and that needs to be deployed along with the whole website.

 

How it works

Dianoga will take care of automatically optimising all the images that are uploaded to the Media Library. To check this functionality, we will upload an image and we’ll check its size, before and after. Let’s take the previous image in this post as a sample:

Kentico plugin

 
If we upload it to the Media Library, we can see the reduction in size:

Kentico plugin
 
In the Event Log, the optimization is registered for each image uploaded:

Kentico plugin
 
Where we can see the optimization details:

Kentico plugin

Conclusion

This library is a must-have in all our Kentico libraries. If it’s been useful for you, please let us know! And if you think you can improve it, don’t hesitate and grab the repo from GitHub.

Author bio

Sergi Gisbert
Sergio Gisbert
Technical Architect
I'm primarily focused on the delivery of successful projects with Kentico CMS. When I’m not at work, I’m running a personal project started 7 years ago called “Fatherhood," which takes up most of my non-working hours. I'm always keen to escape to snowy mountains and ski down them!

Comments


comments powered by Disqus

Related Articles

Sign up to our Newsletter

Every now and then, we'd like to send you information that delivers, develops and promotes our products and services that are relevant to you. Submitting your details tells us that you're OK with this and you also agree to our Privacy & Cookies policy. You can, of course, opt out of these communications at any time.