Multimedia Technology: Chapter 3 - Image File Formats: Choosing the Right Tool for the Job

Multimedia Technology: Chapter 3 - Image File Formats: Choosing the Right Tool for the Job

This chapter discusses various Image file formats, JPG, GIF, PNG, TIF, Difference between JPG vs GIF vs PNG.

Multimedia Technology Lecture 11|Image File Formats Revision |JPEG | GIFF | PNG images | JPG vs GIFF

Lecture Contents:

• Graphical Raster Devices
• Popular file Formats
• Graphical Image File Format (GIFF)
• JPEG / JPG
•  JPEG vs GIF
• Portable Graphics Network (PNG)
• Comparision between JPG vs. PNG
• Tagged Image file Format (TIFF)
• Exchange Image File (EXIF)
• System Dependent File Formats

(H1) Multimedia Technology: Chapter 3 - Image File Formats: Choosing the Right Tool for the Job

Hello everyone, and welcome back to Zeeshan Academy! I'm Prof. Dr. Zeeshan Bhatti. We've already explored how images are built from pixels and vectors and how color is represented. Now, it's time to answer a question you face every time you save a design or a photo: "Which format should I use?"

Understanding image file formats is like knowing the difference between a sprinter and a marathon runner; both are athletes, but you use them for completely different races. In this chapter, we'll dissect the most popular image formats—JPG, GIF, PNG, and TIFF—so you can always pick the champion for your project.

The Foundation: Raster Devices and Pixels

Before we dive into formats, let's quickly recap. Most of the formats we're discussing today are for raster images (or bitmaps). These are images composed of a grid of individual pixels, each with its own color value. Your computer monitor, smartphone screen, and digital camera sensor are all graphical raster devices that display or capture these pixels. The way we store and compress this grid of pixels is what defines a file format.

The Contenders: A Guide to Popular File Formats

GIF: The Animated Classic

• Full Name: Graphics Interchange Format

• Best For: Simple animations, logos with solid colors, and graphics with sharp edges.

• The Nitty-Gritty:

  • Color Limitation: This is GIF's biggest strength and weakness. It's limited to a palette of just 256 colors. This makes it terrible for photographs but perfect for graphics with few distinctive colors.

  • Compression: It uses LZW compression, which is lossless. This means no image data is lost when the file is saved.

  • Transparency: GIF supports a crude form of transparency, where a single color in the palette can be set to be completely transparent. There are no semi-transparent pixels.

  • Interlacing: This allows an image to load in passes, starting blurry and becoming clearer, which was useful in the days of slow modems.

  • Animation: The famous feature! A GIF file can store multiple frames to create a looping animation.

  • Fun Fact: GIF was devised by UNISYS and CompuServe, and its patented LZW compression once caused legal headaches, which is partly what led to the creation of PNG.

JPEG/JPG: The King of Photographs

• Full Name: Joint Photographic Experts Group

• Best For: Photographs, complex images with smooth color gradients, and any image where file size is a priority.

• The Nitty-Gritty:

  • Compression: JPEG uses lossy compression. This means it permanently discards data to achieve much smaller file sizes. The key here is that it's designed to discard information the human eye is less likely to notice.

  • Quality Control: You can usually set a quality level when saving (e.g., 1-100% or Low-High). Higher quality means less compression and a larger file.

  • The Trade-off: Every time you edit and re-save a JPEG, you lose more data, leading to a gradual degradation in quality known as "generation loss." It's best used as a final delivery format, not an editing format.

  • What it Lacks: No support for transparency or animation.

JPEG vs. GIF: The Classic Showdown

So, when do you choose one over the other? It's simple:

• Use JPEG for: Photos, realistic artwork, and any image with millions of colors and soft gradients.

• Use GIF for: Logos, line art, simple cartoons, and when you need animation or a simple, hard-edged transparency.

If you save a photograph as a GIF, it will look posterized and blotchy. If you save a logo as a JPEG, it will look blurry and might have a "halo" of artifacts around the text.

PNG: The Modern Web Favorite

• Full Name: Portable Network Graphics

• Best For: Web graphics requiring transparency, logos, screenshots, and images where quality is paramount and file size is secondary to JPEG.

• The Nitty-Gritty:

  • The GIF Replacement: PNG was created as a patent-free improvement over GIF.

  • Compression: It uses the ZIP compression algorithm, which is lossless. Your image quality remains perfect after saving.

  • Color Depth: It supports 24-bit RGB color (millions of colors) as well as 8-bit paletted color, making it far more versatile than GIF.

  • Transparency (The Killer Feature): PNG supports alpha channel transparency. This means each pixel can have 256 levels of transparency, from completely opaque to completely transparent. This allows for smooth, soft edges and shadows that blend seamlessly with any background.

  • No Animation: Standard PNG does not support animation (though a variant called APNG does).

JPG vs. PNG: The Modern Dilemma

This is the most common choice for web developers and designers today.

• Use JPG for: Complex photographs and images on your website where fast loading is critical.

