Use the Best Image Formats and Sizes - dummies

Use the Best Image Formats and Sizes

If you’ve been doing web design for a while, you probably have realized that the PNG and GIF formats are generally best for line art, such as logos or cartoons, and that the JPEG format is best for photographs and other images that have millions of colors.

The same format guidelines hold true on the latest versions of the iPhone and iPad, but if you want your images to display well on all devices in the iOS family, stick to the PNG format for all your images. It’s also a good choice for iPhone and iPad apps because the iOS Software Development Kit (SDK) automatically optimizes PNG images.

The PNG format is the most confusing of the three image formats used on the web, in part because it’s the newest. In the early days of the web, designers used the GIF format because all the early web browsers could display it.

The PNG format offers superior quality with smaller file sizes, and because web browsers have supported PNG for more than a decade, most designers have upgraded to using PNG instead of GIF. Still, the legacy message that the GIF format is better supported than PNG means that some people have the misconception that GIF is a better option.

Adding to the confusion is the multiple kinds of PNG files that exist. 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 images, but transparency isn’t possible in JPEGs, so the PNG-24 format offers an advantage.

The question that remains is whether the superior color depth of PNG-24 is worth the additional time it takes to load PNG-24 images because of the larger file size that comes with all that color depth.

Ultimately, you have to decide what’s more important to you for your designs — the best color and image quality, or fast download speeds.


Either way, you can save any image in the PNG format by using Adobe Photoshop, shown in Figure 3-12, by choosing File→Save for Web and then selecting the PNG-8 or PNG-24 from the image format drop-down list, which is open in the figure.