Images are a vital part of grabbing a visitor’s attention, breaking up long pieces of content and helping your content to be shared across the web. Unfortunately, images also increase the size of your website. Every image you add to a page has to be downloaded by visitors from your server to their computer. This increases page loading times which have an adverse effect on search engine rankings and can frustrate visitors. Slow loading sites are one of the most common problems we have to prevent. One of the most effective ways to improve your site speed is to optimize your images. A lot of web developers don't pay enough attention on solving this problem and therefore it is hurting their conversions and their search rankings. 

Image compression is either lossy or lossless: Lossy works by discarding information from the original file and lossless retains all the original data. There's a variety of image compression algorithms that take different approaches to reducing file size. As you might expect, not all compression tools are created equally. Some perform very well to almost any image while others produce poor quality images and barely affecting it’s file size.  

Below is a list of used tools with short descriptions:

We´ve decided to use PNGQuant because the compression rate is good enough and the quality is still superior. How does it work? We compressed all unreduced PNG images by using following command: 

pngquant --quality=30-80 image.png

This command instructs PNGQuant to use the least amount of colors required to meet or exceed the maximum quality. If conversion results in quality below the minimum quality, the image won't be saved and PNGQuant will exit with status code 99. 'Min' and 'max' are numbers in range 0 (worst) to 100 (perfect), similar to JPEG. 

Optimizing PNG files is a matter of reducing colors, maximizing repeated pixel areas, minimizing drop-shadows and controlling any smooth transitions with a judicious application of dithering. If you’re concerned with your site’s load time focusing some effort on optimizing your images to find a healthy balance between size and quality, you´ll ensure you’re well on your way to improving your visitor’s experience. Getting the best out of images in your design takes a little know-how and some good organization. It is always going to come down to a compromise between the quality of the image and the size of the file. With specialized tools you can reduce source images to a fraction of their original size and still maintain acceptable quality.

For instance, if transparency preservation is of utmost importance, PNGQuant may be your best option because it generates a small file size and it preserves transparency. Why didn't I pick TinyPNG? PNGQuant is free and what is very important – quality with compression rating are nearly similar to TinyPNG.

I´ve used PNGQuant in another project where we´ve used a lot of PNG images. The image quality was very important for the customer, but also the site speed. The results were amazing: the quality was very good and the page load speed improved thanks to 70% of image compression.

Pawel