Making images smaller

Last Update: February 02, 2018

One of the many questions I was asked earlier was basically how to make an image smaller. In this context, this question was related to making the image smaller, ie in making say a width of 500 px become say a width of 100 px.

A complex way needed to be made simple

I had in mind a complex way of doing this that was going to be a long technical guide.

Before commencing, I decided to do some additional work to see if there is a smarter more effective way of doing it. And I am thrilled and delighted to say that there is.

Using Jaaxy Lite to do keyword research

I decided to do some keyword research using Jaaxy Lite within my Wealthy Affiliate account. I used "make images smaller" as my keyword to search. I saw "online image resizer" in the list that it created.

Using my favourite search engine, Google, I looked up "online image resizer" and saw a few options.

Using Site Content to obtain an image

Next, I required an image to work with. I decided to obtain an image using the over 1,000,000 images available within Site Content within my Wealthy Affiliate account. I selected Site Rubix, Site Content, Selected Create New, Selected Start a Blank Document, then underneath Title goes here, there are a few icons. I selected the Image icon, and then entered my search item in the search images bar, and selected a suitable image.

Using Offline tool called PIXresizer to resize that image

Please go down a few sections to see some results with this tool.

Using outside tool to resize that image

Using imageresize.org (Disclaimer: I have no association with this organization), one of the top entries from my earlier Google research. I uploaded my suitable image to it.

They have a number of options, so I decided to do two things. One, reduce the width and height size of the image by 25%. And two, to change the image type from png to jpeg.

Using functionally within that website, I ignored their online ads.

Resizing image results

I was able to achieve both of these goals as explained below:

The "original" file type was image/png, its file size was 237 KB and its dimensions was 751 x 431.

The "resized" file type was image/jpeg, its file size was 19 KB and its dimensions was 563 x 323 (25% smaller).

A great unexpected bonus

An unexpected bonus and a great performance consideration, is that the file size decreased from 237 KB to 19 KB. The new size is just over 8% of the file size of the original file. So loading this image is going to be faster, way faster.

I am thrilled that I was asked the question about how to make an image smaller.

An alternative is to use an offline tool. This is discussed next.

I discussed an offline tool to revise that image next, in case you prefer to use that, rather than using the above online tool. It is always good to have options. :)

Using Offline tool called PIXresizer to resize that image

Using PIXresizer (Disclaimer: I have no association with the organization that develop this), another WA member @TeamIceCream mentioned that they have been using this for many years as it can convert image files to other image type and resize images. So I decided to give it a go.

I did the same things with it, as I done with the online option. They have a number of options, so I decided to do two things. One, reduce the width and height size of the image by 25%. And two, to change the image type from png to jpeg.

Resizing image results

Using functionally within that tool, I was able to achieve both of these goals as explained below:

The "original" file type was image/png, its file size was 300 KB and its dimensions was 751 x 431.

One option with this tool is that the quality of the image can be changed within the tool, the higher this is, the bigger in KB the file is. I selected values 20, 50, 60,75 and 90. The default value using the tool is 90. With the image I was using, the quality value of 20 and the quality value of 50, in my opinion left something to be desired.

Using the original image file of PNG in each case, I selected the quality value of 20.

Using 563 x 323 (75% of the original file size in width and height), the image file size was 7 KB. The quality in my opinion left something to be desired.
Using 751 x 431 (100% of the original file size in width and height), the image file size was 12 KB. The quality in my opinion left something to be desired.

Using the original image file of PNG in each case, I selected the quality value of 50.

Using 563 x 323 (75% of the original file size in width and height), the image file size was 12 KB. The quality in my opinion left something to be desired.
Using 751 x 431 (100% of the original file size in width and height), the image file size was 20 KB. The quality in my opinion left something to be desired.

Using the original image file of PNG in each case, I selected the quality value of 60.

Using 563 x 323 (75% of the original file size in width and height), the image file size was 14 KB.
Using 751 x 431 (100% of the original file size in width and height), the image file size was 22 KB.

Using the original image file of PNG in each case, I selected the quality value of 75.

Using 563 x 323 (75% of the original file size in width and height), the image file size was 17 KB.
Using 751 x 431 (100% of the original file size in width and height), the image file size was 28 KB.

Using the original image file of PNG in each case, I selected the quality value of 90.

Using 563 x 323 (75% of the original file size in width and height), the image file size was 28 KB.
Using 751 x 431 (100% of the original file size in width and height), the image file size was 47 KB.

For the future, I will be using this tool to resize images and change the file type to JPEG when appropriate because the file size is so much less. I will probably use a quality value of 75%, assuming that similar results to the above would be achieved for other images.

Know that some images when compressed do not get smaller

When compressing and re-sizing images, make sure that you record the file size of the image before and afterwards. Sometimes when I resize a small png image to a small jpg image, the small jpg image's file size is larger than the small png image's file size. So nothing is gained by using the jpg file.



Happy Days. :)

If you liked this, feel free to push the "Like This” button :)


Join the Discussion
Write something…
Recent messages
TeamIceCream Premium
I am really thrilled that you enjoy this little program David!

One of my favorite options that I use often, is to do multiple images in one go. That saves A LOT of time.

Not only does the image load quicker for the viewer when it is smaller, but not everybody is so fortunate to be on fibre internet or to have unlimited internet access.

