All About JPG and GIF Image File Formats

The JPG (or JPEG) and GIF image file types are the two most popular formats used by computer and Internet users.

Digital cameras usually produce images in JPG format, while images in GIF format are typically more graphic-related.

It's important that we understand the differences between GIF and JPG formats, and when to use each.

But before we compare GIF and JPG, let's briefly discuss digital graphics in general.

Author: Keynote Support

Overview of Digital Graphics

There are two types of digital graphics: bitmap (or raster) graphics - which include JPG and GIF formats, and vector graphics. Photographs and clip art are usually stored as bitmap images. Vector graphics is best suited for line art, shapes, or diagrams.

Difference between Bitmap (JPG, GIF) and Vector Graphics

Bitmap images are composed of tiny squares called pixels (px), and each pixel is assigned a specific color. If a JPG or GIF image is magnified greatly in a program like Adobe Photoshop, individual pixels can be viewed and changed. A tiny image 10 px wide by 12 px high would contain 120 pixels, as illustrated below. Also notice in the example how small an actual 10px by 12px image is on your display! The size of the outlined image below is 250px by 200px and contains a total of 50,000 pixels.

Vector images are not composed of pixels. Instead, information about the color in a vector image is stored in mathematical formulas. An advantage of a vector image is that its quality remains the same regardless of how much you increase its physical dimensions.

To edit a vector image in a photo-editing program like Adobe Photoshop, the image first must be "rasterized" by the program - or converted into pixels. Bitmap graphics is often called raster graphics.

Most folks work with bitmap images because digital photographs are usually bitmap (JPGs), as is clip art and images displayed on the Internet.

Bitmap Resolution and Image Size

An image also has a particular resolution - or pixels per square inch. The higher the resolution of a bitmap image, the better its quality. Likewise, the lower the resolution, the poorer its quality. In fact, at very low resolutions, one might be able to see individual pixels!

Image resolution is most important when printing images. If using a color printer that can print 1200 dpi (dots per inch), then it will be able to print every pixel of an image with a resolution of 1200 ppi. If that same image had a resolution of 100 pixels, the print quality would not be nearly as good. Image editing software like Adobe Photoshop allows the user to change the size and resolution of an image.

If an image is resampled when the width and height are changed, then the number of pixels will also change. But if an image is resized (width and height) without being resampled, the total number of pixels will not change. Suppose we have an image that is 28 inches wide by 21 inches high, with a resolution of 72ppi. If we change the width to 4 inches and keep the "resample" box checked in Photoshop, the now-smaller image will also have a resolution of 72ppi and will contain a lot fewer pixels. However, If we change the width to 4 inches and do not resample the image, the total number of pixels will not change - which will allow the resolution to increase to 504 pixels per inch!

For printing purposes, do not resample an image that you are resizing to a smaller width and height. By not resampling, you will keep the total number of pixels, but squeeze them into a smaller size - thereby increasing the resolution of the image (ppi) and improving its print quality.

Bitmap Image Formats

The two most popular types of bitmap files are the JPG and GIF formats. Another format, PNG, is relatively new and not fully supported, so we will discuss it at another time. JPG and GIF file formats have particular advantages and disadvantages. If you are working with images for projects or websites, it is important to understand how they differ.

JPG (or JPEG)

The JPG (or JPEG) file type is pronounced "jay-peg" and is an acronym for Joint Photographic Experts Group. The JPG file type supports 16.8 million colors, many more than GIF. As such, it is the file format of choice for most photographs. The JPG format is also best suited for images that require smooth transitions between different colors, such as gradients and drop shadows.

A disadvantage of the JPG file format is its characteristic of introducing "noise" into an image whenever the image is changed or compressedand re-saved, or compressed. For instance, if a section of an original image has an area of solid blue (each pixel containing the exact same color), each time the file is changed and re-saved, some percentage of these blue pixels will change to a slightly different shade of blue.

A JPG file cannot contain any transparent areas - each pixel must contain a color. Nor does the JPG format support animation.

