Graphics File Type Choices for Web Design
The most suitable file formats for a web site are JPEG and GIF. Using these file formats is not as easy, as it seems. And the usual question is JPEG or GIF – what file format to use?
JPEG
The Joint Photographic Experts Group (JPEG or JPG) format compresses photo files with different level of compression. The higher the compression levels the lower the image quality and the file size. You choose the compression level when you save the file. Even the lowest compression value reduces the file size more than three times. For example, if you save a 10Mb TIFF file as a highest quality (lowest compression) JPEG, the resulting file will be between 1 and 3Mb. The file size depends on what especially you have on your photos. The ones with more monochromatic color content will give you smaller resultant file.
JPEG is useful when your photo has smooth color transitions and gradients. Otherwise you will probably use GIF or PNG.
GIF
Graphic Interchange Format (GIF) files are indexed color images with maximum 256 colors. GIF is not good for compressing full color photos, since the number of colors in the image will be reduced to 256 and the file size will be larger than a JPEG. GIF is the best choice for compressing solid color illustrations without smooth color transitions such as logos and type. Photoshop will allow you to chose from several color tables options and to choose the exact number of colors in your GIF illustration. GIF files support transparent background, background matting and can be used for saving multi-frame animations.
PNG
Portable Network Graphics (PNG) is a rarely used format. It delivers very high quality on both photos and illustrations, but it’s bigger sized than GIF and JPEG files. There are two standards for PNG files – PNG-8 (with 8-bit color) and PNG-24 (with 24-bit color). As you can suppose, the first one is smaller size and lower quality.
I do not recommend you to use PNG’s except you need very high quality with fine details and smooth gradients or color transitions.