Put your Images on a diet

Kirtan Thakkar

Kirtan Thakkar

Life is all about learning

How many times you have faced a situation like this, webpage is loading images and you are waiting for them. Today media rich websites are increasing at rapid pace. And tons of images increases the loading time and bandwidth for users. There are many compression tools available for you to compress images.

I was in a similar situation where I needed to decrease the site loading time and images were taking too much bandwidth and time. There are many open source libraries available which you can implement on your back-end to automatically compress image sizes.

Too much work and resources, isn't it? Learning new APIs and automating that process takes a reasonable amount of time. The initial part of deciding the library also requires good amount of time.

I spend a day searching different libraries and services which provides compression tools. Some of them were open source and some were not. Some of them offering lossy compression and some lossless. But the one most interesting tool I found was TinyPNG.

You might be thinking What does TinyPNG do? The staright answer from TinyPNG's website:

TinyPNG uses smart lossy compression techniques to reduce the file size of your PNG files. By selectively decreasing the number of colors in the image, fewer bytes are required to store the data. The effect is nearly invisible but it makes a very large difference in file size!

Here is the sample from TinyPNG: TinyPNG Sample

Why TinyPNG is better then others?

There are many features which makes tinypng service better than others. I will list down and explain each one in a brief.

  • High Compression Ratio: TinyPNG has a very good compression ratio as compared to other services I tried.

  • No Servers to maintain: Services like this occupy good amount of CPU cycles and memory. TinyPNG compresses images on their servers and send back the compressed image to you.

  • Supports PNG, as well as JPG: It supports PNG and JPG file types. TinyPNG has another website for JPG, TinyJPG. But you can access the benefit of both from a single place.

  • Photoshop Plugin: It allows you to scale, preview and save compressed PNG and JPEG images straight from Photoshop.

  • Developers API: You can get an developer API key and Official client libraries are available for Ruby, PHP, Node.js, Python and Java. First 500 images per month are free.

  • Drag and Drop on website: Quickly compress your images by drag and drop on TinyPNG's website.

  • Wordpress and Magento Plugin: TinyPNG has an official plugin for Wordpress and Magento. Find the details from their website.

I had tried out on some sample images and I was amazed by the result. It had reduced sizes by an average 55% with my sample images and almost no visual difference.

I am sure you will also be amazed by the results. Here are some tweets for the TinyPNG:

Give this tool a try: tinypng.com

If you are concerned about the privacy, this is what it says in its terms of use:

Submitted content: You retain the rights to content you submit to the Service. You grant Voormedia and its service providers the right to temporarily store and modify your content insofar as necessary to provide the Service to you. Submitted content will be stored for a maximum of 48 hours.

How to compress images with the existing website?

If you have an existing website and want to compress images, I would suggest you to quickly drag and drop images on their website (max 20 at a time) and download it as zip and extract it on the same folder by overwriting existing files. It won't take much of a time and you will be having all your images compressed quickly.

WordPress and Magento users can also take advantage of the official plugins to get their images compressed easily. You can automatically compress new images and the existing one with the plugin.

If you have some resources and time, then their API is very easy to use and you can automate the process as well.

So, put your images on a diet and have a blazing fast website.