two great ways to shrink PNG files - TinyPNG vs Photoshop.

Published in Design

 

tinyPNG screenshot

Here is a guide for people who want to reduce a 24bit PNG to 8bit using an online tool, specifically for those who may not have access to a program like Photoshop but also great for Photoshop users. Using this technique you can shrink any 24 bit PNG file quickly and easily without advance knowledge of how to manually optimise an image for saving as PNG.

Incidentally, PNG is pronounced "Ping".



PNG files are useful for two things:

  1. Images that need transparency (PNG supports transparency)
  2. Images that need to have a small file size (mainly for the web).


PNG uses a limited form of non lossy compression called Scanline filtering which doesn't reduce the size by much. To further reduce the file size for the web it is often necessary to convert the image to 8bit. By drastically reducing the amount of colours in the file to 256 instead of millions, the file size drops. It's not ideal for high quality or multi coloured images, but great for simple web images where the loss of colour depth is unlikely to be noticed.

Put simply. I use 8bit PNG when both small files size and transparency are required.

Because I live in an area with less than outstanding internet (max 1 megabit) so I keep in mind those with slow internet connections.  I use 8bit PNG to improve the user experience albeit at the cost of quality (as long as it still actually looks good). Although I use Photoshop for editing, I don't use it to generate the 8 bit file. I use a web service at TinyPNG.org

Update, thanks to a comment by Gennady I can also reccomend PNG Minimizer it has better colour depth selection and higher compression ratio although the drag and drop of Tiny PNG get my vot for faster workflow.

TinyPNG and PNG Maximizer both take 24bit PNG files and shrink them to an a lower colour depth (8Bit onlywith Tiny PNG) and therefor a smaller file. Like Photoshop they both reduce the colour pallet and hide the resulting loss of quality with error diffusion. The reason I use them is that they do (in my tests) two things better than Photoshop.

Here are the tests made with Tiny PNG (althou PNG Maximizer works just as well):

TinyPNG makes a better (default) job of transparency:

Photoshop often leaves partially transparent pixels looking quite opaque. This can be a problem when the PNG file is displayed on a dark background. I don't know why (nor do I care tbh) but TinyPNG makes a better job of this. It probably has a higher threshold for selecting on which semi opaque pixels should be made transparent. The result is, well… see for yourself:

Photoshp vs TinyPNG transparent edges

TinyPNG make PNG files smaller than Photoshop and they look better:

In my tests. TinyPNG kicked Photoshops bottom. The following images are idential files. For the top image I used "save for web…" in Photoshop to make the 24bit png, then I just draged an dropped the file on the open web page at TinyPNG. The result is a better image that's actually 40k smaller with better transparency (compare the corners, as above):

tinyPNG vs Photshop file size

Bonus Tip

oh, one last bonus tip for Photoshop users, before you go to save ANY file for the web, try using the Photoshop posterise filter on the image (set at about 40, or whichever looks best). A simple explaination is that this reduces areas of similar colour to multiple pixels of the same colour. This helps the PNG Scanline filtering compression to be more effective and will help reduce the files size of any file format which uses compression. This technique is similar to part of what Jpeg compression does anyway, but by doing it yourself you get good control and resulting Jpeg images will also be smaller.

What do you think? Got any good PNG optimisation tips?