70% Smaller PNG Files

CodeKit can reduce PNG file sizes by about 70% with virtually no change in image quality—it's straight-up witchcraft.

To do this, CodeKit uses a tool called PNGQuant, which is written by Kornel Lesiński. Kornel also develops the industry-standard Mac App, ImageOptim.

The Image Inspector

Select one or more PNG images in CodeKit and you'll see the Image Inspector:

Optimization Options

If you don't see this section of the Image Inspector, make sure you've selected only PNG images.

The primary option is which optimizer to run. CodeKit contains two:

PNGQuant (default)

OptiPNG

Which Optimizer Should I Use?

PNGQuant is the right choice 98% of the time. However, it may produce "banding" in images with subtle gradients like fog or clouds. For these images, consider OptiPNG.

OptiPNG is 100% lossless and works by deleting extra metadata and then recompressing your image file. However, since modern image-editing apps already write really efficient PNGs, you'll typically see only about 5% reductions with OptiPNG.

PNGQuant Quality

Below 85%, you may start to see "noise" in the optimized image. However, for images containing mostly solid blocks of colors (such as UI elements, screenshots, etc.) setting a lower value can reduce file sizes by 90% or more without any loss in visual quality. (Note: this value does not apply to OptiPNG, which is always 100% lossless.)

A Note About "Initial Size"

This is how large an image was the first time CodeKit ever saw it. The value never changes. So, if you start with a small image (say, 50x50 px) and then replace it with a bigger one (say, 5000x5000 px), it's possible that the current size may be larger than the initial size, even after optimization. In this case, the initial size isn't really accurate because it was set when a smaller file occupied the path.

Output Path & Action

Normally, CodeKit will not copy or process a file if its output path is the same as its input path. The exception to this is images.

Why Don't Images Optimize Automatically When I Add Them?

They will if your project uses a Build Folder. If not, CodeKit won't automatically optimize images as you add them to a Project because that's a destructive action—without a build folder, the optimized image overwrites the original one.