When I started developing websites two decades ago — yes, two decades — high-speed internet access was a luxury primarily reserved for universities and government facilities. The vast majority of personal internet activity occurred over 56K modems like this bad boy from US Robotics. Under optimal conditions, a 100 KB image would take about 14 seconds to download over such a modem — an eternity in today’s terms. As such, it was anathema to put large images on a website. Furthermore, most personal website hosting accounts came with about 10 MB of storage space (if you were lucky), so you simply couldn’t afford to host a lot of large images.
But as high-speed internet access has become increasingly widespread (with ultra-high-speed services like Google Fiber looming on the horizon) and storage costs have become ridiculously cheap, it’s tempting to downplay large image file sizes. After all, we’ve got bandwidth and server space to spare these days… or so goes the reasoning.
However, that’s really just complacency talking. Websites can never be too fast, which means that website images can never be too small. Indeed, image optimization is one of the easiest ways to reduce your website’s weight and improve its speed, and your website’s speed is something that should always be at the forefront of your mind. Not only does speed affect your Google ranking, but more and more people are accessing websites via mobile devices, and they’re often doing so on slow non-wifi connections. The less they’re required to download, the better website experience they’ll have.
In order to show you just how effective image optimization can be, I’ve put together several examples using different services, images, and configurations. There are many image optimization tools out there, but for the purposes of this article, I used Compressor.io, JPEGmini (specifically, their OS X app, though they have an equivalent web-based service), Optimizilla, and TinyJPG. (I’m focusing on JPEG optimization in this article but you should certainly optimize your PNGs and SVGs, too.)
This is certainly not the most scientific or exhaustive of tests, but here’s my basic methodology: All images are JPEGs and are 1000x668. The original version of each image was generated using Adobe Photoshop CS3’s “Save for Web & Devices…” functionality with the “Optimized” option checked and the “Quality” set to 90.
Image 1 (orig. 570 kb)
|Optimizilla (80% Quality)||159 KB||72%|
Image 2 (orig. 424 kb)
|Optimizilla (80% Quality)||94 KB||78%|
Image 3 (orig. 448 kb)
|Optimizilla (80% Quality)||111 KB||75%|
Image 4 (orig. 232 kb)
|Optimizilla (80% Quality)||42 KB||82%|
Image 5 (orig. 292 kb)
|Optimizilla (80% Quality)||51 KB||83%|
Image 6 (orig. 619 kb)
|Optimizilla (80% Quality)||170 KB||73%|
All original and optimized images can be downloaded here (6 MB).
As you can see, some pretty impressive savings can be accomplished with simple JPEG optimization; in some cases, I was able to reduce file sizes by more than 80% with little to no impact on image quality and clarity. (One notable exception occurred with image #2: both Compressor.io and Optimizilla left the text on the red gates looking noticeably blurred and indistinct.)
Considering how little work is involved (just a little drag and drop, really) and how much your website can benefit from the process, I can’t really think of any reason why you shouldn’t implement some measure of image optimization into your production workflow.