Easily Boost Website Speed By Reducing Image Sizes This Unique Way

This post contains affiliate links. Which means I will make a commission at no extra cost to you should you click through and make a purchase. Read the full disclosure here.

Did you know that reducing image sizes is the 2nd most important step you can take to boost your website speed? Unlike changing host providers (which is often considered the biggest factor), it is something you have complete control over. Switching or moving host providers is subject to costs, downtime and the sheer involvement required to move everything.

Easily boost website speed by reducing image sizes this unique way

Reducing image sizes can be completely free, but not all methods are created equally. If you want a quick and dirty compression of your images then there are lots of tools which make it relatively easy and offer an average level of compression. But every second counts when it comes to your page load meaning you should try to get the best compression possible whilst weighing up time and cost to implement.

I recently discovered a unique and superior way to optimize my images – one which I am going to share with you today. So you can reap the rewards too.

Just imagine having the ultimate method to optimize all your images. One that meets all the requirements of being quick, easy and free. Plus, it’s no more difficult than using TinyPNG once you know these secret settings!

Oh, and did I mention you’ll get superior results than if you used TinyPNG? Keep reading and I will reveal all!

 

Why Reducing Image Sizes Are Vital For Your Website

You may have heard this before. But reducing image sizes has a huge potential to cut down on your page load speeds because they often make up the majority of data downloaded when displaying your web page.

Your page load speeds are a vital factor for the success of that page. And therefore your entire website for several reasons.

Google as one of the most popular search engines uses your page load speed in its calculations for page ranking. Slow pages are ranked lower. So if you want to rank higher and potentially get more organic traffic to your site then you want your page speeds down for improved SEO.

Collection of office stationary including laptop with website loaded with statistics

More and more people are using their mobiles to browse the internet. This means users can have slower connections and lower data limits. This makes keeping your overall page size down important for their experience and to keep bounce rates down.

Whilst keeping your page load speed down is vital for mobile users, it is imperative to keep the page load speeds down regardless of device. Every extra second increases the chances of users aborting the request because they felt it was taking too long. How many times have you closed a page that took forever to load?

Finally, by keeping your image sizes down you can reduce space taken up on your host’s server. Or your local drives if you store any copies on it. It will also keep your bandwidth down.

Fact: Even if you are on a hosting package which says “unlimited” keeping file sizes down will help reduce any problems with keeping your website up because “unlimited” is never actually as “unlimited” as they make out. If you get what I mean.

 

A Breakdown Of Methods For Reducing Image Sizes

The blog post I wrote recently for the 42 Jetpack modules had 43 images created for it (a few were removed from the final draft for clarity).

Because I had so many images I wanted to ensure I was reducing image sizes as much as possible. So I did a few comparisons.

Uncompressed

TinyPNG

IrfanView

IrfanView + TinyPNG

2.58 MB

0.806 MB

0.600 MB

0.584 MB

69% Reduction

77% Reduction

77.5% Reduction

As you can see, there was a difference of 206 KB between TinyPNG and IrfanView. But only a measly 16 KB when combining the smallest files from both tools. Barely enough to make a 0.5% difference. By using both tools or just IrfanView the overall decrease in size was 77% which equated to a total decrease of at least 1.98 MB.

A post by YOTTAA did a comparison of different levels of image optimization and page load speeds. Finding a reduction of 1.1 MB in image size decreased the page load speed by 0.7 seconds. In this example of my Jetpack Module post, since we are closer to 2 MB it would suggest a 1 to 1.5-second decrease in page load time.

Whilst this doesn’t seem like much, every second counts according to research statistics:

“As page load time goes from one second to five seconds, the probability of bounce increases by 90%” Google/SOASTA Research, 2017

“53% of visits are abandoned if a mobile site takes longer than three seconds to load.” Think With Google, 2016

Reducing Image Sizes & Image Quality Comparison

Ok, so you can get smaller sizes by reducing image sizes in IrfanView. But is it at the expense of image quality you wonder? Nope! There is no noticeable loss of quality using the below method with IrfanView. But there is a difference in quality when compressed in TinyPNG.

Let’s look at some examples.

Example 1

Text / Graphic Based Image

Original

(56.2 KB)

JPG

Reducing Image Sizes Comparision Example 1 using the original image
IrfanView

