Best Image Formats for iPhone and iPad

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

When you design websites for the iPhone and iPad, you need to choose the best image formats for any photos, line art, logos, cartoons, and other images that you want to display.

If you work with photos or other images that have millions of colors, the JPEG format is the best choice for the mobile web, just as it is for the desktop web. Using JPEGs, you can shrink the file size by applying compression.

The more compression that’s applied, the smaller the image, but if you compress the image too much, the image can look like it was sandblasted and left out in the sun.

For images with limited colors, such as line art, logos, and cartoons, the best format for mobile devices and web pages is PNG. Some designers will tell you that the GIF format is the safer choice — and maybe it was, for older mobile devices and low-end feature phones.

The iPhone and iPad, however, support the PNG format, and it does a better job of maintaining image quality and small file sizes than GIF does. With both GIF and PNG files, you optimize (or reduce) the file size by decreasing the number of colors.

Don’t be confused by the two types of PNG files. Photoshop supports both PNG-8, which supports 256 colors, and PNG-24, which supports a far superior 8 bits per channel and is especially well suited to working with transparency.

You can still use the JPEG format for photographs and other types of images, but because transparency isn’t possible in JPEGs, the PNG-24 format offers an advantage. Just remember that all that color depth also creates larger file sizes that take longer to download.