Optimizing your PNG images can take a little more effort as compared to optimizing JPEG images because of the presence of the additional alpha transparency channel. Thankfully there are a host of free open source PNG quantization and compression tools available on the internet that do an amazing job of reducing the overall size of the PNG file.
By using a combination of these tools you should be able to reduce the file size by over 70% without much lose in quality. In this article, I will be discussing the tools I use and in what order to get the best possible results.
Best Open Source PNG Image Compression Tool
Of all the free tools on the internet, the best one I have found so far is PNGQuant. This program alone is enough to reduce your PNG image size by over 50%. But if you want further compression, you will need to combine PNGQuant with some other tools and procedures which I will be discussing in this article.
Steps to Optimizing PNG Images
So here are the steps that I follow to get the best possible results. Some of these steps are optional and I have marked them so. In-fact as I said above, PNGQuant alone should be more than enough to get your images super small. But if your image is very large, like for instance, a large logo or background image, then you can get the optimal results by following all these steps.
Step 1: Posterize the image in GIMP.
Step 2: Adjust transparency Depth using GIMP.
Step 3: Optimize using OptiPNG Optimizer (Optional).
Step 4: Quantize and Compress the Image using PNGQuant Lossy PNG Compressor.
Step 5: Further optimize the image using PNGOUTwin (Optional).
Now let's look at these steps in detail with an example.
Step 1: Posterize the image in GIMP
Posterizing an image helps reduce the total number of colors used in the image thereby reducing the image size. You can easily achieve a 5% to 10% reduction in the overall size of the image by posterizing it.
To posterize the image, we are going to use an Open Source software named GIMP. GIMP is an amazing photo editing software which is often considered the open source equivalent of Photoshop. If you don't have GIMP, you can download and install it free from Gimp.Org.
For this example, I am going to use the following unoptimzed PNG image which is 6.41KB.
To posterize the image, open it in GIMP. Then click on Colors > Posterize. Make sure that Preview box is checked so you can view the changes as they happen. Now slide the 'Posterize Levels' slider to a number where the image looks just about right. This generally happens between levels 30 and 60. Remember, the lower the level, the smaller will be the image.
Once done, export the image (File > Export as). You can consider unchecking 'Save Creation Time' and 'Save Background Color' while exporting.
Tip: If your PNG image is not visible properly because of the transparent background, temporarily create a white background layer in GIMP and add it below the main image layer. This will help you view the image better. Make sure to delete this white background layer once you are done postering as saving the image with the background layer will actually increase the image size.
Here's the same image after posterization. The size of the following image is 5.19KB which is a reduction of 1.22Kb.
Step 2: Adjust transparency Depth using GIMP (Optional)
PNG images have an additional transparency layer which can be scaled like color depth. This can be done as follows:
1.) Decompose the Image: Decompose the image into its respective RGBA layers by selecting Colors ->Components->Decompose. Make sure that the 'Decompose to Layers' is checked and select the Color Model as 'RBGA' from the drop down.
2.) Reduce the Alpha Channel: Making sure that the Alpha Chanel layer is selected, go to Colors->Posterize. You may consider hiding the other Red, Blue and Green layers and only keep the Alpha layer visible as shown in the image below.
Reduce the colors to an acceptable minimum using the posterization method discussed above. I have found this to work best somewhere between 9 and 20 values.
3.) Recompose the Image: Recompose the image by going to Colors->Components->Recompose. This will automatically save the changes to the main image. Once done, export the main image.
Here is the image after I reduced the transparency depth. The size of the image is 3.97KB which is a reduction of 1.22KB and we haven't even started using PNG compression tools yet!
Step 3: Optimize using OptiPNG Optimizer (Optional)
OptiPNG is an utility that re-compresses image files to a smaller size. In addition, the program also performs PNG integrity checks and corrections. OptiPNG is currently only available as a Command Line utility, so if you are not comfortable using Command Line, you might skip this step. Although, it needs to be mentioned that by following the tutorial here, you should be able to get the tool working using Command Line easily.
Your first step is to download the software, which you can do from here: http://optipng.sourceforge.net/
Assuming you are in a windows environment, make sure to download the "The Windows (32-bit) build". Once you extract the files, you should be able to see an application file named 'optipng'. This is the application file that we need to call from command line. You can copy this 'optipng application file' and save it in an easily accessible location.
To get started, open the command prompt in your computer by going to 'All Programs -> Accessories -> Command Prompt'. You can also find this program by typing in 'CMD' in your 'search programs and files'. You should be able to see something as follows:
C:\users\name>
Now assuming that you copied your 'optipng application file' in a folder named 'New' under C Drive you can use the following commands in CMD to reach that file.
Firstly, type 'CD..' and press enter once and then repeat once again to reach the C:\.
Once you are in the C drive, you can reach the 'New' folder by typing in 'cd New'.
C:\>cd New
This should take you inside the 'New' folder where the OptiPNG application is.
Once here, type 'optipng' followed by a space and then the full location of the PNG image file that you want to optimize.
C:\New>optipng location of the image file
Let's say your image file is located under C drive, in the directory 'users > files > images > background.png
To optimize this image file type in the following command and press enter:
C:\New>optipng c:\users\files\images\background.png
You can also use the command -o2 for further optimization of the file, although I didn't see any difference in the output with or without this command.
C:\New>optipng -o2 c:\users\files\images\background.png
Once you press enter, OptiPNG will optimize the file for you. If you prefer, make a copy of the original file as the above command will overwrite the original file.
The following is the output file from OptiPNG and its size is 2.89KB. So the file size was reduced by another 1KB.
Step 4: Quantize and Compress the Image using PNGQuant Lossy PNG Compressor
PNGQuant is by far the very best of all the tools I have used so far. In-fact, if your requirement to shrink the images is not too strict, you might as well only use PNGQuant. Your images can get more than 40 to 50% reduction in size using PNGQuant with minimal loss in image quality.
The best part is that PNGQuant is a command-line utility but also has an online interface and GUI interface for windows. The GUI also comes equipped with batch compression facility so you can compress multiple images or an entire folder of images in no time.
In this tutorial, we will be looking at PNGoo which is the GUI for PNGQuant. You can download PNGoo from http://pngquant.org/
Once downloaded, open the PNGoo application file, and follow these steps:
- Click on 'Add Files' to add the image you want to optimize.
- Check the 'Output to Same Directory' if you would like the program to overwrite the file. If not, uncheck it and click 'Browse' to select your output directory. The final optimized image will be saved in this directory.
- Click on 'Color Settings' and in the dialog box that appears, experiment with different settings, 32 colors, 64 colors and so on. Make sure that 'dither' is selected for lower colors as it will help reduce color banding. Click 'Ok' if you find the settings and image quality acceptable.
- Once you are satisfied with the results, click 'Go' to compress the image.
The following is the output image from PNGoo and the size of the image is 1.90KB.
Note: If you do not want to download anything, you can also use the online interface for this software which is TinyPNG.com. That's right, TinyPNG.com uses that PNGQuant engine and can give you similar results without any need to download the software.
Step 5: Further optimize the image using PNGOUTwin (Optional)
PNGOUTwin is another easy to use PNG optimizer that can help you create smaller image files. This program is available in GUI format which also has batch compression ability. So in other words, you can easily compress all PNG files present in a specific directory or folder/sub-folder.
The downside to this application is that it is a paid software. But on the upside it comes with a 30 day free trial and only costs $15 for a personal copy. So you can always download and check it out and buy it in case you find it useful.
I have found that this software reduces about 10% to 20% of the overall image size without loss in quality.
You can download the free trial from here: http://www.ardfry.com/pngoutwin/Download.htm
To use the software, Click on, 'File > New File Conversion' and select the image you want to optimize. This will overwrite the original image with the optimized image.
If you do not want your files overwritten, Click 'Edit > Settings' and make necessary changes.
For batch conversion, select, 'File > New Folder Conversion'.
The following is the output of our image and it's file size is 1.72KB.
Original and Optimized Image Comparison
Here is the comparison between the original image which was 6.41KB to the optimized image which is 1.72KB. This means the file has been reduced by 4.69KB which is a reduction of over 70%! The optimized image does not look much different from the original one. Yes, you can spot some differences if you look closely, but they are too minor to notice otherwise.
| Original Image - 6.41KB | Optimized Image - 1.72KB |
|
|
What PNG optimization tools do you use and what kind of results do they give? Let me know in the comments section below.