(10.4 KB)

PNG

Reducing Image Sizes Comparision 1 using IrfanView optimized image
TinyPNG

(18 KB)

JPG

Reducing Image Sizes Comparision 1 using TinyPNG optimized image

Here you’ll be hard pushed to see any difference between the original and IrfanView images. If you compare the IrfanView image to TinyPNG though, the TinyPNG image is overall slightly blurry. In particular the ‘Learn more’ and the blue button sliders deteriorate the most.

 

Example 2

Mix of Text / Graphic / Photo Image

Original

(138 KB)

JPG

Reducing Image Sizes Comparision 2 using Original uncompressed image
IrfanView

(36 KB)

PNG

Reducing Image Sizes Comparision 2 using IrfanView optimized image
TinyPNG

(32.2 KB)

JPG

Reducing Image Sizes Comparision 2 using TinyPNG optimized image

With this comparison, there is a significant loss of quality when using TinyPNG. IrfanView’s image size is slightly larger though.

 

Example 3

Photographic Image

Original

(209 KB)

JPG

Reducing Image Sizes Comparision 3 using Original uncompressed image
IrfanView

(78.3 KB)

JPG

Reducing Image Sizes Comparision 3 using IrfanView optimized image
TinyPNG

(91.KB)

JPG

Reducing Image Sizes Comparision 3 using TinyPNG optimized image

This last example I have a hard time noticing any difference between all 3 images. Can you spot anything? Nevertheless, IrfanView offers the smallest file size.

Note: When I am showing image examples for comparison of quality. I have used the actual image files. I have not in any way compressed them, resized or altered them for this blog post. Because I don’t want anything to affect the file size or quality that you see. I want to introduce as few variables as possible even at the possible expense of page load. How ironic!

Office stationary viewed top side on a yellow and blue split background

In these examples, I’ve tried to use a variety of images. As what the image consists of can also affect how best to compress. For example, JPG often offers smaller file sizes for images with mostly photographic elements. Whereas images with mostly text, white or solid elements compress smaller as PNGs in my experience. When it comes to both these types of images IrfanView wins.

Images that have a mix of text, graphics, white space and photographs are much harder to compress optimally. You can include them in batching to PNG with IrfanView which offers better quality but sometimes the file size is bigger than TinyPNG. Alternatively, TinyPNG sometimes offers smaller file sizes with a varied amount of quality loss at the expense of another batch of processing.

Which method is ultimately better depends on you and your preferences. However, the marginal reduction in file size of 0.5% (16 KB) seems weak when it comes at the expense of your image quality and time.

 

IrfanViewer can shrink your website images more than TinyPNG for #free & the same amount of effort #seo Click To Tweet

 

How You Can Take Reducing Image Sizes To The Next Level

So here’s how you can reduce your image sizes to output smaller than TinyPNG but with less image quality loss! And did I mention it’s just as fast?

Firstly, if you don’t have IrfanView installed you can find it here. Be sure to check the notes and get the 64bit or 32bit depending on your needs. For the sake of this post, I am using the 64bit version.

The installer is straightforward so you should be fine with the default options. There are no sneaky extras to worry about.

Once you have IrfanView installed you can start reducing image sizes.

 

Open IrfanView.

Click File > Save for Web… (PlugIn).

A new window will open.

On the left side is the original file, the right side has a comparison of what the file will save like with the selected options.

Reducing Image Sizes Save For Web Comparison Screen in IrfanView

 

Processing Images Made Of Text / Graphics

Let’s start by processing the bulk of our images that are made up of mostly text and graphics. I also recommend including images that contain a mix of text/graphics/photos. Like these:

Reducing Image Sizes Text Graphic ExampleReducing Image Sizes Text Graphic Photo Example

Below the two image comparisons click on PNG.

Reducing Image Sizes Image Type PNG button in IrfanView

Set Color reduction to Optimal 256 Colors Palette.

Tick Best compression (slow)

Make sure the Color quantization algorithm is set to Xiaolin Wu color (fast)

Reducing Image Sizes Save For Web PNG options in IrfanView

Our settings are all set. Have a quick check that you are happy with the quality of the image by using the magnify settings in the middle of the screen. (This is optional and can be checked later if you like.)

