Size still matters on the web
With Full HD screens now a working minimum standard and even cheap smartphones packing at least five megapixel cameras, it’s easy to forget how much image size matters on the web. When someone creates a website, it’s incredibly important to take bandwidth into account.
While one large, high-resolution image might not pose a problem to a modern broadband connection, stuffing your site with high-quality assets can turn the browsing experience into a real drag. In addition to this, you also have to pay for the bloated hosting costs!
It’s not just webmasters who have to deal with images that are too big. If you’ve tried emailing some photos to someone, the total size of the email might come as a shock once you have to mail ten or twenty snaps. Which is why an online image optimizer is your best friend when you want to upload, share or host images.
These are four of our favorite online image optimizers with a bonus offline option included for when the internet goes down, but your deadlines don’t care! Also, be sure to read our previous post on other ways to reduce the size of the image.
Image Test Setup
Before we get into each image compressor, I want to setup how we did our test. It’s not very scientific or expanse; it’s just a series of compressions by different compression engines and that’s it.
To show the difference that the file format makes in terms of compression, we used a JPG image and a PNG image. Sometimes you can compress your image a lot better if you save it using a different format. JPG images are best suited for images of “real” people, places, things, etc.
PNG images are best suited for icons, text, screenshots of windows on your desktop, etc. Here is our original JPG image (91 KB):
And here is our original PNG image (26 KB):
Kraken.io’s best feature is the fact that it gives us an excuse to yell “release the kraken!” every time we use it, but apart from that, it’s one of the fastest solutions we’ve tried and pretty simple to use.
There are several paid tiers of the product, differing mainly by how many gigabytes of data you can process per month. The free quick web interface doesn’t allow you to resize images or use other “Pro” features, but it is a simple drag and drop tool we could figure out in just a few seconds.
Best of all, you can queue multiple files at once for quick batch processing.
You can also easily import images from Google Drive or Dropbox with a click. In our test, Kraken reduced the size of our JPG image by about 15% (78 KB) and our PNG by about 61% (10 KB).
Here is the JPG image after we released the kraken:
There is some loss in quality, but the image still looks pretty good and your website will be more streamlined thanks to the optimization. Here is the PNG image after compression:
The quality of the compressed PNG is almost identical to the original, which is why I love using the PNG format as much as possible because of its ability to be heavily compressed without as much loss in quality.
Use Kraken.io at kraken.io.
Compressor promises drastic file size reduction. “Up to 90%” in some cases. While most images won’t get that sort of performance, Compressor is a good choice if you favor absolute file size over fine image detail.
The interface is attractive and easy to use. It’s also nice that you can save an image directly to your Google Drive or DropBox without first downloading it to your computer. One downside, however, is the fact that only one image can be processed at a time.
Using Compressor on our test image, there was indeed a very aggressive 28% reduction in image size for the JPG image (66 KB).
For the PNG image, it reduced the size of the image by about 67%, all the way down to about 8 KB. This is very close to what Kraken was able to do also.
So how much did it affect image quality? Here’s the Compressor version of the JPG for comparison.
As you can see, there’s a significant amount of noise added to the image. So it’s a better file size, but with less quality. You’ll have to try your images on different sites to find one that strikes a good balance between substantial size reduction and image quality.
The PNG image from compressor looked exactly like the one from Kraken, so I’m not including it here.
Use Compressor.io at compressor.io
Optimizilla gets instant attractiveness points for its cure mascot, but it also promises a balanced approach to image optimization. On top of this, you can queue up to twenty images. Optimizilla also has a very powerful interface.
Optimizilla lets you set individual quality levels for your images. You can easily adjust this with a slider and then also preview the resulting image compared to the original.
This means you don’t have to repeatedly download the finished file until you are happy with the quality.
By default we got a 23% reduction in file size for the JPG (70 KB). The JPG size is larger than compressor, but smaller than Kraken. The quality is much better than compressor and comparable to Kraken.
The PNG was reduced by 64% and again was nearly indistinguishable from the original. It also looked the same as all the other compressed versions up till now.
You can use Optimizilla at imagecompressor.com.
ImageSmaller is another good online compression tool that delivers decent results, even though you are restricted to only processing one image at a time.
In our case, we got an impressive 54% reduction in file size for our JPG with a decent amount of quality loss. The image is still workable if you’re posting it online or for causal purposes, but there’s too much noise to use it in any other way.
Again, the PNG was reduced by about 65% and was exactly the same as the other results.
An Offline Alternative: RIOT
While all four of these image optimizers require a working internet connection, that’s not always possible. So it’s a good idea to have an offline application as a backup or under circumstances that make online optimization less than ideal.
Perhaps you need to process a large number of images or don’t want to upload certain images for privacy reasons.
Whatever reason you have to use an offline client, we particularly like RIOT or Radical Image Optimization Tool. This free piece of software can virtually do it all, while being pretty easy to use.
It has an interesting automatic suggestion mode. Simple drag the image in and it will suggest a suitable level of compression.
Using the auto setting, we get a 28% reduction in image size (66 KB). Here is the image, after being processed by RIOT. As with Compressor, the size is smaller, but the noise level is very high.
Another thing worth mentioning about RIOT is that the software comes with a batch converter mode. So you can queue up as many pictures as your computer can handle and then just leave it to get on with business. A big advantage over most free online solutions!
You can download RIOT at luci.criosweb.ro/riot/.
As Easy as 1,2,3
With these image optimization tools, you’ll get your website to load faster or save some space on your web server or email manageable pictures to friends and family.
It’s fast and easy to slim those overfed images down to something more palatable. You don’t even have to put any money down either. Now that’s a good deal no matter which way you look at it! Enjoy!