Aside

Pro-tip: Prep your images for the web

I am asked fairly often how someone can best prepare their images for the web. The answer is fairly simple, you should reduce the file size as much as possible without impacting quality.

One tool to do this on the Mac is an open source application called ImageOptim. ImageOptim is a GUI front-end for several open source applications designed to remove hidden or unused attributes from images.

Figure 1. The uncompressed original screenshot of weaverPix 2.0’s preferences. Dimensions: 745x610px Size: 119KB

Figure 2. The compressed representation of Figure 1. Dimensions: 745x610px Size: 78KB!

Figure 3. The result provided by ImageOptim resulted in a 34.1% reduction in file size!

In summary it is a few simple step process,

  1. Make a backup copy of your images.
  2. (Optional) If background transparency isn’t required, try to use jpeg. Jpegs typically yield smaller file sizes than PNGs.
  3. Reduce the image size. I typically use 320×240 or 640×480. Tip: You can do this in Preview.app via the Tools > Adjust Size menu
  4. Use ImageOptim to remove hidden file artifacts within the image

May 29, 2010 1 Comment , , , , ,

  • Douglas

    This was great information.  Thanks for providing this.  In addition to this I used the Save for Web feature in PS – PNG8 presets – 256colors and it worked just fine – the image sizing was the same or very close to what the IMAGOPTIM gave which actually surprised me.

    The downside to using PhotoShop is that it’s crazy expensive.  So grateful to have the OpenSource utility.

    Thanks to everyone out there that puts all the hard work into making it easier to be creative!