On this page
The sculpture is in a park. It features outdoor surroundings with grass, trees, and plants. The sculpture is in silver and is an art installation in the park.

Umbraco CMS and compressing images on the client side before upload

Learn how to compress images client-side before uploading them in Umbraco CMS, enhancing site performance and SEO.

Compressing images before uploading them to a website or application can significantly improve load times, reduce bandwidth usage, save space on a server, and enhance the user experience. Faster loading of images is an important ranking factor in SEO activities.

If you use Umbraco CMS, have a site based on it and want to have a feature for transparently optimizing images on the client, then using npm package @sitelintcode/optimize-image-on-the-client-side is a solution for you.

Compressing images on the client side in Umbraco site

This can be achieved by manually adding the following code to the Master Template.

Install npm package @sitelintcode/optimize-image-on-the-client-side code snippet
<script src="https://cdn.jsdelivr.net/npm/@sitelintcode/optimize-image-on-the-client-side@0.0.39/dist/optimize-image-on-the-client-side.js"></script>
(function() {
  const optimizeImage = new window.sitelint.OptimizeImage();

Adding a custom script to the master template in Umbraco

Adding a custom script to the master template in Umbraco involves modifying the master template file where you want the script to be included. This process can vary slightly depending on whether you’re working within the Umbraco backoffice or editing an external template file (like those found in the Views folder of your Umbraco project).

For external master templates follow the following steps:

  1. Locate your master template: find the master template file you wish to modify. This is typically located in the Views folder of your Umbraco project. The default name for the master template is usually Master.cshtml.
  2. Edit the master template: open the master template file in your preferred text editor or IDE.
  3. Insert the custom script: you can insert the custom JavaScript or CSS directly, preferably into the <head> section. The code snippet for npm package @sitelintcode/optimize-image-on-the-client-side can be inserted into the <head> section.
  4. Save changes: after adding the code snippet, save the changes to the master template file.
Umbraco CMS and editing Master template

Help with installation

Installing a JavaScript code snippet may not also be an easy task, depending on the site’s complexity. Need help? Contact BuzzTech, Umbraco specialist, to get help with installation. We work with BuzzTech, when dealing with applications based on Umbraco CMS.

About Umbraco

Umbraco CMS is a free and open-source content management system (CMS) that enables the development of responsive websites and data-driven applications that can be accessed via any device or browser. Umbraco, which was first launched in 2004 as a community-driven project, has grown to become a leading .NET CMS framework noted for its flexibility, integration capabilities, and thriving developer and design community.

The platform is written in C# and deployed on Microsoft-based infrastructure, utilizing technologies like ASP.NET Core.

Related posts


Leave a Reply

Real-user monitoring for Accessibility, Performance, Security, SEO & Errors (SiteLint)