Servage Magazine

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

Optimizing PNG images – Part 2

Thursday, February 6th, 2014 by Servage

sx

Photoshop also asks if you’d like to start with your own optimization settings or let Photoshop select GIF or JPEG automatically. Curiously, PNG is not an option for automatic selection, so start with your own settings if you want to save as PNG.

Optimization in Review

If this collection of optimization techniques feels daunting, don’t worry. After a while, they’ll become part of your standard production process. You’ll find it’s easy to keep your eye on the file size and make a few setting tweaks to bring that number down. Now that you have the added advantage of understanding what the various settings are doing behind the scenes, you can make informed and efficient optimization decisions.

Reducing the number of colors

The most effective way to reduce the size of a PNG file, and therefore the first stop in your optimization journey, is to reduce the number of colors in the image.

Although PNGs can contain up to 256 colors, there’s no rule that says they have to. In fact, by reducing the number of colors (the bit-depth), you can significantly reduce the file size of an image. One reason for this is that files with lower bit depths contain less data. Another byproduct of the color reduction is that more areas of flat color are created by combining similar, abutting pixel colors. More flat color areas mean more efficient compression.

Nearly all graphics programs that allow you to save or export to PNG format will also allow you to specify the number of colors or bit depth. In Photoshop and Fireworks, the color count and the color table are revealed in the settings panel. Click on the Colors pop-up menu to select from a standard list of numbers of colors. Some tools give you a list of bit-depths instead.

Online Image Optimizers

If you don’t have Fireworks or Photoshop, you can use one of the free online image optimizing tools listed here. They do not give you control over settings that you find in web image tools, but they are effective and certainly better than no optimization at all.

Smush.it (www.smushit.com).

 Smush.it uses optimization techniques specific to image format to remove unnecessary bytes from image files. It is a lossless tool, which means it optimizes images without changing their look or visual quality. I’ve personally found that it finds a way to slightly reduce the file size of images. I’ve already optimized myself in Photoshop. This is a great resource.

Dynamic Drive Online Image Optimizer  (tools.dynamicdrive.com/imageoptimizer).

This is another online tool that takes your files and returns optimized versions based on more aggressive optimization settings. It is not a lossless tool, so you need to choose from the optimized images to find the one that maintains acceptable quality.

Optimizing PNG images – Part 2, 3.0 out of 5 based on 2 ratings
Categories: Guides & Tutorials, Tips & Tricks

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.