Making images smaller
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 :)
Recent Comments
25
Thanks, David, Sharlee, and Bo. All of this stuff is Greek to me right now, but I'm hoping it will make some sense once I start using them. I'm your world's worst technoidiot, but I'm struggling along. Carol
If you follow Kyle's Get Started Certification Course and/or his Affiliate Boot Camp Course, that will put you way ahead of so many other people doing this.
Cheers.
Hi, David. That's what I'm doing. I'm on Lesson 6 of the 2nd course. Have been stuck there because I was having difficulty with images. By the way, I have an image from Site Content on the post I'm currently writing that is too big. Do I need to remove it from the post to make it smaller, or can I do it where it is?
For the moment, I think if I were you, I think I would focus on more content, and insert the images that you add via Site Content.
You can revisit this later, however, if I recall correctly Kyle said that it was more important to add content.
Use the image from Site Content for the moment. Images help break up an article into smaller clunks and makes the article more pleasing to the eye.
I have just used Site Content to help me generate a 1520 word article following the format that Kyle suggested (in course 2, lesson 3). I have published it without images, and edited that article in WP a bit. Within the next day or two, I will be adding images to it directly inside of WP, although I will most likely find the images inside of Site Content.
And in the meantime, Google might rank it.
Rome was not built in a day.
I am working my way through the Certification course, and my assignment that I am working on is adding images to all the posts that I currently have on my site. I currently have 4 published articles without images. I am working on a review of different brands of ballroom dance shoes that I have not published yet.
I agree, images add a great deal of interest to a site, and I need them on mine. I have no problem with that at all.
I'd love to use the images within Site Content. It would make my life much easier. However, my site is ballroom dancing, and my message is that anybody can do it. (social dancing). I don't want my visitors intimidated thinking they have to dance like "Dancing With the Stars".
The images in Site Content are too professional and would be intimidating to someone who says they can't dance and are afraid to try. (I know...I used to be one!) They are people dancing in "Arthur Murray" style or in competition, which is not what I need to portray. I have found images on other websites of social dancers, which is what I need to use.
I need images of "average" people dancing and logos and pics of different brands of dance shoes that I am reviewing. I think I have permission from Capezio to use the images of their shoes because I am an affiliate of theirs, but don't know about the logo.
Have not been able to get my email from my site to find out if they have responded to my email requesting permission. It keeps saying my password is wrong, even when I use the one Site Support sent me.
As to resizing the one image that I have successfully added to the new post I'm writing, I think it is too big for the post and need to reduce the size. That's where this whole thread got started. Do you know if I need to delete it from my article, resize it, then put it back? Or can it be done with it on the post already?
Thanks for your comments and expertise, David. I'm going to use the directions on Site Content that you sent me to decrease the image in size. Also following you.
Carol
Hi Carol,
Regarding your email, I suggest that you use 'copy and paste' to try to access it again, making sure that there are no blank white spaces before or after the password. That got me at least once and I was pretty sure that there were no blank white spaces before or after the password.
Then after you have retrieved any emails, consider using an email forward to say a Gmail account. That is what I did a while back and have not looked back.
To do this, I suggest you look at the following: Create Your Professional Website Email Address as Email Forward to Your Gmail I reply later regarding images.
Cheers,
David
Hi Carol,
I just wrote a blog at WA to answer your image question: Adding images to WordPress Posts using SiteContent and WordPress Cheers,
David
Hi Carol,
I wrote another blog at WA to answer your image question. This is easier to implement from your point of view that the previous blog I mentioned. Changing Image Size inside of WordPress Cheers,
David
After the 3rd time of being told the password was wrong, I did cut and paste it, and got my emails. I think having it forwarded is a good idea. Thanks, David.
Good tools, and a fantastic explanation. I will most likely stick with how I do it, just because I am happy. But if anyone asks I will show them this.
Thank you for your kind comments.
When I do stuff with images, I have a habit of making the file sizes smaller when I can.
A recent example:
Original image was 712 KB.
Cropped it to show only what I wanted brought it down to 69.9 KB.
Changing the image file type from png to jpg brought it down to 11.8 KB.
The ending file size for the image was 1.66% of the original size.
The ending file size for the image was over 60 times smaller than the original size.
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!
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.
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.
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!
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!
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.
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!
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?
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.
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.
See more comments
Thanks! Great explanation!
Thanks. Appreciate you taking the time to let me know.