• Use PNG for: Any graphic that requires transparency (like a logo over a background), images with sharp edges and text (like screenshots), and when you need a lossless format for editing.

TIFF: The Professional's Archive

• Full Name: Tagged Image File Format

• Best For: Professional photography, printing, and archival storage.

• The Nitty-Gritty:

  • Flexibility is Key: TIFF is a container format that can store images with many different types of data (monochrome, grayscale, 8-bit & 24-bit RGB) and compression methods.

  • Lossless (Usually): It is most often used as a lossless format, preserving all image data. However, it can also optionally use JPEG compression for a smaller, lossy file.

  • Tags: The "tagged" structure allows for a wealth of additional information to be stored within the file, such as layers, transparency, and printer settings.

  • The Downside: File sizes are very large, and it's not well-suited for the web.

 EXIF: The Data Sidekick

• Full Name: Exchangeable Image File Format

• What it is: EXIF isn't an image format itself; it's a metadata standard that is embedded into files (most commonly JPEGs and TIFFs) created by digital cameras.

• What it Stores: This "data about the data" is incredibly valuable. It includes:

  • Camera Settings: Shutter speed, aperture, ISO, focal length.

  • Date and Time: When the photo was taken.

  • GPS Data: Where the photo was taken (geotagging).

  • Copyright Information.

• Modern Evolution: Many camera manufacturers also have their own proprietary "raw" formats (like Nikon's NEF, which is based on the TIFF/EP structure) that contain even more unprocessed sensor data for maximum editing flexibility.

System-Dependent File Formats

It's also worth mentioning formats like .BMP (Windows Bitmap) and .PICT (old Macintosh). These are generally uncompressed, system-specific formats that result in very large files. They are largely obsolete for general use but are sometimes used internally by operating systems or specific applications.

Conclusion: Your Quick-Reference Guide

To sum it all up, here’s your cheat sheet:

• Photograph on a Website? -> JPG

• Logo or Graphic with Transparency? -> PNG

• Simple Animation? -> GIF

• Professional Editing or Printing? -> TIFF

• Need Camera Data? -> Check the EXIF info in your JPG or RAW file.

Choosing the right format is a fundamental skill that affects the quality, performance, and professionalism of your multimedia projects. In our next chapter, we'll add another layer to our visual understanding by exploring the science of Color in Images and Video.

Until then, I encourage you to take a single image and save it in each of these formats. Compare the file sizes and quality with your own eyes. There's no better way to learn!

Prof. Dr. Zeeshan Bhatti
Zeeshan Academy - https://www.youtube.com/@ZeeshanAcademy

GIF (GIF87A, GIF89A)

 Graphics Interchange Format (GIF) devised by the UNISYS Corp. And Compuserve, initially for transmitting graphical images over phone lines via modems.

GIF standard is limited to only 8-bit (256) colour images, suitable for images with few distinctive colours (e.g., graphics drawing). One byte per pixel.

GIF reduces colors to 256 (256 from 224 colors). Uses a colour map of 256 possible RGB values, contained in file. Only the 8 bit index is transmitted for each pixel that contains the closest match color to the original one.

Supports interlacing. - successive display of pixels in widely-spaced rows by a 4-pass display process.

 JPEG / JPG

•JPEG: The most important current standard for image compression.
A standard for photographic image compression created by the Joint Photographics Experts Group
• Takes advantage of limitations in the human vision system to achieve high rates of compression.
•JPEG allows the user to set a desired level of quality, or compression ratio (input divided by output).
• Lossy compression which allows user to set the desired level of quality/ compression.

PNG

PNG stands for Portable Network Graphics (PNG). The PNG format is intended as a replacement for GIF in the WWW and in image editing.
GIF uses LZW compression, which is patented by Unisys. All uses of GIF may have to pay royalties to Unisys - PNG contains no patented technology.
PNG uses unpatented zip technology for compression
Provides transparency using alpha value.
2 Dimensional interlacing.  

TIFF

• Tagged Image File Format (TIFF), stores many different types of images
(e.g., monochrome, greyscale, 8-bit & 24-bit RGB, etc.) –> tagged
• The support for attachment of additional information (referred to as \tags") provides a great deal of flexibility.
• Developed by the Aldus Corp. in the 1980’s and later supported by the Microsoft
The most important tag is a format signifier: what type of compression etc. is in use in the stored image.
• TIFF is a lossless format (but now a new JPEG tag allows one to opt for JPEG compression).
• It does not provide any major advantages over JPEG and is not as user controllable it appears to be declining in popularity

EXIF ( NOW NEF)

 (Exchang  Image File) is an image format for digital cameras:
1. Compressed EXIF _les use the baseline JPEG format.
2. A variety of tags (many more than in TIFF) are available to facilitate higher quality printing, since information about the camera and picture-taking conditions (flash, exposure, light source, white balance, type of scene, etc.) can be stored and used by printers for possible color correction algorithms.
3. The EXIF standard also includes specification of file format for audio that accompanies digital images. As well, it also supports tags for information needed for conversion to FlashPix (initially developed by Kodak).


Chapter 3_ Images File Formats