Hey guys, as I’ve been working on mobile apps recently I had found the need to really reduce my image size that are displayed on the apps to improve loading speeds for users. By using a free image resizing program called riot (seriously… it’s free… no ads even!) I was able to reduce the size of jpeg, gif, and png files to so much less than they used to be that I started applying it to websites to reduce the image size in (often) incredible amounts. Like a picture that was 50k could become under 20k quite easily. It also does batch image file resizing for those who need that if you are trying to resize something like icons and not just individual pictures which you might want to overview one by one to make sure you don’t lose too much picture quality in the process.
As some of you might know, page loading speed is a factor in Google currently and one of the tips for doing so that I shared in my previous post on wordpress website optimization for speed is to use a plugin called wp smush.it. However by using riot you can reduce your image size WAYYY more and not just “compress it” which is what most software out there do! And it’s convenient for resizing it at the same time. I tend to reduce my pictures as low as possible before it loses it’s quality and then save that up, picture examples below.
Also while designing a theme for my website using artisteer (which just released version 4.0 and I honestly love it, it adds sliding headers and more customization), I usually reduce the file size of certain elements like the header with riot. Most of the options for formatting are easy to understand and I put some examples below for the ones I use almost all the time.
So two image example below
First off, .png for icons, simple headers & images with mostly just text.
And .JPEG which everyone is familiar with, especially for actual human picture. PNG compression does a bad job for these usually. I lose too much quality because “real life” pictures have WAY too many colors for .png compression to preserve enough quality while actually getting a reduction in size.
Converting an image to .PNG and reducing it’s size drastically
For .PNG which I often use for simple images (not pictures) or text images I always use “best compression” and put the “reduce colors to” usually between 4 and 20. Some images or icons with more colors can go up to 64 and have a LARGE reduction in size while looking exactly the same. I love the .PNG compression the most, done properly you cannot see a loss of quality yet reduce the size by anywhere up to 90%. Below you can see a 24kb .jpeg image converted to .png and being reduced to 4KB (nothing!).
Also, this actual .jpeg image was initially 150KB and was reduced to 60KB :). Which leads me to….
Reducing the size of a JPEG picture (and convert it to .jpeg from another format if you so choose)
So JPEG are usually pictures with a LOT of colors that you want to keep. So it’s best to just reduce the “quality” % to as low as you want while preserving the quality to the human eye.
And this actual image was at 170KB when I took the screenshot… I reduced it to 80KB.
Do it! Everywhere!
This is very fast to do and apply to all your pictures from now on. For my mobile app it was essential to do this to make it load as fast as possible and I put this towards my SEO sites to make them faster so visitors have more chance of loading the website and because Google admitted that they look at site speed nowadays as a ranking factor. Also, now that I’m starting PPC I definitely want to not waste any clicks I get because someone finds my landing page too slow to load!
Time Flies so Fast!
Alright I got some guest posts to send for backlinks to my new SEO sites and then it’s on to doing some new PPC campaigns :). I’m pretty focused on building my other sites besides LB and making money well.. not in the “making money online” niche but if you guys have any subject suggestions for future blog posts feel free to share, I’m a bit out of topics to write about for now as I test test test. I love writing for the thelinkback.com though… Also for fun I’m trying to compete against Becker for ranking this commission inception review post which is some product launch in the future. Basically seeing if the authority on the LB will make it easy to get and stay on page 1 when commission inception launches. It’s a great idea that he shows in this video that you might want to leverage in your niche.
Hey Alex, just discovered your site because I am also starting a blog trying to document my adventure traveling the world while daytrading.
I just wanna tell u about the 2 free softwares I use for pictures;
one is actually made by microsoft , and is basically just an addon to the context menu, so that in one right click you can resize lots of big photos almost instantly
The other software im a big fan of is called IrfanView, wich is also completly free, and has a lot of options like photoshop but so much simpler to use.
Those will probably reduce the image size but it’s mostly by “compressing” it. I used them originally but I wanted something even stronger which is how I discovered RIOT. RIOT goes a step further because you can manually reduce the QUALITY of the image until it’s actually noticeable to the human eye if you reduce it further. And THEN you compress it, either using riot (which does it automatically as part of the process) or another software like the ones you mentioned.
I think this is applicable to Windows XP users because for me using Windows 7 there seem to be no options to resize images.
You can try Paint.NET open source software because it allows you to compress on fly, that is playing with image quality while being able to see how it directly impacts on end result.
Awesome, I’ve been looking for something like this because I noticed the super slow loading speed on my site. I’ll give it a try.
Thanks a lot!
You can do it with convert in cygwin, it’s included with imagemagick