How to optimize png images ?

Well its a fact that a large number of us use PNG images on their website. Most of us might keep images in PNG format for the sake of transparency, clarity and so on. While they are really good, usually the size or the weight of PNG images are quite high when compared to JPG or other image formats. But you need not worry any more as we would be discussing on optimizing PNG images.

How to optimize PNG in Photoshop?

There is a certain amount of optimization that you can do right when you are slicing the images out of the PSD. Actually the concept of optimizing PNG images on Photoshop is very deep and for more details you can refer https://www.smashingmagazine.com/2009/07/clever-png-optimization-techniques/ . But I would like you to take a look at a couple of popular and easy methods of optimizing PNG in Photoshop.

General Option while Saving :

Photoshop by default gives an option to optimize the images while saving . When you are slicing the images, while saving it select “Save for web & Devices” from the File menu. Once you select that option you would be able to see a new window that shows you the image with some options on your right. Above the image preview section you’ll find an “Optimized” tab. Make sure that the tab in on. This would do a basic optimization of the image. In fact I would suggest you make it a habit of saving images this way. This one option can be combined with other optimization techniques too.

Posterize the PNG image

This is a common method that I’ve seen a lot of people use. All you need to do is :

1. Open the png image in photoshop and from the layer options select the ”    ” icon which is for “create new fill or adjustment“. Once you click on that Icon, from the menu that comes up select “Posterize“.
2. After selecting Posterize you’ll get a window with “Adjustments” tab. Select the Adjustments tab and set to level to 40 or lesser. A level of 40 is good for most of the PNG images but you can adjust it as per your requirement. Now save it for web and devices and compare with your original png file to see the difference in the file size.

There are few more other ways to optimize the PNG image within photoshop which you may find in the link mentioned above. But let’s look at a non-Photoshop easier method.

Online PNG optimizer tool

While there are many online PNG optimization tools available, I’ll just talk about TinyPNG. I’ve tried the other ones and nothing could meet my expectations like TinyPNG.

TinyPNG is a wonderful online PNG optimization tool developed by Voormedia from Amsterdam. It is a free service and let me tell you that it is one of the best I’ve encountered online. There are other online tools too but none could beat TinyPNG in preserving full alpha transparency. Also they reduce the file size drastically without compromising the quality. Checkout their website for a demo.

1. Visit http://tinypng.org/ and either drag drop your PNG image in the drop section provided on the site or just click on that section and select the file to be optimized.
2. Once the processing is done the image would be available for download. Remember that TinyPNG retains the image’s original name so you will have to save the images in a different folder to avoid naming clashes. Done !

There are other tools too that you can run from the Command line too but my focus here was on the quick and easy options which retain the image quality too. Hope you have found this article useful. Do you use TinyPNG or another tool? Share your thoughts.