GIF vs JPEG @ OWDC - LESSON 1-07-04

LESSON 1-07-04: GIF vs JPEG

Web Design Lessons > Lesson 1-07-04: GIF vs JPEG

Previous Lesson | Lesson Index | Next Lesson

This section of Online Web Design Course will cover the difference between GIF and JPEG file formats.

GIF (Graphic Interchange Format) and JPEG (Joint Photographic Experts Group) are both image file compression formats. They both compress image files (like .bmp files) using a unique compression technique of their own, resulting in a dramatical decrease in the file size (therefore, the download speed) of images used on the web.

Sidenote: "File size" refers to the physical size of an image file in bytes, and not the size of the image. GIF and JPEG formats do not deal with image sizes (i.e. width & height of images), they deal with the image file sizes (i.e. 10 KB, 150 KB, etc...).

Because of the different compression techniques GIF and JPEG formats use, web designers have to know where to use which format, in order to achieve the greatest efficiency and the smallest file size. Online Web Design Course frowns upon wasting time - images with a large file size will waste your visitors' valuable time ;)

Now, let's explore what GIF and JPEG actually are.

The GIF Format

The Graphic Interchange Format was originally created by CompuServe for distribution of images inside their own network. GIF is used for images that contain a maximum of 8-bit (256) color depth. It uses a compression technique that defines colors as areas instead of pixel by pixel. So if an image contains large areas of single/solid/flat colors, the GIF format is ideal.

GIF images have the ability to be "transparent", "interlaced" and "animated". "Transparent" GIF images can show through the background they are placed upon. "Interlaced" GIFs show blurry image previews while downloading, instead of downloading from top to bottom. However this technique requires more data to be embedded inside the image file, resulting in a slightly larger file size. Lastly, "animated" GIFs can compile a slideshow of multiple images which can result in the animation of... an object, for example. Animated GIFs generally take up much more disk space than non-animated GIFs.

Bottom line is, use GIFs if your image contains flat areas of colors, rather than a smooth transition between different colors. GIFs are usually used for small-sized web graphics like buttons, backgrounds, cliparts, etc. Using a GIF for a photograph will increase the file size of the image AND reduce its quality most of the time. For images that contain many different colors and smooth transitions between those colors, web designers use the JPEG format.

The JPEG Format

The JPEG format was created by the Joint Photographic Experts Group, who named it after the name of their group.

JPEG is a platform-independant image file format, just like GIF. However, unlike the GIF format, JPEG uses a "lossy" compression technique, which means it throws out parts of the image file in order to compress it. Most of the time, this loss is not noticable by the human eye - making JPEG a formidable image compression format.

JPEG format is not limited by 8-bit color depth and is best used with images that contain many colors and less flat color areas (like photographs, pictures, etc.). Note that JPEG allows designers to determine the image quality/compression ratio, which enables designers to balance between the image file size and image quality.

Macromedia Fireworks

Online Web Design Course recommends the image editing software Macromedia Fireworks to everyone as of the time of this writing (October 10, 2004). Being the BEST image editing software that I have ever used until now, Fireworks gives the user COMPLETE control over the file size/quality ratio of your images, enabling you to create high quality images with small file sizes. It is a great software to develop images for use on the web. Note that Online Web Design Course is not affiliated with Macromedia in any way :)

Sidenote #1: Check out my web design resources page to download a superb eBook!

Sidenote #2: If you enjoyed this lesson, please link to it :)

Lesson 1-07-05 is going to cover the PNG image format. Let's proceed.

Previous Lesson | Lesson Index | Next Lesson

Nearby Lessons:

• Lesson 1-05 HTML Tables
• Lesson 1-06 Background Alteration
• Lesson 1-07 Images

• Lesson 1-07-01 Inserting images into your web pages

• Lesson 1-07-02 Adding alternative text to your images

• Lesson 1-07-03 Sizing images & adding image borders

• Lesson 1-07-04 GIF vs JPEG

• Lesson 1-07-05 The PNG format

• Lesson 1-07-06 Using spacer images
• Lesson 1-08 Hyperlinking
• Lesson 1-09 Aligning Your Content

Back To Top

IMAGES!

The GIF Format

The JPEG Format

Macromedia Fireworks