Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Advanced PNG optimization

Tuesday, March 18th, 2014 by Servage

rd

There are two types of PNG files: 24-bit PNGs (PNG-24), which contain colors from the millions of colors in the RGB color space, and 8-bit indexed PNGs (PNG-8) with a palette limited to 256 colors. This section looks at what you can (and can’t) do to affect the file size of both kinds of PNG files.

PNG-24

PNG’s lossless compression makes PNG-24 a wonderful format for preserving quality in images, but unfortunately, it makes it a poor option for web graphics. A PNG-24 will always be significantly larger than a JPEG of the same image because no pixels are sacrificed in the compression process. Therefore, your first “lean and mean” strategy is to avoid PNG-24 for photographic images and choose JPEG instead.

The exception to this rule, of course, is if you want to use multiple levels of transparency (alpha transparency). In that case, given today’s tools and browsers, PNG-24 is your only option.

There aren’t any tricks for reducing the file size of a PNG-24, as evidenced by the lack of options on the PNG-24 export panels. You’ll have to accept the file size that your image-editing tool cranks out, although you may try running it through the online image optimization tool Smush.it (www.smush.it) to see if it can make any improvements.

PNG-8

Indexed color PNGs work similarly to GIFs, and in fact, usually result in smaller file sizes for the same images, making them a good byte-saving option. The general strategies for optimizing GIFs also apply to PNG-8s:

• Reduce the number of colors

• Reduce dithering

• Design with flat colors

You can see that the list of export options for PNG-8s is more or less the same as for GIF. The notable exception is that there is no “lossy” filter for PNGs as there is for GIFs. Otherwise, all of the techniques listed in the Optimizing GIFs section apply to PNGs as well.

It is worth noting that making a PNG interlaced significantly increases its file size, by as much as 20 or 30 percent. It is best to avoid this option unless you deem it absolutely necessary to have the image appear in a series of passes. For an in-depth look at PNG compression and optimization, I recommend the Smashing Magazine article “Clever PNG Optimization Techniques,” by Sergey Chikuyonok techniques.

Optimize to File Size

There is one last optimizing technique that is good to know about if you use Photoshop or Fireworks.

In some instances, you may need to optimize a graphic to hit a specific file size, for example, when designing an ad banner with a strict K-limit. Both Photoshop and Fireworks offer an Optimize to File Size function. You just set the desired file size and let the program figure out the best settings to use to get there, saving you lots of time finagling with settings.

ds

This feature is pretty straightforward to use. In Photoshop, choose Optimize to File Size from the Options pop-up menu in the Save for Web dialog box.

In Fireworks, choose Optimize to Size from the Options pop-up menu in the Optimize panel. All you need to do is type in your desired target size and click OK. The tool does the rest.

Advanced PNG optimization, 4.5 out of 5 based on 2 ratings
Categories: Guides & Tutorials

Keywords:

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.