Press Enter to Search

How to lose weight (at least in your PNGs)

January 23rd, 2013

Maybe your life is as full of PNGs as mine. If it is the case, I’m gonna explain you my workflow to reduce the file size of my assets, while keeping their quality. Once, I reduced 2.6Mb into 326kb for a mobile project. Take a look!

I use 3 apps: ImageAlpha, ImageOptim and Kaleidoscope. In that order.

I’m gonna explain you what they do.

ImageAlpha

I discovered it almost two years ago. In a few words: ImageAlpha converts 24-bit PNG to paletted 8-bit with full alpha channel. So you have a reduced paletted PNG with your beautiful alpha untouched.

This can be time consuming if you have a lot of images to process, you have to pick manually how much quality are you willing to lose.

You have some options though. Usually I have very good results with Median Cut (preserves detail) and sometimes with NeuQuant (best for gradients). But if you want more than 256 colors, try Posterize.
After that, try reducing number of colors, which will also further reduce file size until you are happy with the relation quality / file size.

You can reduce your image here about 60-80%.

When you save the image, you have the option to open it with ImageOpt.

ImageOptim

This app optimizes images by finding best compression parameters and by removing unnecessary comments and color profiles.

You don’t have to do anything, only drag some files into the app and wait.

You can reduce again about 6-12% in file size.

Kaleidoscope

You can review your new reduced image files with the original and compare them. We need always to check the quality of our assets! I am using this app for the sake of quality, to check if my new assets reach my expectations.

Let’s see an example:

I took the 512×512 PNG file from Kaleidoscope app and using the above apps, reduced the file size until my quality expectations, about 68%!!

Because it’s a full color gradient image I picked Posterize as best option and 128 colors. 65% reduced.

After that with ImageOptim was reduced again about 10%.

And then check details and image quality with Kaleidoscope.

png-weight-app-workflow

Happy weight loss!!

By

4 Comments

Post Comment

t Twitter f Facebook g Google+