Jan 23, 2016

Please, For the Love of All That Is Holy, Optimize Your Website’s Images

Websites can never be too fast, which means that website images can never be too small.

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)

ToolOptimized SizeSavings
Compressor.io183 KB68%
JPEGmini220 KB61%
Optimizilla (80% Quality)159 KB72%
TinyPNG188 KB67%

Image 2 (orig. 424 kb)

ToolOptimized SizeSavings
Compressor.io105 KB75%
JPEGmini155 KB63%
Optimizilla (80% Quality)94 KB78%
TinyPNG228 KB46%

Image 3 (orig. 448 kb)

ToolOptimized SizeSavings
Compressor.io137 KB69%
JPEGmini260 KB42%
Optimizilla (80% Quality)111 KB75%
TinyPNG131 KB71%

Image 4 (orig. 232 kb)

ToolOptimized SizeSavings
Compressor.io51 KB78%
JPEGmini131 KB44%
Optimizilla (80% Quality)42 KB82%
TinyPNG81 KB65%

Image 5 (orig. 292 kb)

ToolOptimized SizeSavings
Compressor.io64 KB78%
JPEGmini75 KB74%
Optimizilla (80% Quality)51 KB83%
TinyPNG78 KB73%

Image 6 (orig. 619 kb)

ToolOptimized SizeSavings
Compressor.io204 KB67%
JPEGmini266 KB57%
Optimizilla (80% Quality)170 KB73%
TinyPNG227 KB63%

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.

Related Articles