Three major graphic file formats are used on the web: GIF, JPEG, and PNG.
You can optimize images in these formats using one of the following methods:
- To precisely optimize an image for use in web authoring applications, you can use the Save For Web command. The Save For Web dialog box lets you preview your image in different file formats and with different optimization settings. You can also set transparency and animation settings.
- For basic optimization, you can use the Save As command. Depending on the file format, you can specify image quality, background transparency or matting, color display, and downloading method.
Optimized file formats for the web
You can choose between four formats for the web. Use the following guidelines when choosing the format for your web image:
JPEG/JPG (Joint Photographic Experts Group)
The JPEG format is great for compressing photos, although the format is destructive so if you compress too much the image will not look good. Make sure that you save the original of the image because each time you save a JPEG it loses quality.
- Don’t use JPEG for text or illustrations since you will get blocky areas.
- JPEG is best for compressing photos to small sizes.
PNG‑8/PNG‑24 (Portable Network Graphics)
The PNG format was created as a replacement for GIF and is usually a better alternative these days. The only issue with PNG has been support for transparency in various browsers, but there are tricks to overcome this.
PNG has support for both 8- and 24-bit images. 8-bit images can have 256 colors and is a good alternative to GIF while 24-bit can have millions of colors and is mainly intended for photos. Although photos can be made smaller in size using JPEG, PNG has the advantage that it is a non-destructive format, i.e. it will not alter or reduce the quality of the original image.
- Use PNG if you have images with few colors. Save as 8-bit.
- Use PNG if you have images that need to be identical to the original, with no compression artifacts. Save as 24-bit if the image has more than 256 colors.
- PNG is your only alternative if you need to have alpha transparency (partial transparency), but keep in mind that not all browsers support this.
Like JPEG, this is a good format for photographs. Choose PNG‑24 rather than JPEG only when your image contains transparency. (JPEG does not support transparency; you must fill it with a matte color.) PNG‑24 files are often much larger than JPEG files of the same image.
GIF (Graphics Interchange Format)
GIF is the format to use for line art, illustrations with large areas of solid color and crisp detail, and text. The GIF format is limited to 256 colors and shouldn’t be used for photos. Today PNG is often a better alternative than using GIF. If you use GIF you should try to reduce the colors as much as possible while still making sure the image looks good.
- GIF is your only option if you need to have animation but don’t want to use Flash, etc.
- GIF can also contain transparency which is fully compatible with all older web browsers (unlike PNG).
PNG
PNG‑8 is a lesser-known alternative to GIF. Use it for the same purposes (except animation).
Images in GIF and PNG‑8 formats, sometimes called indexed-color images, can display up to 256 colors. To convert an image to indexed-color format, Photoshop Elements builds a color lookup table. If a color in the original image does not appear in the color lookup table, the application either chooses the closest color in the table or simulates the color using a combination of available colors.
JPEG and PNG‑24 files support 24‑bit color, so they can display up to 16 million colors. Depending on the format, you can specify image quality, background transparency or matting, color display, and the method a browser should use to display the image while downloading.
The appearance of an image on the web also depends on the colors displayed by the computer platform, operating system, monitor, and browser. You may want to preview images in different browsers and on different platforms to see how they will appear on the web.
Web design 
