How to Reduce PNG File Size

What are PNG files?

PNG files are a high quality alternative to GIF files. While GIF files are able to provide transparency, they're also limited to 256 colors. This can dramatically degrade the quality of the final output image since monitors are able to show upwards of 16.7 million colors.

With PNG files, you have the ability to take advantage of transparency, you can animate them, and you are able to save them without loss of color or quality. The ability to take advantage of transparency and lossless encoding make them a popular choice for web designers and web developers; they are one of the most commonly used image file formats on the web along with JPG. If you're unsure what the difference is between PNG and JPG files, consider reading our PNG vs JPG Images post.

The need to reduce the size of PNG files

There is one major downside to PNG files, and it is that the file size of this type of image can get large quite quickly. In some cases, just adding a few pixels of additional width to a PNG file can double the file size.

When you're using them on a website or in an app, PNG files that haven't been optimized can dramatically increase load times. Some image editors don't automatically reduce PNG file size for you, so you'll like need to make use of an optimization tool / service to reduce the image file size.

The good news is that there are a variety of methods and tools that can reduce the size of PNG files by anywhere from 10 to 80 percent depending on the tool and the image in question.

Reduce PNG file size by limiting colors

One of the most basic ways to cut down on a PNG's file size is to limit the number of colors that the image has. PNGs can be saved as Grayscale, Truecolor, Indexed-color, Grayscale with alpha, and Truecolor with alpha. Being saved with alpha means that the PNG also has transparency.

A PNG file saved in Truecolor is going to have a larger file size than one that is saved as Grayscale or Indexed-color. If an image is in black and white or only has a few colors, such as with a logo, it's a good idea to save it with the lowest color option. Indexed-color allows you to save the image with upwards of 256 colors, and you can make this adjustment in most photo editors.

Tools to reduce PNG file size

The easiest way to reduce PNG file size if you're working with a number of images is to use an online tool, plugin, or script. Optimus offers users 2 ways to reduce PNG file size. If you're using a WordPress site, you can install the Optimus plugin to automatically optimize your PNG images as you upload them. You also have the ability to bulk optimize existing images, optimize thumbnails, convert to WebP and more.

There are also a number of other tools available for compressing and reducing PNG file size. They work in different ways, so you may need to find the one or ones that are right for you.

• Pngquant - This open source PNG compressor is available as a command line tool, so you can compress multiple images at once with a single command. You can also download a few programs that will allow pngquant to work with a user interface. The tool is able to reduce file sizes by as much as 70 percent while retaining transparency.
• PNGGauntlet - PNGGauntlet is another batch conversion tool, but it is available as a standard program for your computer. It takes advantage of PNGOUT, OptiPNG, and DeflOpt. The program shows you the original and final file size as well as the percentage it was reduced by. The program can also convert JPG, GIF, TIFF, and BMP files to PNG.
• PngOptimizer - Lastly, this tool is another PNG optimizer that cleans up any meta-data information and reduces overall PNG file size. If offers a simple user interface and allows you to drag and drop files in order to start the optimization process. It then displays the file size before and after optimization.

As you can see, there are a variety of tools currently available to users who want to optimize their PNG images for better performance. Choosing the tool that works best for you and delivering optimized PNG images is one of the best ways to improve your website's loading speed.