Also, the file size for the optimized image should be significantly smaller than the original if it wasn’t previously compressed.

 

How To Batch Multiple Images For Reducing Images Sizes In IrfanView

If you are just processing a single image then you can simply hit Save or File > Save as.

It is far more likely you are processing multiple images if you are optimizing them for a web page or blog post.

In which case click Batch.

It will prompt you about unloading the current image.

Click Yes.

Another window will pop up, here you can drag and drop any files you want to optimize.

Reducing Image Sizes Batch Screen in IrfanView

Click Settings and make sure to untick Overwrite existing files.

Click Apply to save any changes.

At the bottom of the window is the folder where the output files will be saved. To change it click the button and browse to the folder. Or you can paste the path in by copying it from the top bar in Windows Explorer.

Once you click Start the batch will run.

It will give you a brief summary of the reduction % and even for 43 images it only took a few seconds. In comparison, TinyPNG takes 3 batches to process 43 files since you can only process 20 files at a time. Each took about 2-3 mins.

You can find all your nicely optimized images in the folder you set earlier!

 

Processing Images Made Purely Of Photographs

The process can be repeated for your purely photographic images. Like these:

Reducing Image Sizes Photo Tiled ExampleReducing Image Sizes Photo Of Mobile Example

But instead of PNG, you should select JPEG

Set the Quality to 90%

And Encoding to Progressive

Reducing Image Sizes Save For Web JPEG options in IrfanView

 

Once everything is set you can click Batch to load and process files exactly like previously.

 

Reducing Image Sizes Using IrfanView Provides Superior Results

To sum up – by splitting your images into these 2 groups and processing as described here you should get some powerfully optimized images ready for uploading to your website or blog.

The entire process of reducing image sizes this way shouldn’t take you more than 15mins. Even if you are processing a lot of images like the 43 images described here.

TinyPNG will give you a decent overall reduction in image size, but it is far from optimal. The sizes you get back for photographic images and text/graphic images are almost always larger than IrfanView. Plus, with TinyPNG there is a loss of quality.

Whilst this loss of quality is unlikely to get noticed by most visitors. It is something you can spot when looking closer. Compared to IrfanView that can offer smaller file sizes and no loss in quality that is readily detectable. Are you able to see any?

So there you have it all laid out. A quick and easy method for reducing image sizes using this completely free software. No Photoshop required! And significantly better than just using TinyPNG with little effort.

Man in blue suit pointing at image on laptop screen
 

Still Not Convinced By This Method Of Reducing Image Sizes?

Well, how about this – you can download the original 43 images I’ve used for comparisons here.

I challenge you to go download the file (keep in mind it is 2.3 MB), unzip and try processing them yourself using the methods I’ve shown you above.

When you’ve processed the files open the original image using Windows Photo Viewer. Do not zoom in. Expand the window to fullscreen.

Then go and open your optimized image the same way.

The idea is that you can then Alt-Tab from one image to the next with a single Alt-Tab and because the images overlay perfectly it will be much easier for your eyes to play spot the difference.

This Alt-Tab comparison is far more accurate than looking at images next to each other. There are plenty of optical illusions out there that demonstrate your eyes can see colour differences when in fact the colours are identical because of surrounding context.

 

Can I Run Files Through IrfanView And Then TinyPNG For Even Smaller Images?

Stop! Whilst this may seem like a good idea there is nothing to gain from doing this. If you run any files optimized by IrfanView also through TinyPNG they will be no smaller in size than running through TinyPNG alone. And they will also be at the same level of quality or worse in most cases.

 

What about Photoshop?

I do not have access to Photoshop unless you want to count my ancient copy of Photoshop 7.0 (not likely!). I would love to compare and see if Photoshop can do a better job. Afterall, you would assume it would, being an industry standard and paid-for software, right?

If I ever do get access to Photoshop I will test it out and update this post. But for now, this is a comparison between two completely free tools – TinyPNG and IrfanView.

 

This method will significantly reduce your #image sizes using free tools & minimal effort! #seo Click To Tweet

 

 

Related Posts:

2 thoughts on “Easily Boost Website Speed By Reducing Image Sizes This Unique Way”

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Get access to the FREE Pinterest Cheat Sheet for Mastering your websites Pins today!Download