It’s a proven fact—web users are impatient, and are becoming more so with each year that passes. In fact, Allison Enright for Internet Retailer goes so far as to say that ‘making online consumers wait three seconds isn’t going to get an e-retailer far these days’. That’s phenomenal!

Given all that we are learning about the evolving web, particularly that web users in 2015 simply don’t have the patience to wait much longer than several seconds for a page to fully load, and that decreasing page load time can increase conversions, website owners need to be taking all the steps within their power to decrease page load times, and serve content to their users quicker. Of course, there are so many facets and factors involved in optimizing page speed, but one of the longest-lived facts—and one that is unlikely to ever change—is that large images take longer to load. During a time where high-definition and retina displays are becoming more prominent in the market, and more favoured by consumers, demands are increasing on all fronts. Not only do users expect faster load times, but funnily enough, they also expect higher image quality and resolution.

This presents a unique challenge for web designers and website owners, as with higher quality images, comes longer loading times (which is why the website pre-loader has become so popular in recent years, incase you were unaware). Something has to give, right? Not so fast.

There are two types of image compression that exist. Lossy compression, to which we are all familiar (I will explain in a moment), and lossless compression, which is what we will explore today.

Lossy compression is the kind of compression that reduces file quality, with the aim of achieving a smaller file size. We’re all familiar with this — if you decrease the resolution of an image, or export it from Photoshop specifying a lower image quality setting, the file size will be smaller. However, with this method of image compression, we are compromising quality.

Lossless compression, on the other hand, is a unique type of compression that allows you to preserve file quality, whilst simultaneously optimizing and reducing overall file size! How great is that? Lossless image compression can often result in a reduction in file size of more than 70%, even for high-resolution images. Image quality is not compromised with this method, yet your site’s load time will decrease instantly, especially if the site is image-heavy. Lossless image compression is a must for image-heavy sites, especially at a time when users are expecting faster page loads, often entirely abandoning websites that take longer than 3 seconds to load.

We work with thousands of images each month, and online image compression tools have become a staple in our office. We thought we’d take a few moments to share our image compression tips with you, so that you too can achieve instantly reduced page load latency.

TinyPNG / TinyJPG

TinyPNG (also TinyJPG - they offer JPG image compression too), is a free online tool for lossless compression of PNG and JPG files. You can simply drop your files onto the their webpage, and the tool will compress the images, showing you progress in real-time, and provide a download link once fully compressed. You can compress up to 20 images at a time (simply refresh the page once you’ve done 20, to compress more), and the original images must be no more than 5MB before compression. We find this tool to be very effective; images are usually brilliantly compressed, with a minimal degradation in quality, that is barely noticeable. This tool literally is lossless!


They also offer a Photoshop plugin so that you can compress your work on-the-fly.

Compressor.io

Compressor.io offers compression for a few more file formats than TinyPNG does. With this compression tool, you can optimize JPG, PNG, GIF, and SVG files. Additionally, you can specify whether the tool should use lossless or lossy compression. This can be helpful if you have specific images that you aren’t too concerned about the quality of — or if you are compressing images for retina displays, that don’t necessarily need to be optimized with lossless compression when they are already twice the size that they will be displayed at on the page. Whats more, this tool has a file size limit of 10MB, double that of TinyPNG!

This tool is great if you require more control of your compression, and have multiple file formats to compress, particularly if they are extra-large in size.

Kraken.io

Kraken is an alternative image compression tool, which offers several plans, alongside a free web-based version of its tool. This tool provides a number of great options that are missing from the above utilities. Kraken offers three methods to specify the source image to compress. You can upload images, paste an image URL, or use the ‘Page Cruncher’, which will fetch all images on a specified page. Again, you can specify whether to use lossless or lossy compression, and additionally resize/crop the image automatically during compression. Some of these features are only available using the Pro version of Kraken, but it’s probably worth the few dollars per month if you find yourself regularly compressing images. Kraken also allow for file sizes of up to 16MB per image, which is astounding when compared to the competing tools! Their Pro version also includes the ability for you to store your compressed files in the cloud.

Conclusion

We hope you’ve found this post informative, and now better understand the necessity for optimized images on the modern web. Simply uploading uncompressed images directly downloaded from stock sites will not satiate users’ ever-growing impatience and demand for speed. We have trialled each of the above tools, and as regular users ourselves, highly recommend image compression tools for image-heavy websites, especially if you are optimizing for retina-ready displays.