Optimizing Images

For years I've been annoyed at websites having big beautiful PNGs taking monumental amount of time to load. Over the years, I've created this method to vastly cut down the size of PNGs while both retaining quality and maintaining alpha transparency.

These instructions show how to optimize PNGs for display on the web.

Setup

  1. These instructions are created for Mac users. Windows optimizations will be similar, but with different programs
  2. Download and install the following 2 open-source programs:

Instructions

  1. In PhotoShop or other image editing software, load the image you'd' to optimize.
    1. Remove any background so you have a transparent image
    2. Trim the image so there is absolutely no padding between the image side and the actual image
    3. Save for Web SHIFT-OPTION-COMMAND-S the image:
    4. Save as a PNG-24 transparent PNG. DO NOT save it as a 256 color, 8-bit PNG.
  2. After saving, open the image in ImageAlpha:
    1. On the left hand side of ImageAlpha, you'll see the following areas:
    2. Media Cut (pngquant) Leave this setting alone
    3. Colors This is the setting to change. Only change with the slider and not by finite numbers (ie, stay at 2,4,8,16,32,64,128,256 colors). Do not go above 256 colors as that defeats the purpose of optimization.
    4. Options
      • Dithered Keep checked. Only uncheck if there is an unintentional gradient you'd like to remove
      • IE6-friendly alpha_ Always keep unchecked. Nobody uses IE6 anymore.
    5. Backgrounds Used to test how the PNG will look on different backgrounds. The green usually work best but depends on the image.
    6. On the bottom you'll see the following areas:
    7. Image Size Shows your image optimization success
    8. Smooth scaling Always keep checked
    9. zoom slider Move to ½x on Retina systems to see the image Retinafied
    10. To optimize image:
    11. Choose a contrasting background to fully see the outlines
    12. Move the Colors slider as far left as possible without a noticeable loss in quality
      • Take special note on how the image outlines look against the background
      • More complex, non-gradient PNGs can look good down to 16 colors
      • Very simple non-gradient PNGs can look good down to 4 colors
      • Gradient PNGs may have to go as high as 128 colors and sometimes (rarely) 256 colors
    13. When satisfied, save the image:
    14. FileSave as -or- [SHIFT-COMMAND-S]
    15. Name it the same or overwrite the original file (I usually overwrite it)
    16. Check Optimize with ImageOptim
  3. ImageOptim will now optimize the image
  4. Celebrate!

Try it yourself!

Practice on the logo-monkey-with-a-banana-before.png and match it to the logo-monkey-with-a-banana-after.png

  1. Monkey is reduced and trimmed with PhotoShop.
  2. Monkey is optimized in ImageAlpha at 16 colors (8 colors show aberrations on the monkey's outline)
  3. After optimization, Monkey is 95% smaller with virtually no loss in quality

Before

70kb(!) before optimization

After

5kb(!) after optimization