Size Matters: How to Optimize Your Images - Azahar Media
How to Optimize Your Images

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. 

More...

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:

  1. Poor internet connection
  2. The web host server is having problems
  3. 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:

  1. Resize your images; i.e. use the correct dimensions to fit your page
  2. 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:

Recommended image widths to fit the theme dimensions:

  • Featured image on a page with sidebar: 730px​
  • Featured image on a full width page: 1080px
  • Thumbnail style featured image: 220px
  • Static background page section: 1920px
  • Logo Image: 200px x 50px

​Quick note: ThriveThemes generally only quote image width, rather than width and length. This is because they believe that width is the only dimension to get correct.

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. 

Optimize Image 1 | azaharmedia.com

When you hover over the link in this bottom box, you will see the following pop up:

Optimize Image 2 | azaharmedia.com

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.​

Optimize Image 3 | azaharmedia.com

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.

Optimize Image 4 | azaharmedia.com

Tip: Make sure you keep the aspect ratio ticked!

There are also dedicated resizing tools such as this one for Windows and this one for Mac OS.​

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!

Click to Tweet

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!

​TinyPNG

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.​

Optimize Image 5 | azaharmedia.com

Wow! That's a 72% reduction.

If only weight loss was so easy!!

TinyPNG have also developed a WordPress pluginI 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

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:

Optimize Image 6 | azaharmedia.com

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:

Lossy: When you decide to sacrifice just a small amount of image quality (unnoticeable to the human eye), you will be able to save up to 90% (!) of the initial file weight. Lossy optimization will give you outstanding results with just a fraction of image quality loss.​

Lossless: This mode will push your images to the extreme without changing a single pixel. Lossless option is perfect when image quality is the most important factor. Keep in mind that this mode is more time consuming.

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:

Optimize Image 8 | azaharmedia.com

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:

Optimize Image 7 | azaharmedia.com

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:

Image

Original

TinyPNG

Kraken

Thrive

1

79 KB

21.2 KB

21.35 KB

21 KB

2

17 KB

6.0 KB

6.39 KB

6 KB

3

179 KB

46.5 KB

46.34 KB

46 KB

4

95 KB

30.2 KB

28.92 KB

31 KB

Apart from the odd decimal place you can see that all performed in the same way!

Conclusion

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.

Summary

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?
David Hartshorne

I'm a freelance writer working with business owners, marketing teams, and digital agencies to create in-depth, actionable content that resonates with their audience. When I'm not writing about digital marketing, you’ll find me roaring for the Villa or chilling with a thriller.