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.
<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>
<script>
(function() {
const optimizeImage = new window.sitelint.OptimizeImage();
optimizeImage.install();
}())
</script>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:
- Locate your master template: find the master template file you wish to modify. This is typically located in the
Viewsfolder of your Umbraco project. The default name for the master template is usuallyMaster.cshtml. - Edit the master template: open the master template file in your preferred text editor or IDE.
- 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. - Save changes: after adding the code snippet, save the changes to the master template file.
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.
Comments