When comes to website, speed is one of the most important element. It is crucial to keep your website optimized and fast loading even with the slow connection broadband speed. Image is the common element in a webpage and normally it will take up most of the page weight. So we have to make sure the images are properly optimized to ensure the smallest file size possible.
Today, I’m going to introduce 6 tools to compress your JPEG and PNG images without losing much of the quality. The tools mostly are free, and one of them is called Smush.it by Yahoo! as many people know it. I will do a small test and to see which one crushes the pixels the most.
I’m going to use the popular “Clown Fish” mac wallpaper as the JPEG test image. The original file size is about 1020kb. For PNG image, I will use the old Apple menu sprite which weighs about 24.26kb (with transparent pixels). Since the images are ready, lets begin the test!
Yahoo! Smush It
As mentioned earlier, the first tool we are going to use is the Yahoo!’s Smush It online lossless image compressor. Below is the result:
JPEG – 843KB (17.36% reduction)
PNG – 23.67kb (2.47% reduction)
Kraken Web Optimizer is an online tool for many optimization including lossless image compression. Below is the test result for both image:
JPEG – 843kb (17.36% reduction)
PNG – 23.26kb (4.14% reduction)
JPEG – 546kb (46.47% reduction)
PNG – not available
CodeKit is the latest Mac tool for web developers that does a lot of stuff including lossless image optimization. Below is the result:
JPEG – 884kb (15.4% reduction)
PNG – 24.3kb (2.32% reduction)
Here is another Mac application for image compression that I’m using for the test which is called ImageOptim. The result:
JPEG – 833kb (18.4% reduction)
PNG – 22.83kb (5.9% reduction)
Another software I’m going to use is Radical Image Optimization Tool or RIOT in short, is a lossy compressor. For the JPEG, I’m using the default 75 quality and Medium Chroma Sampling.
JPEG – 597kb (41.5% reduction)
PNG (with OptiPNG o3) – 23.68kb (2.4% reduction)
Above are the tools that I used to do the testing. JPEGmini did the best job for jpeg image compression, I think it’s a good app to use and the loss of the image quality are minimal. If you are particular with image quality, ImageOptim with the best compression will be your choice.
Google Developers page also stated the importance of reducing the page size and suggested some other tools at here. Recommended to have a look at it ^_^. If you have any other good image optimizer tool, please introduce it by using the comment form below.