Size Matters: How to Optimize Your Images
Last week I showed you how to create your online images.
I also told you that creating your image is one thing, but optimizing it is another.
So without further ado, let's get down to the nitty gritty of shaping and trimming your images.
Why Does Size Matter?
How many times have you clicked a link to a website and then been faced with the spinning wheel?
How long do you let it spin before closing the page?
There could be a few reasons why it doesn't load:
- Poor internet connection
- The web host server is having problems
- The web page is riddled with errors, poor coding, or incorrect image sizes
Each of those could cause the spinning wheel effect.
Its not just me who is impatient. Stats show that on average we give a website just a few seconds to load before we abort our mission!
In fact a few studies from the likes of Akamai and Gomez.com, highlighted on Kissmetics have shown:
Nearly half of web users expect a site to load in 2 seconds or less, and they tend to abandon a site that isn’t loaded within 3 seconds.
Even Google takes page loading time into consideration when ranking websites.
As I said there are many factors influencing page load times - some are outside of your control, but others you can do something about.
Today we will just focus on what you can do to improve your images.
How to Optimize Your Images
There are two key things you can do to optimize your images:
- Resize your images; i.e. use the correct dimensions to fit your page
- Compress your images; i.e. you can shred a few more bytes off the side
Resize Your Images
What is the correct dimension?
Before you can actually resize an image you need to know what is the right size image to be using for a particular page on your website.
For example, I'm using Thrive Themes, and if I check their knowledge base it gives me the following information:
How do I check the dimension?
If you are not sure what dimensions your image should be or what you are actually using then you can check in Google Chrome as follows.
Go to the page where your featured image is displayed, and right click on the image. Select ‘Inspect Element’ and a box will open up in the lower screen.
When you hover over the link in this bottom box, you will see the following pop up:
This displays the screen image size (on the left) compared to the actual image size you have uploaded (on the right). [Remember above that Thrive said the featured image size = 730px].
Tip: Your image size should be as close to the figure on the left as possible.
In the example above, my image began life on Canva with dimensions of 1200 x 627px. This is because I used a standard Facebook template size.
It would be pointless to use that original size on my blog because it would exceed the Featured Image size of 730px.
Using the wrong image size means your web page has to work harder to reduce it 'on the fly' as it loads. So, I reduced it down to 700 x 366px for my featured image on the blog post.
What tools should I use to resize images?
There are some free tools available to resize images and Windows and Mac have standard image editing tools built in.
There is a standard tool on the Mac called Preview which allows you to do some image editing, including resizing.
Using the Adjust Size feature I reduced the above screenshot down to 600px wide, so that it fits nicely inside the width of the blog post.
Tip: Make sure you keep the aspect ratio ticked!
Some of the Image Creation tools I mentioned last week like Pixlr and PicMonkey also have image resizing features.
So, there's no excuse for not getting your images to the right size!
Remember: Size Matters -> Get your images in shape now!
Compress Your Images
Once you have your image at the right size you need to compress it.
Basically you are going to squash it, squeeze it, call it what you like, but the goal is to reduce the file size.
Don't worry, there are tools available to help you compress your images!
The first one you might want to try is called TinyPNG. Its an online tool and its FREE.
You simply go to their website, 'drag n drop' your image in, and it magically reduces the file size.
To illustrate, I've used 4 screenshot images above in this post, so let's upload them and see what TinyPNG can do.
Wow! That's a 72% reduction.
If only weight loss was so easy!!
TinyPNG have also developed a WordPress plugin. I haven't tested it, so I can't comment on it, but it might well be worth a go. It allows 500 compressions a month for free and then applies a small additional fee for anything more.
Kraken is another online image compression tool which is FREE to use.
It works in the same way as TinyPNG - you just 'drag n drop' your images onto their website and it does the crunching, or Kraking as they like to say.
Here's the same experiment on Kraken:
Bingo! Another 72% reduction!
There is also a Kraken Pro version which starts at $5/month and includes a WordPress plugin.
Lossy or Lossless?
When you are compressing images with Kraken, and other tools, you might come across the terms Lossy and Lossless.
Here's the definition of each, taken from the Kraken website:
In the examples above I have used lossy compression. In my opinion, for most web images this type of compression is absolutely fine.
My Image Compression Tool
I mentioned earlier that the WordPress Theme that I'm using is from ThriveThemes.
One of the many excellent features built into any of the Thrive Themes is the Performance Options which includes Image Optimization and Lazy Load Comments:
Thrive have teamed up with Kraken so that all images uploaded into the WordPress Media Library are automatically compressed by Kraken. This means I don't have to use an outside tool.
BTW, Lazy Load Comments means the Comments section of a blog post is not loaded until a reader gets that far down the page. It's another way to optimize your page loading speed.
Again, using the 4 screenshot images as an example, here you can see what the compression looks like inside my media library:
Now, if you're not too sure on converting bytes to kilobytes, you divide by 1024. For example, a saving of 35189 bytes is equal to 34.36 kilobytes.
At this stage, I think an overall comparison of the image compression tools might help:
Apart from the odd decimal place you can see that all performed in the same way!
Are you feeling trimmer now?
Having a fast loading website is important for keeping your visitors. You know people don't hang about waiting - they have better things to do with their time.
There are some things you can do yourself for FREE to manage your website speed.
Optimize your images by resizing and compressing with the tools above.
Here's what you have learned today:
- Size matters: you need your pages loading as fast as possible to keep visitors
- Always resize your images to fit your web page correctly
- Always compress your images to reduce the file size
Please share your comments below:
- What tools and methods are you using to optimize your images?
- What amount of reduction in size have you achieved?
- Do you have any other tricks and tips to share?