Automatic image optimisation for Kentico

Posted 23 February 2016 12:00 AM by Sergio Gisbert, Team Lead & Solutions Architect @ ClearPeople

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 at https://github.com/sgisbert/Dianoga-for-Kentico and is distributed via Nuget (https://www.nuget.org/packages?q=%22Dianoga+for+Kentico%22). 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 (https://devnet.kentico.com/marketplace/utilities/dianoga-image-optimizer).

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.

Share:

Add your comment

 
 

 

Archive

Tagcloud

Digital Transformation employee engagement staff satisfaction productivity Microsoft Teams Office 365 Yammer cms content management system agile GDPR Microsoft Graph collaboration Microsoft sharepoint 2016 upgrade migration SharePoint Online 2016 Tech Trends Digital Disruption Context marketing marketing SharePoint 2010 SharePoint 2013 TFS Git security kentico Analytics intranet jquery QA Quality Assurance testing digital workspace content management websites Sitecore sitecore marketplace sitecore module cloud Microsoft Cloud Storage digital strategy technical consulting sitecore modules Experience database Sitecore 7 Sitecore 8 support account management customer experience Data Storage windows azure cms integration front end front end development prototype Cloud Storage StorSimple Front-end Development Layout SharePoint 2013 colour palette UI design website design log viewer sitecore cms website Azure big data business-critical sharepoint accessibility android apple chrome clear people clearpeople debug emulator ios mobile testing opera resize adobe desktop flash ie10 internet explorer 10 metro windows 8 bcsp SharePoint Advanced System Reporter reporting framework ControlMode form control master page placeholder publishing console SharePoint 2007 SharePoint error search search results search values software testing testing scenario audit content information architecture retention schedules PowerShell QuickLaunch scripts SharePoint server 2010 business solutions metalogix replication replicator storagepoint stena technet UK Technet picture library slideshow web part RTM released to manufacturing caml caml query MOSS 2007 query infopath