Latest TweetsDifference between mod_alias and mod_rewrite perishablepress.com/difference…
Perishable Press

5-Minute PNG Image Optimization

A great way to improve the performance of your site is to optimize the size of your images. Smaller image sizes require less bandwidth, disk space and load time, and ultimately improve visitor experience.

In this article, I share my effective 5-minute technique for optimizing PNG images. This is a two-step, lossless optimization process that removes as much extraneous data as possible without sacrificing any image quality whatsoever. It’s fast, free, and highly effective.

Step 1: Optimize with OptiPNG or Pngcrush

For the first (and most important) step in our image-optimization process, we want to run our PNG images through a command-line optimizer like OptiPNG or PNG Crush.

Either of these powerful programs will remove unnecessary data from your PNG images without reducing image quality. Both are excellent programs that work beautifully. Here are the commands that I use to optimize my images with either OptiPNG or Pngcrush.

PNG Crush

If you decide to use Pngcrush, try this command for great results:

pngcrush -rem allb -brute -reduce original.png optimized.png

Quick break down of the different parameters:

  • pngcrush — run the pngcrush program 1
  • -rem allb — remove all extraneous data 2
  • -brute — attempt all optimization methods 3
  • -reduce — eliminate unused colors and reduce bit-depth 4
  • original.png — the name of the original (unoptimized) PNG file
  • optimized.png — the name of the new, optimized PNG file

OptiPNG

If you decide to use OptiPNG, throw down with this fine command:

optipng -o7 original.png

OptiPNG is very straightforward (and very effective):

  • optipng — run the optipng program 5
  • -o7 — optimize the image at the highest possible level 6
  • original.png — the name of the PNG file to be optimized

Or, to batch process an entire directory of PNG images, use this:

optipng -o7 *.png

Important note: to keep a backup of the modified files, include the -k parameter before the file name within the execution command. Just in case!

Step 2: Optimize with Smush.it

Now that you have stripped out all the extraneous data from your PNGs, it’s time to smush ‘em even more with the powerful Smush.it online optimizer. It’s so easy. Simply click on the “Uploader” tab, upload your images, and let Smush.it do its thing. Smush.it optimizes your images on the fly and even returns a summary of the saved bytes and percentages. I always get a sh.it-eating grin on my face whenever I use this excellent service. ;)

[ Screenshot: Smush.it Online Optimizer ]
Click image for details

And that’s all there is to it! Once you are done uploading your images to Smush.it, download the provided zip file and compare your optimized file sizes with those of your original images. If all goes well, you should enjoy anywhere from a 5% to 30% (or more) reduction in size, depending on the complexity and size of your images. And best of all, this fast, free and effective technique is completely lossless, meaning that your images suffer absolutely no loss of quality. Nice :)

Notes

  • 1 Using the specified parameters
  • 2 Except transparency and gamma; to remove everything except transparency, try -rem alla
  • 3 Requires more processing and may not improve optimization by much
  • 4 If possible
  • 5 Using the specified parameters
  • 6 Requires more processing time and may not improve optimization by much; optimization levels range from 0 – 7, with 7 being the most intensive

Jeff Starr
About the Author Jeff Starr = Creative thinker. Passionate about free and open Web.
Archives
55 responses
  1. @Taimar: mac users need love too! :(

  2. @Taimar: well, thank you very much! You sir are quite a gentleman. I didn’t know about these apps, and God, they look awesome!

  3. Phil Nelson June 8, 2009 @ 7:45 pm

    Thanks for the PNGPress shout-out, Taimar!

  4. You’re Welcome :)

  5. Great post. Thanks for the information and link to optiPNG.

  6. In Linux:

    find -type f -name "*.png" -exec optipng -o9 '{}' ;
    find -type f -name "*.gif" -exec gifsicle -O2 -b '{}' ;

    :-)

  7. Conrad Chu June 30, 2009 @ 1:12 am

    I’ve been working on a service similar to smush.it called punypng.

    It’s free and just another contribution towards making the web more puny.
    http://www.gracepointafterfive.com/punypng

  8. Nicholas Storman July 18, 2009 @ 12:40 pm

    Just curious which settings do you use in save for web in Photoshop?

  9. Jeff Starr

    Hi Nicholas, it really all depends on the purpose of the image. For JPEG files, I like to find the right balance between smaller file size and quality, which generally happens for me in the 66% – 88% range. For PNG files, I use 8-bit for GIF-like images and 32-bit when alpha transparency is required. GIF files are usually set with 128 – 256 color pallets, unless the image is suitable for fewer colors. Other settings vary, depending on the project, etc.

  10. Sunny Senevirathne October 20, 2009 @ 12:09 am

    I am trying to find a technique for optimize character searching mechanism for Unicode characters..If any of you know any method to efficiently search Unicode characters please let me know. Thanks!

  11. Vincent RABAH February 1, 2010 @ 1:20 pm

    93K vincent-round-full.png the original (a picture of me)

    pngquant 256 vincent-round-full.png :
    33K vincent-round-full-quant-256Colors.png

    pngquant 128 vincent-round-full.png :
    26K vincent-round-full-quant-128Colors.png

    The result is quite impressive :)

[ Comments are closed for this post ]