I remember that I once visited a website that had very valuable information, but wow, it was HEAVY on resources! I am on mobile internet (thus both slow and limited) and going to make a cup of coffee while waiting for every page to load (not exaggerating), was just not an option.

Thank you for the trials you've done to give the results - amazing to think that a picture can go down from 300KB to 28KB, by just using a different file type (jpg in stead of png) and a quality value of 75.

Thanks for the valuable information!
Reply
DynamicDavid Premium
I been in discussions with other WA members in different threads on this, that maybe you wouldn't be aware off. In summary:

Some image types use lots more space of disk space compared to others.

For instance, in the article above, I had an image which was an image/png file. I decided to convert the image to an image/jpeg file with a quality value of 60, leaving the height the same length and the width the same length. This particular disk file size went from 237 KB to 22 KB.

That is over 10 times smaller. Downloading that image on a webpage would be 10 times faster (the part downloading that image, not the rest of the webpage). This would allow that complete page to be shown to the viewer quicker.

I am not an image tech, however I can't visually see the differences between the 237 KB image/png file and the 22 KB image/jpeg file.

I therefore assume most people would not notice the image difference, but would notice the download difference, especially if the webpage had a few.
Reply
DynamicDavid Premium
As mentioned a few days ago, I did some research with the offline tool PIXresizer. One of the options with that tool is that the quality of the new image can be 'high', however it is not compressed as much. If you compress it more, the quality of the new image can be 'low'.

I used the same original PNG image, and I used the same sizes in length and width as earlier. I also converted each image to JPEG. I used quality of 20, 50, 60, 75 and 90.

I updated the article above and this information along with the detailed results are above.

The savings in image file size are pretty impressive. And should help performance when adding images to your site. Performance in this case should help to show the content of the webpage quicker. No one like waiting around.

Thanks to WA Premium Member @TeamiceCream for informing me about this option.
Reply
TeamIceCream Premium
Dearest David - I am so thrilled that you like that little program too! It is very kind of you to have given us credit too. Glad that it could help!
Reply
TeamIceCream Premium
Hi David, for many years we've been using a small little program called PIXresizer. It is a "no frills" program, but it can convert to a different type of file, resize and the feature that I like most is that it can do a whole folder of photos at once.
Yes, the size can often dramatically reduce, depending on the file type.
May you enjoy a lovely day!
Reply
DynamicDavid Premium
Thanks.

I might do some research on this option later. It would be good to have something on my laptop that just does this work when needed.
Reply
TeamIceCream Premium
I always say that I'm past my teenager years, so I look past "eye candy", functionality and size is what matters to me, and this program doesn't take much space on my overly full laptop and really works great for me - used it for well over 10+ years, I would guess.

May you enjoy a lovely day David!
Reply
CynthiaCrump Premium
You sound very knowledgeable, I would really love to follow you for advice!
Reply
botipton Premium
There also plugins that will do it on the fly on a WordPress site
Reply
DynamicDavid Premium
Doing stuff like this on the fly means that that code has to be performed every time those images are going to be used. That is using up valuable computer resources when you want your images and the rest of the webpage to be displayed as quickly as possible on the viewer's screen.

I currently use the Word Press "EWWW Image Optimizer" plugin myself. I don't know if it would reduce the size of my png image files into a jpeg image, and then send the jpeg image "over the wire" to the viewer's screen automatically when my code refers to that png image. Do you by any chance?
Reply
botipton Premium
With many of them it does it when you add the pictures and then saves the reduced picture to send over the wire.

So it is not getting reduced when it is called up it is stored as a smaller picture and is the one served. It is the same as what you are doing but just without you having to take direct action to do it.

I do not know about that one plugin but several others do that so I assume that one will also.
Reply
DynamicDavid Premium
Thanks.

I "get in theory" how the plugins do it, if the image is the same size (I mean height and width). My understanding is that the plugins do some work to reduce the file size from say 320 KB to say 150 KB.

What I do not get is if you add code in your WP article that says width 50 px, height 100 px where the original image is say width 500 px and height 1000 px.

"Usually" the image of width 500 px, height 1000 px is sent over the wire, (and lets assume that the original file size went from say 320 KB to say 150 KB ) and the device at the other end does the 'resizing', so extra data is going over the wire and additional processing time/resources are used at the viewer's end, thereby taking longer to display everything to the viewer.

If you used the approach I outlined:
Original size: width 500 px, height 1000 px, file size say 320 KB.
Lets say the approach I outlined brought this down to say 150 KB. This is all theory, actual real results might be different

Lets say that a WP Plugin does the same thing, i.e. brings the file size down to say 150 KB.

Now in a WP article, the image is referred to, and it is specified that the width is to be 50 px and height is to be 100 px. So 150 KB is "sent over the wire" and the viewer's device does the resizing work.

Now, assume that when you wrote the article, you decided to adapt the approach I suggest, and you also generated the image adapting the approach I suggest for width 50 px and height 100 px and the file type to be jpeg. And the file size became say 10 KB.

In the WP article, this resized image is referred to. So 10 KB is sent over the wire, and the viewer's device does not to do resizing work. Sending 10 KB is much better than sending 150 KB. Again, this is all theory, actual real results might be different.
Reply
Top