GIF

The GIF file type is pronounced "jiff" and is an acronym for Graphics Interchange Format. As GIF only supports 256 colors, it is not the format of choice for most photographs. GIf is best for images that are flat, with limited colors and crisp detail. Adobe Photoshop always stores GIF files with a resolution of 72ppi. Clip Art images are often GIF - or should be. Images best suited for storing in the GIF format are line art, clip art, images with areas of solid color, charts, and graphic text.

The GIF format does support transparency and animation, which are defined below. But a note for users of Adobe Image Ready - a program that shipped with older versions of Adobe Photoshop: the CS versions of Photoshop have incorporated the functionality of Image Ready except for the ability to create or edit animated GIFs. You must either purchase Adobe Fireworks, or keep Image Ready installed on a different computer.

GIF Transparency and Animation

Unlike JPG files, in which each pixel MUST contain a color, GIF files may contain pixels with no color - or transparent. When an image contains an area of transparency, the background color or background image will show through when the GIF image is placed on a website or other medium.

The GIF file type supports animation. An animated image is one that contains several frames, with one image per frame. The images inside of the frames differ slightly to produce the animation effect. When the main image is viewed, the frames are quickly displayed one right after the other which produces the desired effect of a simple repeated motion.

JPG or GIF … Which Do You Choose?

  • Always keep photographs stored as JPG files except in unusual situations described below.
  • Always keep clip art stored as GIF files. If you download a clip art JPG file, convert it to a GIF file. That way you can change its size or crop it and the colors will always stay pure.
  • When creating clip art, or an image with very few colors or large blocks of solid color, save the image as a GIF.
  • If you want areas of transparency in an image, you will have to save or convert the file to the GIF format.
  • If you are creating an image with a background color and you want that color to blend with the background color of a webpage or other medium, you should save the image as a GIF file. See the tutorial Optimizing Web Graphics.

JPG or GIF … How Can You Tell?

You always know what a file's type is by its file extension. If you understand file extensions, skip this section. Otherwise, we suggest you read our Windows Basics tutorials. As a quick review, every file has a filename consisting of two parts: name.extension. You choose the "name" portion of the filename, and the extension is predetermined by the software program or person/device that created it.

You can see the file extensions when you view your files via My Computer or Windows Explorer. If you don't see any file extensions, then you must tell Windows to display them. In My Computer or Windows Explorer, click Tools / Folder Options. Then click the View tab and remove the checkmark next to "Hide extensions for known file types."

Golden Rule of Image Manipulation

Let us end by emphasizing GRIM - the Golden Rule of Image Manipulation! Always make a copy of an image before modifying it. How many folks have changed a photograph in some way and realized too late that they no longer have the original! Either create a copy of the image in Windows Explorer (or My Computer); or open the image in Adobe Photoshop, click Image / Duplicate, and close the original image before proceeding.

Other Image File Formats

There are a variety of other file formats available for images. On Windows PCs, one might occassionally see an image format of BMP. Because they are uncompressed files, this format tends to be device-independent, or easily exchanged between Windows programs. But because of their uncompressed nature, BMP files are usually very large in size. Therefore, the BMP format is unsuitable for most images used on PCs or the Internet.

The PNG format stands for Portable Network Graphics. It is one of the newest formats and was designed to replace the GIF format. Because the PNG format supports 16 million colors, versus GIF's support of 256 colors, but images stored in the PNG format can be large in size, and are often not as well-suited for Internet use.

The Tagged Image File Format, or TIFF, is an image format best known by those in the printing business. The TIFF format supports the CMYK color scheme used in that business. As TIFF files are not supported by web browsers, most folks will not use the TIFF file format.

We hope you've enjoyed our charts. Cheers!

Return to the top

Please link to this tutorial using the following HTML:

<a href="http://www.keynotesupport.com/pc/gif-jpg-image-formats.shtml">All About JPG and GIF Image File Formats</a>