Image Optimization: An analysis of the best free tools
When it comes to optimizing images for your website, it’s important to find the delicate balance between preserving the beauty of the original image, and making it small enough to load quickly over the internet.
As a graphic designer turned SEO, I feel like I have a unique perspective on this issue. On one hand, I understand how you want to make your pages and blog posts look beautiful. On the contrary, it’s important for your pages to load quickly not only for online ranking but for the user experience of your website’s visitors.
When starting out, many young entrepreneurs can’t afford the latest and greatest paid tools for every task. With this in mind, I’ve done some research and have looked at the some of the best free image optimization tools that exist on the internet.
My goal was simple. I was looking for a go-to tool that I could rely on to give me great results and was simple to use. While they won’t match the results you might find in Photoshop, you’ll be pleasantly surprised with what’s out there and your potential results.
Oh yeah, and they had to be free baby!
To start with, I had a picture of one of my dead sexy link building kitty named TiChee (Short for ‘Tiger-Cheetah). While he’s certainly a pain in my ass and known to pee in the most inappropriate places, he gets the job done. Here we see him in all his glory in a 196 x 300 JPG picture with a file size of 59 kb. This will be my test image.
I chose this particular graphic of TiChee because of the level of detail is his sexy fur as well as the detail and reflection on the counter in the foreground and background. When reducing the file size of the image, I was looking to maintain an appropriate level of detail and retain the integrity of the image and all of it’s luscious detail. In the interest of not posting the same image 10 times, I’ll forgo showing the same image over and over and instead relay the final file size after optimization.
Are you ready to get started? Then let’s do this!
First off, these guys have 3 of the top 10 results for ‘online image compressor’ with various, identical sites. I don’t know whether to be annoyed or impressed, but I digress. The interface is actually quite simple as all you need to do select a file to upload, and the site spits out a compressed image.
I noticed that there are two types of these compression sites, one with options and one without. CompressJPEG offers no options and just gives you a final file after they do their file reducing magic.
That being said, the final output is a 14k file with a -72% reduction in size. If we judge the quality of the two images, you’ll notice it still looks good. The things that I see are clarity in the shadows by the paper towels as well as the detail on the granite countertop. To the untrained eye, there is virtually no difference between the source image and the reduced file given to us by CompressJPEG. All in all, a simple to use site with an excellent final result. Moving on!
The second site I tried that was TinyPNG. They have an attractive site and the ability to drag your file straight from your desktop into your browser window which is a nice touch. Again, we have a site that doesn’t give many options in regards to file size or output quality, but this is made up for by the sheer simplicity of using the service.
Unfortunately, with that simplicity comes a larger file size. While TiChee started out at 59kb, TinyPNG only managed to save us 57% with a final output size of 25.6kb. The image quality is, of course, going to be as good if not better than CompressJPEG, but we are paying for it with a file that is almost 100% larger.
This isn’t the end of the world in regards to loading time, especially with fast home internet but for mobile, every kb counts. By now, it should be clear to all that most people are searching your site from a mobile device and paying for bandwidth to find you, the least we can do is have our site load quickly. We want to get the lowest sized file with the highest quality image. It’s a delicate balance, and unfortunately, TinyPNG won’t do.
Here’s the first example of a website that gives us a few options in regards to our file size and the amount of compression we desire. While the site is as uglier than Hillary Clinton’s checkered past, it serves it’s purpose as a functional platform. I absolutely love the ability to dictate the amount of reduction in size within the web page. This allows us, developers, to get our hands dirty and try several different amounts of reduction. Different people have different needs, and some might be looking to squeeze every last drop of digital weight out of their images. In my case, I went for a 50% reduction and was pleasantly surprised by the result.
To be specific, we’ve gotten little TiChee all the way to a measly 7kb and an 87.6% savings in file size which can be pretty much passed between two Dixie cups and a string. This is great news, and JPEG Optimizer is undisputed winner thus far in regards to how small we can get our image while still looking good. The picture quality was great, and the file was so small, it would load quickly even on an ancient 56k modem.
While not the best-looking site, Image Optimizer at least has a clean and unobtrusive home page. Thankfully this allows us to get right to shrinking our image and downloading the final result.
Unfortunately, I’m out fo kind words to say. While they have a nifty drop-down menu which gives a variety of options, they all seem to produce the exact same result. No matter how many different button combinations, I ended up with my image having the EXACT SAME FILE SIZE. How can this be? It’s one thing to do a poor job of shrinking down a picture, and it’s another thing entirely to do nothing.
As we’ve seen thus far, there are several good-to-great options available and to have a site which is taking up space on the first page of Google and not providing any value whatsoever just plain stinks. Let’s move on…
A funny thing about these free sites, they don’t offer much in the way of modern web design trends. Almost every site on this list looks like it was built on fiverr and the owner didn’t opt for the $5 upgrade if you catch my drift. That said, it’s functional and comfortable to work with the interface.
An added benefit is that you can help us this site to resize the dimensions of your image should you have the need. IN other words, the service not only optimizes your image at its current aspect, but it can also change width and height to give you an entirely different image size altogether. This is perfect if you find your graphic appears too small on your web page layout, and you’d like it a bit bigger.
I’ll suggest not to alter the dimension of your images too big from their original file size as they can and will most likely appear pixelated and unattractive. If you find your pic too messy and blurry after you work to change it, either start from scratch and try a smaller size or pick a better image to start with.
As far as the amount of reduction we get from the 50% setting on resizeimage.net, it keeps pace with the current leader, JPEGoptimizer, while providing more value and features. If you add it all up, we have to give the crown to resizeimage.net. Kudos on the good work fellas!
Since I’ve gone over some of the simpler sites which offer just one primary function (resizeimage.net notwithstanding), I’d like to touch briefly on the sites which aim to provide a fuller, desktop-like experience.
Sometimes, you just need to do more to these images like add text, shading or some color/image correction. With this in mind, here are the top online image editors that double as an actual Photoshop replacements. These sites are are a blessing from the universe who those who might need basic-to-medium editing skills, and don’t want to get into a contract and a monthly plan with Adobe.
This web application is a slick and feature rich alternative to Photoshop. Many of the things you would need to get done as a marketer who requires some image work can easily be handled on this site.
In regards to how well this service has optimized our target image, it didn’t fair quite as well as some of the standalone sites at the 50% setting. Despite this, the difference, a measly 1.5k, is easily remedied by the vast amount of things you can do to your pictures once you are in the Pixlr editor.
As far as features are concerned, you can do most common stuff like level adjustment for when you images are too light or dark, saturation settings for when your picture needs some extra richness as well as cropping, rotating and distorting your image in an endless amount of ways.
As an aside, most bloggers like to add a featured image to their posts. Pixlr allows us to include some great text options and font variations to our graphics to produce some high-quality results. I will add that as a former full-time designer who knew his way around Photoshop, the text editor needs some work and is a bit unintuitive.
For the price you’re paying (nothing), you’ll be hard-pressed to find a better option if you fancy yourself a power user or simply someone who needs a few more image editing options.
Another Photoshop competitor comes in the form of Sumo Paint. In all honesty, I won’t bore you by repeating myself over and over again so take everything I said about Pixlr and applied it Sumo Paint.
As to how they might differ, you’ll be very comfortable in the Sumo Paint interface as it closely resembles that of Photoshop. The same colors and layouts are used, and you weren’t working in your browser, you might think you were running a slightly older version of Adobe’s flagship product.
I got the exact same result in my compression test as Pixlr and will use the same argument as to why you might use a service like Sumo Paint over a site like resizeimage.net. As an added benefit, the text editor is much more intuitive than you’ll find on Pixlr but the tradeoff is that you have to deal with some ads on the site while you use their service.
The advertisers don’t bother me in the least, and since you are using a browser, your Ad-blocking extension disables the ads.
A simpler and less feature-rich approach to online image editing. Picmonkey instead focuses on simplicity and an attractive icon-heavy interface which makes the web app simple and intuitive.
While the options aren’t trying to replicate a desktop experience, I did find myself enjoying my time working with PicMonkey and would recommend it to anyone who needs a bit more functionality.
Regarding optimization, the options are limited to 3 sizes and all of them are reasonable but not optimal if we are looking for a dramatic improvement. If this is the primary concern, I’ll have to give this site a pass.
I’d use the free version of this site again if I needed some touchups to a pic or needed some quick text effects. Without sounds like a scratched record, I really enjoy the user interface and applaud the deign team and the feeling they have created for the site. It’s all very modern and 2016 looking.
I give Sumo Paint the Lickchop-paw-stamp of approval for providing a pseudo-desktop level experience within your browser for free. While I give PicMonkey the nod for keeping of brief, lovely and easy to use.
So there you have it marketers, a quick and easy guide to getting your pictures looking good at a reduced file size.
My final recommendations are Pixlr for overall image editing goodness in an add free environment and resizeimage.net for the best and simplest option for those looking for a no-frills image reducing experience.
Did I miss anything? Let me know in the comments below so I can update this post. In the meantime, here’s to keeping the web full of small and good looking images!
If you found this post interesting, please like/share, retweet to others who might find it valuable.