One of the most common reasons a web page takes forever to load is the size of the images used on the page. To help keep your page load times speedy, optimize images before you upload and use them on your site.
By “size”, I don’t mean just its dimension in pixels.
There are actually 2 sizes you need to pay attention to where images are concerned:
- Its dimension in pixels ( 400 x 400, for example)
- Its filesize ( the space it takes in kilobytes or megabytes to store the file )
First, let’s talk about its display size in pixels.
The image below (of our beloved dog, Cheerio) is 240 pixels wide by 320 pixels tall.
I took this picture of her with my phone. The original image is 2,448 pixels wide by 3,264 pixels tall.
Yowza! That’s bigger than the screen on my 27″ iMac!
If I just added the original image to my media library, WordPress would accept it and make 3 other sizes of the image for me to use. A large size (596×795), a medium size (240×320) and a thumbnail size (150×150). These sizes are determined by your media settings (Dashboard > Settings > Media):
You can change the sizes WordPress creates for you by editing these settings. Or, you can leave them be. But this is how WordPress determines what sizes to create for you.
So, I used the medium size to put the image of Cheerio on this post. Great!
Not so fast.
My image of her is still not optimized. Why? Because its file size is bigger than it needs to be.
Second, let’s talk about file size.
The original image at 2,448 x 3,264 pixels has a file size of 7.4 MEGAbytes.
That’s way too big to be uploading to your media library because it takes too long to transfer 7.4 million bytes of information to the screen.
And because I uploaded that original image, all of the sizes WordPress has created for me are also “heavier” than they need to be.
So how do you handle that bloat?
With my favorite little image optimizer: Squoosh.app
No account to create. Just go there, upload your image, let it do its thing, and then download your optimized image.
You can resize your image while you’re there, too.
Without resizing my image of Cheerio, Squoosh optimized it and reduced the file size to 667kB… 91% smaller! Yet it’s still 2,448 x 3,264 pixels.
But then I told it to resize the image to 240×320 pixels, and now the file size is 12.5kB… 100% smaller!
If you were your website, which could you do faster:
- Transfer a 7,400,000-pound image to the screen from the server
- Transfer a 1,250-pound image to the screen from the server
Uh, yeah…the latter. For sure.
Here’s my optimized picture of Cheerio:
Because I chose to resize my image, WordPress only created the thumbnail size when I uploaded it. That’s a plus, too, because I don’t need the extra sizes. (WordPress will always create the 150×150 size because that’s what it uses to show you the image in your media library.)
But this is a much better situation because, with that first image of Cheerio up there, I now have 4 images in my media library taking up over 8MB of space on my hosting account server. With the second, I have just 2 images in my media library taking up less than 20kB of space on the server.
Now let’s talk about page speed implications.
Now that page speed is a ranking factor, if your images are not optimized, you’re going to rank lower because your pages will take longer to load. (Remember, 7.4 million bytes of data takes a lot longer to move than 1,250 bytes does. And this is just one image!)
People aren’t willing to wait forever for your awesome pages to load. They have to load within 3 seconds or we lose interest and go to another site. Google knows this. So the “best” answer to our searches is now determined, in part, by which is the fastest answer.
Take the time to optimize images before adding them to your site.
Speaking of images, do you need some?
We’ve compiled a list outlining where to find free, LEGAL images to use. (DON’T just go swipe some from Google images!)
