Compress images before uploading them
Most website owners upload images with huge dimensions, such as 2000px in width.
The bigger the dimensions of the image, the bigger the file size.
For example, an image with a 3000px width would have a file size of 1 MB at least (without compression).
But an image with a 1000px width would only have a file size of 200kb (without compression).
In most cases, you don't need an image that is wider than 1000px width.
There are two problems with big uncompressed images
- Pages or blog posts with big images will load extremely slowly. This will cause people to leave your website and never come back.
- Big images also increase the disk space on your web hosting service, and most web hosts charge based on the amount of disk space being used.
For example, Cloudways charge $14 for a site that occupies 25 GB and $28 for a site that occupies more 25Gb.
That is a lot of money if we consider the long run of your website.
So, we need to fix this problem.
And we can easily do so using my simple 3-step process to compress images before uploading them.
Step 1: Figuring out the display size of the image
On a web page, every image will occupy a certain amount of space on the screen.
For example, in the above screenshot, each image occupies 454px of width on a desktop screen.
Similarly, the featured image in the above screenshot occupies 900px of width on the screen.
We call this occupying space of the image the "Display Size" of the image on the screen.
Without knowing this, most website owners will upload images with huge dimensions such as 2000px even though the image only occupies 900px of width.
So, it is important that you figure out the display size.
How to figure out the display size of an image
Don't worry! Figuring it out is easy.
We need to use Chrome browser and its inspector tool to get the job done.
Let's say we want to upload an image to a blog post.
Our next task is to find out how much width a particular image occupies on the blog post.
So, open up one of your previous blog posts in Google Chrome and look for an image.
Once you find an image, right-click on it and click "Inspect".
When you inspect an image inside Chrome, it will display the occupying size of the image on the top edge or the bottom edge of the image.
In my case, the image on my blog post occupies a maximum width of 744px.
Step 2: Resize the image according to its display size
Our next step is to resize the image.
There are many free yet reliable tools to resize the image.
I use these two free tools depending on the situation:
- Figma - For screenshots to add annotations such as arrows and text
- Quick bulk image resize tools like imageresizer.com
For this lesson, I will demonstrate how to use imageresizer.com because it is easier for you to start.
If the ImageResizer service is limiting you in some way, try using Figma with the help of this lesson.
Come on, try it out with me.
First, download these high-resolution images, and let's practice image resizing.
If you remember, on my blog post, the maximum display size for this image would be 744px.
But I don't want the image to be pixelated on retina devices.
Usually, if we want to support retina devices, we have to upload an image that is double its display size and expect WordPress to use the appropriate image.
For example, If the display size of an image is 1000px wide, we need to upload an image that is 2000px wide to support retina devices.
This will make images look sharp and crispy on retina devices. But this will also increase hosting expenses if your website has a lot of images.
So, at the end of the day, the trade-off is between expensive hosting charges and sharp and good-looking images.
I don't want to spend a lot of money on hosting charges but I don't want to display pixelated images either.
So, I will add 200px to the actual display size so that it looks okay on retina devices.
For example, if the display size of an image is 800px, I will use an image that is 1000px. This will adjust the trade-off a little bit.
Long theory short, the final image size that I am going after is 1000px.
Come on, first, let's upload the butterfly image to imageresizer.com, and resize it to 1000px.
If you notice, the uploaded image file size is 2.4 MB and when we resized it from 5000px width to 1000px, the file size was brought down to 150kb.
That's a huge file size saving, isn't it?
Image resizer is so nice that it helps you resize images in bulk too.
ImageResizer did a good job in compressing the image size to 150kb but it is a general rule of thumb that a 1000px image shouldn't size more than 100kb.
How do we reduce the image size further without reducing its quality?
Step 3: Compressing the image further using Tinypng
We can save the image file size even further by compressing it using tinypng.com.
Come on, let's visit tinypng.com and upload the image resized image.
Wow! Did you see that?
After compressing the image using Tinypng, without reducing the quality of the image, the file size was brought down to 60kb!
Now that's the power of the manual image compression process.
This saves you a lot of web hosting disk space and substantially improves your page load speed.
I understand it's a bit tedious to do this if you have a lot of images, but once you start doing this, you'll find ways to do it faster by trying out different tools.
Anyway, in the next lesson, we will understand why we should use JPEGs over PNGs with a case study.
