Why you should start improving the images on your website

At LoadFocus, we’ve implemented an easy way to monitor the rendering of websites on desktop and mobile devices, this helps you get hints on how to improve the images that you load on your website.

Your website’s or blog’s speed is a very important metric in ranking in search engines

Try to keep that in mind when developing new features and adding fancy images and animatios to your pages.

Here are the most important image optimization hacks and best practices to improve the SEO rankings for your web pages:

• Lazy load your offscreen and hidden images (don’t load all images at once when your page renders, instead load them once the user starts scrolling your website and the images get in the view).
• Adapt the sizes of your images (don’t use super large images if it’s not needed, try to resize the images or crop them).
• Compress images to reduce file size with keeping the clarity and detail needed (balance between the lowest file size and an acceptable quality).
• Use modern image formats (AVIF and WebP are image formats that have superior compression and quality characteristics compared to their older JPEG and PNG counterparts).
• Use SVGs where possible (SVGs are automatically scalable and are smaller in file size than PNGs or JPGs which can result in faster load times).
• Use lossy compression where possible (with lossy compression you can obtain much higher compression ratios than is possible with lossless compression).
• Host your images on a CDN (Content Delivery Networks are networks located all over the world with powerful web servers that take care of loading your site’s images to the visitor using the closest geographically server).
• Serve images with an efficient cache policy (either using a CDN or from within your website, caching images reduces the load on your server).
• Set an explicit width and height on image elements to reduce layout shifts and improve CLS (Cumulative Layout Shift – one of the most important Core Web Vital metric).
• Add descriptive texts to your images (make use of the alt attribute to add descriptions to help search engines understand your content).
• Monitor Largest Contentful Paint metric (LCP measures when the largest content element in the viewport is rendered to the screen).

Written by Bogdan Vazzolla.

LoadFocus is a cloud testing platform, a load and stress testing tool which provides the infrastructure to run tests with thousands of concurrent users, from multiple cloud locations, in less than a few minutes, keep history of the results, compare different runs to inspect performance improvements or performance degradation. It also supports running JMeter load tests from the cloud and monitoring and audit web and mobile performance.

image optimisation best practices image optimization hacks improve images optimize images