Properly Size Images

A lot of web page optimizations can be time-consuming and may require more technical knowledge than you are accustomed to. However, properly sizing images should be one of the easiest optimizations you can carry out. Often, images are uploaded to your site without being properly sized. While it is great to have high-resolution images, there are methods that we discussed earlier, like compressing, that help to reduce image file sizes without sacrificing quality.

Another method is simply resizing images. Images that are not properly resized before being loaded to your server can lead to slower page load times, either because they are just too big or because the browser must resize them as the page is rendered, which creates additional processing time and delays. Again, it is important to remember that most web traffic is now coming from mobile devices, so imagine having to download large images over a spotty network. Not a great user experience.

A Lighthouse report will compare the size of the actual image versus the rendered image for all the images on your page. If the comparison finds that the rendered image is at least 4kB smaller than the actual image, then this will result in a failure and will come up as one of the optimization suggestions.

There are a variety of ways to size images properly. For sites that do not have a lot of images, manually resizing can be a worthwhile option. For sites that have hundreds or thousands of images, manually resizing is not a feasible option as this will require too much time. One of the great features of modern CMS platforms is that they can support responsive images, meaning that they automatically scale images with different versions that can be used by the browser. Using the srcset attribute, browsers can choose which image version to use depending on the user’s device. Additionally, image CDNs can be used to serve multiple images of varied sizes and formats, along with compressing.

Images can make up most of the weight of your web pages. Do not skimp on resizing, compressing, or optimizing images. It can be one of the most impactful actions you can take to reduce page load times.