Generally speaking, you use Photoshop’s Save As to generate copies of your images for use on a website or to show off with smartphones, PDAs, and other such devices. You can, however, choose File→Export→ Save for Web (Legacy) if you prefer the old command. Here are the three file formats that you need for the web:
Use GIF for web interface items.
- JPG: Use JPEG for photos. Remember to resize the photo so that it fits on a web page. When selecting a Quality setting, you need to balance image appearance with file size. A smaller file downloads (and displays in a web browser) faster, but a larger file generally looks better. If you reduce the Quality setting until just before the image doesn’t look great, you’ve hit the sweet spot — the compromise between file size and image quality.
- GIF: GIF is more appropriate for items like web banners and buttons (such as those shown in Figure 2-15) than it is for photos. If you save a photo that’s more than perhaps 100x100 pixels in size, you might see some degradation of the image quality as similar colors become one color. When you save an image as GIF, it can contain no more than 256 distinct colors. JPEG and the other common file formats can have thousands of different colors.
- PNG: PNG comes in two types: PNG-8 (which is a substitute for GIF) and PNG-24 (which is a substitute for JPEG). PNG has a couple of advantages for web designers, such as support for transparency.
Use GIF for web interface items.
