Faster Page Loads & Bandwidth Saving with TinyPNG

Every now and then a tool comes along that’s so simple and useful that you wonder how you ever did without it. TinyPNG from Voormedia is just such a tool and in this post we’ll look at how it can help you optimise the performance of your website, delivering pages that load faster for your visitors and are less demanding on your server.

We know that page speed can have a big impact on user experience and as a result it’s also generally accepted that Google et al. take it into account when determining how to rank your site. Site Speed has long been a part of Google’s Webmaster Tools and there are many established tools out there for testing a site’s performance. One of our favourites comes from the folks at Pingdom.

Page Test generates a useful report that includes amongst other things a waterfall chart of all the elements that make up a page and their corresponding size/load time. Often it’s images that make up a significant proportion of a page’s weight, so slimming down this aspect can really deliver an appreciable improvement in page speed. But before you reach for a technically involved solution such as caching, server-side compression or setting up dedicated image sub-domains the quickest win can come from simply making sure that all your images are properly optimised before you upload them.

This is where TinyPNG steps in. Using some clever compression it can reduce the size of your PNG images by over 50%. The side-effects of the compression are negligible and the process retains the all important transparency that make PNG graphics so useful in website design. Using it couldn’t be simpler, just point your browser to tinypng.com, drag and drop the files you want to compress into the window and then download the results. The service is free to use but if you find it useful you might want to consider a donation to help them keep it going.

To demonstrate lets look at TinyPNG in action… We created a simple graphic in Pixelmator and exported it as a PNG, first using the main export option and then ‘save for web’ under the share menu. We then took the saved for web version and compressed it with TinyPNG. The results speak for themselves: The standard PNG weighed in at 254KB and the export for web version 237KB But TinyPNG managed an additional saving of over 68% to create a PNG of just 77KB!

Imagine these kinds of savings over all the PNG graphics on your site and the potentially hundreds of thousands of times they could be loaded in a year and you’re looking at significantly lighter, faster web pages that will draw appreciably less bandwidth.

It’s important to note that TinyPNG does use lossy compression to reduce file size. A bit like MP3 compression for music this means throwing away some of data the algorithm thinks you won’t miss. In our testing we found that in most cases we either couldn’t tell the difference in quality or it was so slight to be a complete non-issue. We did see the occasional compression artefact so it’s definitely worth A/B comparing your TinyPNG version with the original file, but to our eyes it was an overwhelmingly file size saving without real compromise. Happy compressing!