Smaller Website Images = Bigger Returns. These Compression Tools Can Help.

True story:

Last week I was on a small retailer’s website, my cart loaded up with goodies. Ready to buy, I walked through the checkout process, finally hit “purchase” and… nothing. It just hung there, loading. After a minute I got impatient and tried refreshing the page, which sent me all the way back to square one. So I retraced my steps through checkout only to have the same thing happen again.

At that point I did what any sane person would do and gave up. I closed my browser tab and walked away, leaving the items in the cart and my money in my pocket.

The retailer was that close to a guaranteed sale and missed out because of a slow website.

How many sales do you think they’re missing out on every day?

Abandonment issues

Marketing experts call what I did shopping cart abandonment, and it’s no joke. The Baymard Institute recently combined 32 different studies to find that the average online shopping cart abandonment rate is 68.55%. There are a lot of factors that could make customers choose to abandon their carts, such as:

too many checkout steps,
lack of trust in website security,
finding a better deal elsewhere,
poor optimization for mobile,
and pages that load too slowly.

While steps can certainly be taken to solve any of these issues, one of the quickest and most effective ways to improve user experience on your site is to decrease your page load time.

And one of the quickest and most effective ways to decrease your page load time is to compress your images appropriately.

Print v. screen resolution: two different systems of measurement

Compression has to do with reducing the resolution of your images. Image resolution is a highly complex concept, but for the purposes of this post I’ll boil it down to its most simple terms:

We see information on screen via pixels of colored light. We see information on printed materials via dots (of colored ink). Pixels and dots can technically vary in size, but the standard resolution output rule of thumb most people commonly refer to is 72 ppi (pixels per inch) for screens and 300 dpi (dots per inch) for print. The difference in these two numbers has to do with information density.

Screens typically require less information density to display an image.

Printers typically require more information density to print an image.

When you take photos of your products with a digital camera, the default resolution is usually optimized for print. This is great, because it’s better to start with the most information available and reduce down to what you need.

The problem for websites comes when people don’t reduce their print-optimized images down far enough.

Let me give you an example.

Let’s say you want to put, say, a photo of Arches National Park you took with your digital camera on your website. So you open the file up in Photoshop and examine the size, which is 3008 x 2000 pixels. You know you want it to appear on your website at only 600 pixels wide, so you type in the new size and hit OK.

If you were to save this image now as a JPG without compression, the file would weigh in at a whopping 427 kb — almost half a megabyte. And what if you have multiple photos on the same page? It all adds up to a serious lag on page load time — not to mention a serious hit on your website’s server space.

See, even after reducing the physical dimensions of your photo there’s still a lot of information left over, which bloats the file size. The good news is that we can easily strip that information away for web without sacrificing image quality.

In Photoshop, instead of going File > Save As simply choose File > Save for Web. In the dialog box choose JPG and in the quality box, try some different numbers and watch the changes in the preview screen. Depending on the image type, you may be able to compress as low as 30 without losing much detail. For the Arches National Park image, I chose a quality 50, which gave me this nice-looking image:

The final file size after compression? Just 51 kb — roughly an 1/8th of the size it was before. That’s a lot easier and faster to download!

Real compression tools you can use

Right now you might be saying, wait a second, this is great for you fancy professional designers who have access to Photoshop, but I don’t have the budget for software like that.

The good news is that you don’t have to buy Photoshop to compress your images, though. You don’t necessarily have to buy anything, or even download any software. Here are our favorite image compression tools — all you need to get started is an internet connection.

TinyJPG

Just point your browser to tinyjpg.com, drop your image in the tool box, and watch TinyJPG do all the work for you — intelligently analyzing each image to automatically choose the optimal compression quality. Try TinyPNG for vector-based images, too. And if you’re looking to automate your image compression process, connect your website’s server to the API to get JPG and PNG compression and thumbnail resizing services — your first 500 compressions a month are free. Alternatively, you can download the Photoshop Plugin or, if your site runs on WordPress, the WordPress plugin. We like this service for its variety of workflow options!

Optimizilla

You have to put up with a few small ads on this site, but that’s a small price to pay for fast, simple compression service. Upload up to 20 images — JPG or PNG — at a time in the browser tool box, and use the slider to customize your compression levels while comparing them against your original images. When you’re finished, you can download your compressed images in a zipped folder. It’s a straightforward, no-frills solution for occasional compression needs.

Compressor.io

This clean, ad-free interface makes compression almost enjoyable. You can compress only one image at a time and unlike Optimizilla you have no control over the compression level — but that makes it perfect for those times you just want to shrink without having to think. Added bonuses include compression of up to four file types (JPG, PNG, GIF, and SVG) and functionality to save your compressed file directly to Google Drive or to Dropbox.

Smaller images = bigger returns

Page load time can not only impact SEO ranking and website server space, it can drive would-be customers from your site before they even get a chance to make a purchase. Your first step to combating shopping cart abandonment on your site is making sure you optimize your files for the web. Image compression is one of the smartest, simplest ways to immediately improve your website experiences for all your users. Start compressing your images today!