Want to achieve the fastest page load time?
Sure, faster pages are better for your clients, and for Google too!
Then you need to optimize your images (read more on why you need optimized images here).
Here in the video below I explain how to do it with just a few clicks. In the end I will show the free tool I use to get the smallest possible file size of my images.
Perfect image size for a webpage
First, let’s find out what is the perfect size for our image.
For this example I will be using Chrome browser, but most of the browsers have similar functionality, which may look a little different.
Go to the page you want to optimize, right-click on the image, and choose “Inspect”.
In the panel that opens, we see the code for our image.
If you are using this tool for the first time, the panel may open on the right, but the principle is the same. In the highlighted area find the image URL.
How to find exact size of the image on a webpage?
Hover over the image URL and we will see the Rendered size, and Intrinsic size.
Rendered size is the size of the image on our page, this is the size we need. Write down the width – as we will only need the width, the height will be calculated automatically.
Intrinsic size is the original size of the image on the server. In this case we see that image is larger than we need, meaning we have good chances to reduce the file size.
Also this image here is in png format, which may be heavy. As of 2023 the preferred format is webp.
Let’s click on the link that says “Current source”. This will open our image in a new tab. Right-click on the image and download it to your computer.
Free tool to instantly optimise images online
Let’s go now to the BulkResizePhotos website, and upload here our image.
On the next screen we can choose the width we need, 528 pixels in our case, indicate that we want webp format, and we can leave the image quality at 80%. In this case we do not need a transparent background.
Let’s hit start.
And here we are. We see a miracle. From almost 60 kB our file size has reduced to under 10 kB. Great result!
And you can try to play with quality setting to get even better results.
So, now when we uploaded our optimized image back to our page, let’s see what is the difference.
Oh, yeah!!!
Now it is much better! Almost perfect!!!
