Using Adobe Photoshop to save as a .gif or .jpg

Most web browsers recognize graphics in GIF and JPEG formats. Just save your graphic or scanned image as one of these formats and use the .gif, .jpg, or .jpeg file extension after the file name, and the browser will know how to handle it. But what do these letters mean and which format should you use?

Gif
(Compuserve) graphics interchange format

Jpeg
Joint Photographic Experts Group

The .gif graphics format was designed for the purpose of uploading files to online services such as Compuserve. It is currently limited to 256 colors (8 bit) to reduce file size, but a 24-bit version is being implemented for the future.

Gifs (pron: "jiff") use compression techniques which were announced in early 1995 to be patented, which led to some confusion as to the legality of using gifs. However, this concern seems to have passed with an agreement between Compuserve and the patent holder (Unisys).

The .jpg (or.jpeg) graphics format supports many more colors than gifs (at least 24-bit or 16.7 million). It uses a lossy compression technique, so that every time you save a jpeg and reopen it you lose data. This is called a cumulative compression scheme. You can, however, save repeatedly to disk in a single session as the jpeg always works from the on screen version.

Photoshop allows you to select how much data is lost during compression. Saving an image at "maximum image quality" loses the least data but results in highest file size. Saving at "lowest image quality" does the opposite; a lot of data is lost, for a small file size.

When should you save as .gif and when should you save as .jpg?

Both .gif and .jpg files are compressed. .gif uses a lossless compression scheme which is optimized for images with regions of solid color. .jpg uses a lossy compression scheme which is optimized for images with many mixed colors (like photographs).

.gif files only require additional size when the color of horizontally adjacent pixels changes. In other words, a horizontal line of a single color takes the same amount of space no matter how long it is. This makes .gif format ideal for solid color images like logos, cartoons, and text stored as graphics.

.jpg files use a lossy compression technique (slightly adjusting the colors) to give a visually similar image that takes less space. You can choose how much compression (and color change) you want. For natural, photographic, or multi-color images, .jpg does a good job.

Choose .gif file format when you have a solid color image, and choose .jpg when you have a photographic image. When in doubt, try both formats and choose the one that gives the best image quality for the lowest file size.

Saving your graphic or scanned image

Saving as a .gif file

Saving as a .jpg file

First, you'll need to the change the color mode of the image from millions of colors (24, 30, or 32 bit) to 256 colors (8 bit). Choose the Mode: Indexed Color... menu command. The following dialog box will appear. Choose the settings shown below.

Choose the File: Save As... menu command.

Choose the "Compuserve GIF" file format type from the Format pop-up menu.

Type in a file name with a .gif file extension, i.e. "apple.gif", choose a location for the file, and click OK.

Choose the "Normal" radio button for the row order in the GIF Options dialog box, and click OK.

First, you'll need to make sure you only have one layer in your graphic. If you've been working with multiple layers (to add text, for instance), you should choose the Layer: Flatten Image menu command.

Choose the File: Save As... menu command.

Choose the "JPEG" file format type from the Format pop-up menu.

Type in a file name with a .jpg file extension, i.e. "apple.jpg", choose a location for the file, and click OK.

Choose the image quality or amount of compression you want. More compression means a smaller file, but also diminished image quality. Medium image quality is often a good compromise between file size and image quality. Click OK.