Optimize Images in Photoshop for iPhone and iPad

By Janine Warner, David LaFontaine, and Lee Andron from iPhone and iPad Web Design For Dummies

You must use a graphics-editing program, such as Adobe Photoshop or Fireworks, to create graphics for the web when designing for the iPhone and iPad. You can use the Save for Web dialog in Adobe Photoshop to optimize images for faster download times.

The features in Adobe Photoshop CS5 are nearly identical to those in Photoshop Elements, so you can use the same instructions in either program. Similarly, the Save for Web dialog hasn’t changed in the last few versions of Photoshop, so if you’re using version CS2, CS3, or CS4, instructions written for CS5 should work just fine.

The most important thing to keep in mind when creating images for the web is that you want to optimize your images to make your file sizes as small as possible so that they download as quickly as possible.

How you optimize an image depends on how the image was created and whether you want to save it as a JPEG, PNG, or GIF. The bottom line is this: No matter what program, format, or optimization technique you choose, your biggest challenge is finding the best balance between small file size and good image quality.

Essentially, the more you optimize, the faster the image will download, but the compression and color reduction techniques used to optimize images can make them look terrible if you go too far.

As a general rule, do any editing, such as adjusting contrast, retouching, or combining images before you reduce their size or optimize them because you want to work with the highest resolution possible when you’re editing. Also, resize an image before you optimize it.