It Logo

Photoshop 2: What are the best Image Formats to use for Web Images?

The most common graphic formats on the Web are GIF and JPEG. Both of the formats have different strengths and so you should choose which format best fits your needs. If you intend to have a transparent background or want to animate your image, you need to choose the GIF format because JPEG does support these types. But, first you should begin with an original file - PSD that keeps all you image information in a Photoshop format. Read on to learn more about these formats.

Photoshop - PSD Format

There are two parts to saving an image because it is best to keep two copies of each image you make. One copy will be a layered photoshop file (with a file extension of .psd) that can only be used in Photoshop and the other will be a flattened version that can be used in a web page (file extension .gif or .jpg). It's a good idea to store all the images for your site in a separate folder, with the layered (Photoshop) files in a source folder within the images folder; that way you will have an easier time finding the particular kind of file you are looking for.

GIF - Graphics Interchange Format

GIF is usually pronounced"jif" and is the most common format on the Web. GIFs are perfect for smaller graphics that should look crisp and clean, but don't need more than 256 colors. In general we recommend that GIF files are used for graphical elements such as buttons, graphical text, line art etc. The compression of these relatively small images is sufficient and the quality will not be compromised. You can do animated images using the GIF format and you cannot do this with JPG format.

JPEG - Joint Photographic Experts Group

JPG is best for photographic images and graphics that have gradients. Digital photographs or scanned images can be converted in a way that finds a good balance between file size and image quality. The file extension is .jpg or sometimes .jpeg.

Here is a good breakdown of differences. You will discover the important use of LAYERS while working in Photoshop, so note which format works in layers and which does not.

GIF Format

JPG Format

Less than 256 colors or B/W, charts and diagrams Photos, Gradient Images, & High Resolution Images
Small file size.  DOES NOT USE LAYERS.   You must switch your image mode to RGB. Select Image - Mode - RGB. Larger but handles complicated images best. Using Medium Compression is Best. JPG loads in RBG mode which supports LAYERS.
To Save as a GIF Format - Select File - 'Save for Web' command. The following screen lets you select GIF or JPG format with several compression options. To Save as a JPG Format - Select File - 'Save for Web' command. The following screen lets you select GIF or JPG format with several compression options.

TIP!!: A good rule of thumb when working in Photoshop is to convert all images to the RGB mode before you edit them.

Other Image Formats

It is a good idea to mention other image formats that are not used for the web, but can be used for print work.

Bitmap Mode - is a raw file format with no compression. File size can be very large and the web does not support this format.

TIF Mode - Many older software and scanner software  support this format and not GIF & JPG.   When using a scanner with software like this, you will have to save your scanned image as a TIF and then open in another image application to convert it for web use. TIF is often used on Macintosh computers.

CMYK Mode - BEST for specialized printing processes like color separations (cyan, magenta, yellow & black)