While running a performance audit with Google PageSpeed Insights, is the “properly sized images” hint popping on your display? If so, Lighthouse has alerted that the pictures featured on your page are not optimally resized.
It is essential to understand why it is so important to optimize the photos on your webpage if you wish to avoid a Lighthouse warning. This article will delve deeper into the reasoning behind this alert, as well as providing advice on how to correctly size your visuals for improved online performance.
Why Compressing Images Is Important?
Streamlining is a major asset when it comes to web page rendering. To guarantee swift loading times and an optimal experience for your users, compressing your visuals is a must. By taking this step, you are ensuring that users have access to seamless experiences.
With the help of an online image compressor, you can effortlessly and swiftly compress multiple photos (JPG, PNG, and GIF) without sacrificing quality. The process is straightforward:
- Upload your pictures with ease by simply dragging them directly from a folder.
- Pick the desired quality (better quality, smaller size, or specific file size).
- Download compressed files directly to your device or save them to a cloud storage service for future access.
Once done, you can then use PageSpeed Insights – a web-audit tool powered by Lighthouse – to measure how well the files have been optimized. With this information you can tailor any necessary technical changes required for enhancing the overall web page speed. To ensure a fast website, Lighthouse recommends two primary approaches for photo compression:
- Properly optimizing visuals by utilizing compression technology and providing them in the desired size.
- Serving pictures in next-generation formats like WebP or AVIF, which offer better compression.
What Does Properly Size Images Mean?
When you understand the impact of properly-sized images on website speed, you may wonder what this concept actually means. In other words, the URL of the picture should not exceed the size at which it is shown on the user’s screen. Serving photos larger than they need to be will consume many more bytes of data and slow down page loading speeds. As an example, if an item needs to be displayed as 500 x 200 pixels wide, avoid using a larger sized version such as 2500 x 900 pixels – this will unnecessarily negatively affect page loading speed.
What Does Properly Size Images Mean?
When Lighthouse checks pictures, it studies the size of the object, then determines how much smaller it is when rendered on a device in comparison to its original size. An alert in the form of a ‘Properly sized images’ warning is triggered when the difference is greater than 4KiB.
Impact Of Improperly-sized Images on Performance
While we have previously discussed how improper photo sizing can impact loading times, the browser must also take extra steps to display those files, unnecessarily utilizing valuable resources and time in the process. Oversized pictures can prove detrimental to the overall page experience as they require users to download more data than necessary.
Here’s what happens on the browser side when it encounters improperly sized photos:
- It requests and downloads the photo.
- It resizes the object to fit the screen.
- Finally, the browser renders the image on the page.
Considering the amount of time the browser has to spend downloading and formatting images, it is important to implement best practices in order to keep bandwidth consumption in check.
Impact Of Improperly-sized Images on Performance
Three Easy Image Optimization Tips to Use
When aiming to ensure that pictures on your site are correctly sized, there are three fundamental tips to bear in mind:
Properly Size Images With Software and Online Tools
Nowadays, when resizing photos to the right sizes, you can either dive into popular programs like Photoshop and Lightroom or opt for simpler online options, such as My Crop Image.
You can also think of these CDNs like a handy API, automatically selecting, scaling and optimizing the images for the best user experience depending on their device.
Use Responsive Photos
Make sure your visuals stay on point throughout devices. Whether you’re coding or using a page building tool, take advantage of tools like srcset and sizes attributes to serve up the right size image for the viewer’s device. Most page builders offer just that, ensuring an optimized experience no matter the user’s device.
Use Vector-based Image Formats
If you are looking for a way to effectively increase or decrease the dimensions of your photos without affecting quality, you should take advantage of vector-based graphics formats such as SVG. By taking advantage of their code-based composition, these images can retain their clarity regardless of the size they may be adjusted to.
To make sure your website performs at its peak, resizing your images is essential. Additionally, you can use multiple sophisticated tactics to increase your website’s speed even further.
A Final Word
To keep warnings about incorrectly sized images to a minimum, get to know the measurements needed for every part of your website. Then, sticking to the correct dimensions for any screen size will become effortless. By utilizing the techniques outlined, you can compress the size of your visuals, resulting in expeditious load times for your visitors.
