If you plan to post images on a personal or company website, it is crucial that you optimize these photos before uploading to ensure ideal page speed performance as well as to save on bandwidth costs. While you can manually compress images in an expensive program like Adobe's Photoshop CC, there are dozens of services and standalone programs out there designed with one goal in mind: to compress or optimize your images for the web without compromising a big hit in quality.
There are two kinds of image compression. Lossless is the type of compression that removes metadata and unnecessary elements coupled within the picture file but doesn't touch the pixels themselves thus keeping the visual quality the same as an uncompressed image. This can save a small percentage of the total file size, typically in the 5-15% range. Lossy is the second method, and this can have an adverse effect on image quality depending on the process used in exchange for a much smaller file size. However, most people will not notice the difference while viewing on the web (unless they take the time pixel peep) and this method can have result in some serious data savings of up to 90% per file.
For those on a budget, Optimiazilla is a great free web service that allows you to upload up to 20 images at once for compression. During the optimization process, you can choose your quality setting (defaults to a lossy value of 90%) to determine how much compression you want in comparison to a loss in image quality. We will be testing the default lossy value of 90% quality in this comparison.
One of my favorite services for image optimization as they offer both lossless and lossy optimization options and a sleek interface. I’ve found their “lossy” algorithm to perform excellent shaving a significant percentage off of my images for the web without any notable loss in quality. Advanced features in their ‘Pro’ plans include statistics, image resizer, API access, Dropbox support and a WordPress plugin. We will be testing both their lossless and lossy compression methods in this comparison.
This is a newcomer to the image optimization market, but its parent company is responsible for the popular WordPress plugin WP Rocket. The offer a generous 25MB of optimization a month on their free plan and you can choose from three different optimization methods: normal (lossless), aggressive (lossy) and ultra (lossy). We will be testing all methods in this comparison.
Unlike the services listed above, ImageOptim is a free application for Mac users that allows lossless image compression via an easy to use interface. While being restricted to lossless compression does limit the amount of data saved, you guarantee the best image quality and the software makes it easy to run a bulk optimization.
Want a closer look? Download the ZIP file with the original and compressed images.
Going into this comparison, I had anticipated a notable difference between the original file and the file with the largest compression value which in this case was Imagify.io's ‘Ultra' option. After reviewing the results, I was surprised to that I cannot find any distinguishable differences between the two images.
While I am sure the results can depend on the type of images run through the service, I chose this particular image shot with my Sony a7RII at a local lacrosse charity event as it had many different color tones within it and lots of contrast, both areas that I had anticipated the compression would be evident. I now realize how extraordinarily valuable lossy compression can be for optimizing my web page load times and bandwidth usage without affecting the experience for my readers.
While some people may have different needs or desires, I hope this comparison shows why you need to compress your images and helps you choose which service or software to use. In my case, I had been using Kraken.io for the last few months and had been content with its lossy compression yet seeing how well Imagify.io performed at its ultra compression setting is enough to convince me to make the switch after my next billing period.