What is image optimization?
Image optimization revolves around reducing image file sizes without sacrificing quality. This practice is essential not only for enhancing website loading speeds but also for improving SEO, or Search Engine Optimization, which is critical for ensuring that your images achieve favorable rankings on search engines like Google.
As highlighted in a BBC article from 2016, nearly 50% of users expect a website to load in less than 3 seconds. This emphasizes the importance of managing image sizes not just for user experience but also for meeting SEO criteria and ensuring optimal website performance.
Why is this an issue?
Large images can result in delayed loading times for portal pages, leading to a bad user experience and performance issues. Additionally, such images increase the required bandwidth for loading, impacting the overall page loading speed.
It is highly advisable to ensure that the images utilized possess a file size below 500kb to mitigate these issues and optimize the performance of the page.
How do I fix it?
When working with images in ServiceNow, it is important to recognize that there is no requirement to save images at higher resolutions than what will be shown to the end user.
Prior to uploading images to ServiceNow, optimize them by either compressing or resizing. Explore online tools that can assist in this process, such as:
optimizt: Optimizt is a command-line image optimization tool, open source, specifically designed to help frontend developers prepare images for web use.
svgo-tools: Svgo-tools is a collection of libraries and utilities built around the SVGO library, which itself is a powerful SVG optimizer.
An alternative approach involves using the <picture> technique when an image source exists in multiple densities or when responsive design requires different images on specific screen types. An illustration of this would be:
1 2 3 4 5<picture> <source media="(min-width: 800px)" srcset="head.jpg, head-2x.jpg 2x"> <source media="(min-width: 450px)" srcset="head-small.jpg, head-small-2x.jpg 2x"> <img src="head-fb.jpg" srcset="head-fb-2x.jpg 2x" alt="a head carved out of wood"> </picture>