In addition to ensuring you are not serving up duplicate resources, such as images, reviewing and optimizing your images is another critical step for improving user experience. In a lot of cases, images make up most of a page’s weight. And making sure they are scaled correctly is an easy optimization that can help reduce page load times. Now, a couple of things to remember about images is that it is not to just enough to compress them or figure that if your site is responsive that it will be enough to remedy any performance issues your visitors may be experiencing.
Serve Scaled Images
Reduce Page Load Times with Scaled Images
Scaling Versus Compression
Yes, it is true that compressing images can help, but only to a certain degree. You want to balance file size with image quality. Taking compression too far will degrade image quality, and the user’s experience. They are expecting to see high quality images, but also fast, responsive pages. Scaling, in addition to compressing, will ensure that images are scaled to the appropriate size window they will be displayed in, as well as the reducing the amount of time the browser takes.
This way, the browser does not have to download the full size of the image and then scale it down to the appropriate size. It is more efficient to have that image scaled to the necessary size. Plus, it saves space on your server. It is a solution where everyone benefits. If your site is heavy with images, you should already be optimizing where you can. Again, this is not a difficult optimization to take care of, but if there are a lot of images, it is going to turn into a time-consuming project. There are many free tools that you can use to carry out this task, plus a lot of CMS platforms incorporate the option to scale images directly in the editor after uploading a new image.
Lighthouse is an open-source tool that is used to run an audit against your web pages and provides scores and suggestions for improving page performance, accessibility, SEO, and more.
PageSpeed Insights is a tool created by Google that reports on the performance of a page on both mobile and desktop devices, and provides suggestions on how that page may be improved.