Chapter 6: Computer Animation Types and Techniques

Multimedia Technology

Chapter 6: Computer Animation Types and Techniques

By: Dr. Zeeshan Bhatti

Multimedia Technology: Chapter 6 Animation Techniques Part 3

Multimedia Technology: Chapter 3 - Digital Audio Fundamentals

Welcome back to Zeeshan Academy! I'm Prof. Dr. Zeeshan Bhatti, and we're moving from the visual to the auditory in our multimedia journey. If images are the nouns of multimedia, then audio is the verb and the adjective—it provides the action, the emotion, and the atmosphere. You can have a silent movie, but can you imagine a modern game, a streaming show, or a promotional video without sound? It’s nearly impossible, and that’s why understanding digital audio is non-negotiable.

Today, in Chapter 3, we’re going to decode how sound makes the leap from the real, analog world into the digital realm of our computers and phones.

Introduction: Why Audio is a Make-or-Break Element

Before we get technical, let's appreciate the power of sound. A subtle soundtrack can build tension. The clear, crisp voice of a narrator can make learning effective. The satisfying "click" of a button provides crucial user feedback. Poor audio quality, on the other hand—whether it's distorted, noisy, or out of sync—can instantly ruin an otherwise perfect multimedia project. Therefore, mastering audio isn't just an add-on; it's a core competency for creating professional and immersive experiences.

From Analog Waves to Digital Bits: The Core Concept

Sound in the real world is an analog phenomenon. It's a continuous wave of variations in air pressure. Our ears are analog sensors. But computers are digital machines; they understand only 1s and 0s. The process of converting an analog sound wave into a digital file is the foundation of everything we do. This process hinges on two critical concepts: Sampling and Quantization.

Sampling: Capturing Snapshots of Sound

Imagine you're trying to accurately draw a smooth, curving wave on a graph. One way to do it is to take many, many measurements of the wave's height at specific, regular intervals and then plot those dots. If your dots are close enough together, you can connect them to recreate the original wave very faithfully.

This is exactly what sampling does. An analog-to-digital converter (ADC) measures the amplitude (loudness) of the sound wave at a fixed rate.

• Sampling Rate: This is the number of samples taken per second, measured in Hertz (Hz) or kilohertz (kHz).

  • CD Quality: 44.1 kHz (44,100 samples per second)

  • Professional Audio: 48 kHz or 96 kHz

• The Nyquist-Shannon Theorem: This is a key piece of theory. It states that to accurately represent a sound, your sampling rate must be at least twice the highest frequency you wish to capture. Since human hearing tops out around 20 kHz, a 44.1 kHz sampling rate is sufficient for high fidelity. A higher sampling rate captures more ultrasonic information, which can be beneficial in professional mixing.

Quantization & Bit Depth: Measuring the Loudness

Now, let's talk about the precision of each measurement. Sampling tells us when to measure, but quantization determines how accurately we measure the amplitude at that moment.

• Bit Depth: This defines the resolution of each sample. Think of it like the number of lines on your measuring cup.

  • 8-bit: Provides 256 possible values for loudness. This is quite coarse and can lead to "quantization noise," a kind of distortion.

  • 16-bit: The CD standard. Provides 65,536 possible values. This is a massive improvement and gives us a wide, clean dynamic range (the difference between the quietest and loudest sound).

  • 24-bit: The professional studio standard. With over 16 million possible values, it offers a huge dynamic range, allowing for very quiet sounds to be recorded cleanly without noise and providing immense headroom for editing.

Together, a higher sampling rate and a higher bit depth result in a more accurate, higher-fidelity digital recording, but also a larger file size.

Common Digital Audio File Formats: Compressing the Sound

Storing uncompressed audio (like on a CD) creates very large files. This is impractical for streaming or embedding in applications. Therefore, we use audio codecs (coder-decoders) to compress the data. There are two main types of compression:

Lossless Compression
This compression reduces file size without discarding any audio data. It's like a ZIP file for audio. You get back the exact original data when you decompress it.

• Examples: FLAC, ALAC (Apple Lossless), WAV (uncompressed, but similar in principle).

• Use Case: Archiving, professional audio production, and for audiophiles who want the best possible quality.

Lossy Compression
This is the most common type for consumer audio. It uses perceptual coding to permanently discard audio data that the human ear is less likely to perceive (like very quiet sounds masked by louder ones). The goal is to create a much smaller file that sounds very close to the original.

• MP3 (MPEG-1 Audio Layer 3): The legendary format that revolutionized music. It offers a good balance of size and quality.

• AAC (Advanced Audio Coding): The successor to MP3. AAC is generally more efficient, providing better sound quality at the same bitrate. It's the standard for iTunes, YouTube, and Android.

• OGG Vorbis: An open-source alternative to MP3 and AAC, often used in gaming (e.g., Spotify uses a similar format, Ogg Opus).

Audio in Multimedia Applications

So, how is this theory applied? Let's look at a few key areas:

1. Music and Narration
This is the most straightforward use. High-quality, well-composed music sets the emotional tone, while clear narration delivers information. The key here is to choose the right format and bitrate to balance quality and file size for your delivery platform.

 2. Sound Effects (SFX)
These are short audio clips used to provide feedback and reinforce actions. The satisfying "ping" of a notification, the "whoosh" of a menu, or the "crunch" of a footstep in a game are all SFX. They are often used in bulk, so efficient format choice is critical.

3. The Power of MIDI
MIDI (Musical Instrument Digital Interface) is a completely different beast. A MIDI file is not an audio recording. It's a set of instructions—a digital sheet music that says "play a C# on the piano at this velocity for this long." When you play a MIDI file, your computer or device uses a built-in sound bank (synthesizer) to generate the audio.

• Advantages: Tiny file sizes, easily editable (change instruments, tempo, notes), and perfect for karaoke machines, ringtones, and music composition.

• Disadvantage: The sound quality is entirely dependent on the synthesizer playing it back.

The Modern Frontier: Spatial Audio and Interactive Sound

The field of audio is evolving rapidly. Spatial Audio (or 3D Audio) is becoming a standard in films, games, and VR. It uses advanced algorithms to trick your brain into perceiving sounds as coming from specific points in a 3D space—above, below, behind, or all around you. This creates an unprecedented level of immersion.

Furthermore, in interactive media like games, audio is no longer passive. Sound must dynamically respond to the user's actions and the game's environment, a complex field handled by audio engines like FMOD and Wwise.

Wrapping Up: Your Ears Are Your Best Tool

And that's the symphony of digital audio! We've covered how sound is digitized through sampling and quantization, how it's compressed into manageable files, and how it's applied across different multimedia domains.

For your practical takeaway, I want you to do two things:

1. Take a music file and convert it into a low-bitrate (e.g., 96 kbps) MP3. Listen carefully for the artifacts—the cymbals might sound "swishy," or the sound might lack "sparkle."

2. Find a MIDI file online and play it on different devices (your phone, a computer, etc.). Notice how the same file can sound completely different based on the synthesizer.

In our next chapter, we'll bring it all together and add the dimension of time as we explore Animation and Video.

Until then, listen critically to the world around you.

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

Chapter 6_ Computer Animation Types and Techniques

Module 3 Lecture 5: Installing Active Director on Windows Server 2008

Module 3 Lecture 5: Installing Active Director on Windows Server 2008
In this lesson we would learn about Active Director and How to install Active director setup in windows Server 2008.

 What is Active Directory?

­ 
- Lightweight Directory Access Protocol (LDAP) Directory Service

­- Works with and requires DNS

­- Incorporated into Windows 2000 and XP

­- Centrally Managed

­- Extensible

­- Interoperable

Module 3_Lecture 5 - Active Directory on Windows Server 2008

Module 3_Lecture 3 - Installing Domain Controllers

Module 3_Lecture 3 - Installing Domain Controllers

Installing Domain Controllers setup in Windows server 2008.

 - One of the greatest features of Windows Server 2003 is its ability to be a Domain Controller (DC). 

   - The full features of a domain are beyond the scope of this workshop, but some of its most well known features are its ability to store user names and passwords on a central computer (the Domain Controller) or computers (several Domain Controllers). 

  -  In this tutorial we will cover the "promoting" (or creating) of the first DC in a domain.  This will include DNS installation, because without DNS the client computers wouldn't know who the DC is. 

  - You can host DNS on a different server, but we'll only deal with the basics.

Module 3_Lecture 3 - Installing Domain Controllers by Zeeshan Bhatti

Step by Step Guide to install DHCP role and configure

This is another simple tutorial that would help students understand and install DHCP easily. I noted several students were still having problems and getting errors while installing DHCP in windows server 2008. Let’s see how we can configure DHCP server in a Windows Server Environment. For the demo I will be using Windows 2008 R2 Server.

To start first need to log in to the server with administrator privileges. Then start the “server Manager” by clicking on “Server Manager” icon on task bar. Then go to “Roles”





Then click on “Add Roles” option to open Add roles Wizard.
 


Then it will load the Roles Wizard and select the “DHCP Server” From the list and click next to continue.



Then it will give description about the role. Click next to continue.



Next window is asking to use which interface to serve DHCP clients. If server has multiple NIC with multiple IP you can add them also to serve DHCP clients.



In next window it will give opportunity to add DNS settings that should apply for DHCP clients.




Next window is to define the WINS server details.



In next window we can add the scope, the Starting IP, End IP of the DHCP range, subnet mask, default gateway, leased time etc.



In next Window it can configure to support IPv6 as well.



Then it will give the confirmation window before begin the install. Click on “Install”



Once installation finishes DHCP server interface can open from Start > Administrative Tools > DHCP



Using the DHCP it is possible to even configure multiple Scopes configurations to the network. In a network there can be different network segments. It is waste to setup different DHCP servers for each segment. Instead of that it is possible to create different Scopes to issue DHCP for them.

Color Subsampling, or What is 4:4:4 or 4:2:2??

Color Subsampling, or What is 4:4:4 or 4:2:2??

Multimedia Technology Lecture 14 | Data in Color | What Color represents | Information in Colors

Color Subsampling Demystified: What 4:4:4, 4:2:2, and 4:2:0 Really Mean

Hello everyone, Prof. Dr. Zeeshan Bhatti here from Zeeshan Academy. Today, we're diving into a topic that is crucial for anyone working with video, from aspiring filmmakers to multimedia developers: Color Subsampling. You’ve almost certainly seen these mysterious number ratios—4:4:4, 4:2:2, 4:2:0—on camera spec sheets or in editing software. They're often presented as a key quality differentiator, but what do they actually mean? More importantly, is upgrading to a higher number always the right move?

This confusion is common. As Karl Soule pointed out in his classic Adobe article, there's a pervasive myth that converting all your footage to a 4:4:4 format will magically improve its color. I'm here to tell you that this is generally not true, and by the end of this post, you'll understand exactly why.

The "Why": The Human Eye and the Need for Efficiency

First, let's understand the why behind color subsampling. The core principle is based on a clever trick that exploits a limitation of human biology: our eyes are significantly more sensitive to variations in brightness (luma) than to variations in color (chroma).

Video engineers realized they could dramatically reduce file sizes without a perceptible loss in quality by discarding some color information. This efficiency is the backbone of virtually every digital video format we use today, from your smartphone recordings to streaming services like Netflix and YouTube. Without it, video files would be impractically massive.

Decoding the Numbers: A Pixel Grid Walkthrough

The notation (4:4:4, etc.) can seem cryptic, but it's actually a simple description of how color information is sampled from a specific grid of pixels. Let's follow Karl Soule's excellent example and imagine a small 4-pixel-wide by 1-pixel-high sample.

The three numbers represent the sampling of:

• First Number (4): The Luma (Y) component. This is the brightness information, and it's sampled for every single pixel. The '4' is a reference point.

• Second Number: The Blue-difference Chroma (Cb/Cr) sampling for the first row of pixels.

• Third Number: The Red-difference Chroma (Cb/Cr) sampling, also for the first row. (In schemes like 4:2:0, this logic extends to a second row).

Let's visualize this on a 4x4 pixel grid to make it crystal clear.

(H3) 4:4:4 - The "Platinum Standard"

[Y][Cb][Cr]  [Y][Cb][Cr]  [Y][Cb][Cr]  [Y][Cb][Cr]
[Y][Cb][Cr]  [Y][Cb][Cr]  [Y][Cb][Cr]  [Y][Cb][Cr]
...and so on for all 4 rows.

In this ideal scenario, every single pixel has its own unique brightness, blue-difference, and red-difference values. There is zero color information loss. This is the standard for high-end digital cinema cameras, visual effects work (especially for green screen keying), and professional color grading suites where every bit of color data is critical.

4:2:2 - The "Professional Workhorse"

[Y][Cb]----[Cr]  [Y][Cb]----[Cr]  ... (Row 1)
[Y][Cb]----[Cr]  [Y][Cb]----[Cr]  ... (Row 2)

Here, the color information is shared between pairs of pixels. For every four pixels in a row, there are four Y samples, but only two Cb and two Cr samples. The color resolution is halved horizontally. However, because our eyes aren't great at perceiving sharp color edges, this is virtually indistinguishable from 4:4:4 in many situations. It's the standard for most professional video cameras (e.g., Canon Cinema EOS, Blackmagic) and broadcast formats.

4:2:0 - The "Consumer & Streaming King"

[Y][Cb]----[Cr]  [Y][Cb]----[Cr]  ... (Row 1 - has Cb & Cr)
[Y]----[Y]----[Y]----[Y] ... (Row 2 - has NO color data)
[Y][Cb]----[Cr]  [Y][Cb]----[Cr]  ... (Row 3 - has Cb & Cr)
[Y]----[Y]----[Y]----[Y] ... (Row 4 - has NO color data)

This is the most common format for consumer devices and streaming. The color information is not only halved horizontally but also halved vertically. For every 2x2 block of four pixels, there are four Y samples, but only one Cb and one Cr sample. This is what your DSLR, mirrorless camera (in most modes), smartphone, and online streaming services use. It's highly efficient and looks great for final delivery.

 The Great Misconception: Can You "Upsample" to Better Quality?

Now, let's tackle the central myth my friend encountered. He believed that converting his DSLR's 4:2:0 footage to a 4:4:4 editing codec would "make the color better."

This is incorrect, and here's the crucial reason why: The weakest link in the chain is your camera's sensor.

When your camera records in 4:2:0, it permanently discards 75% of the color information right at the source. Converting that file to 4:4:4 in post-production is a process called upsampling. The software can only guess at the missing color values by averaging the neighboring ones. It cannot recreate the original, lost data.

Think of it like taking a low-resolution JPEG and increasing its pixel dimensions in Photoshop. The image gets bigger, but it doesn't get any more detailed—it might even look softer. The same principle applies to color data.

So, When Does 4:4:4 or 4:2:2 Actually Matter?

This doesn't mean higher subsampling is useless. It's critical in specific scenarios within the production pipeline:

1. Heavy Color Grading & Visual Effects (VFX): If you are drastically changing colors or pulling a green screen key, having full 4:4:4 color data gives the software a much cleaner, more precise signal to work with. This results in cleaner edges and less color noise.

2. Multiple Generations of Editing: Re-encoding a 4:2:0 file multiple times can lead to "color smearing" or artifacts, as the compression errors compound. Starting with a 4:2:2 or 4:4:4 master is more robust.

3. Graphics and Text Overlays: Sharp, high-contrast edges (like small white text on a red background) can show chroma aliasing (color fringing) on 4:2:0 backgrounds. Higher subsampling prevents this.

The Modern Workflow: Native is Often King

Modern editing software like Adobe Premiere Pro, DaVinci Resolve, and Final Cut Pro is incredibly smart. As Karl Soule explained, they work natively with your footage. When you make a simple cut, the software leaves the original 4:2:0 data untouched. When you apply a color effect, the software temporarily upsamples the frame to a higher precision (like 4:4:4) for the calculation in real-time and then outputs it back to your delivery format.

Therefore, for most projects—especially those destined for web platforms—editing your camera's native 4:2:0 files directly is perfectly fine and saves you countless hours of transcoding with no quality benefit.

Conclusion: Work Smarter, Not Harder

In summary, color subsampling is a brilliant engineering compromise that makes digital video practical. Understanding the difference between 4:4:4, 4:2:2, and 4:2:0 empowers you to make informed decisions.

• Choose your acquisition format wisely: If you know you'll be doing heavy VFX, rent a camera that can record 4:2:2 or 4:4:4.

• Don't blindly transcode: Converting 4:2:0 footage to a 4:4:4 intermediate won't create new color data. It just creates larger files.

• Trust your software: Modern NLEs are designed to handle mixed formats and perform quality operations on-the-fly.

By focusing on the fundamentals, you can optimize your workflow for both quality and efficiency, ensuring you spend your time being creative, not waiting for unnecessary file conversions.

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

Inspired by the foundational work of Karl Soule and the Adobe Video Team.

Article Source (http://blogs.adobe.com/VideoRoad/2010/06/color_subsampling_or_what_is_4.html)

Photoshop Lab Task 8 Super Cool Frilly Text,

Photoshop Lab Task 8

This tutorial creates a Super Cool Frilly Text banner.  The first thing to do is to find the elements we will use. There are lots of websites where you can find nice vectors, and there's a post from Cameron Moll with a huge list of these sites. So that's a nice place to start.

 

Step 2
Open Photoshop and create a new document. I used 1680x1050 pixels. After that, type  abduzeedo and go to Layer>Layer Style>Gradient Overlay. Use Red, Yellow, Green, and Light Blue for the colors. I used Futura for the typeface

Photoshop Task 4, Creating a Wooden Frame & Mising Pictures

Photoshop Task 4

 Introduction:
Adobe Photoshop is an Image Processing software package that enables you to create & edit images on IBM personal Computers. Adobe Photoshop is acknowledged in professional fields as the cutting-edge Program, the final word in Textile Designing. Adobe Photoshop is world leading image manipulating program for graphics art and is used extensively in printing, publishing, www, photographic and graphic design industries.

Multimedia Technology - Chapter 5- Digital and Analog Video

Multimedia Technology, 

Chapter 5, Digital and Analog Video

Multimedia Technology Lecture15 | Digital Video |What is a Video | Video Signals | Interlacing |

Topics Covered

• Video
• Analog Video
• Video Signals
• NTSC, 
• PAL,
• SECAM, 
• Digital Video
• Analog to Digital Conversion
• Sampling and Quantization
• HD Video
• Compression,
• Chroma Sampling
• Creating and Shooting Video 

More Lecture Slides can be downloaded from https://sites.google.com/site/drzeeshanacademy/

VIDEO

Video uses Red-Green-Blue color space, Pixel resolution (width x height), number of bits per pixel, and frame rate are factors in quality, But there’s much more to it.

 
A video can be decomposed into a well-defined structure consisting of five levels
1. Video shot is an unbroken sequence of frames recorded from a single camera. It is the building block of a video.
2. Key frame is the frame, which can represent the salient content of a shot.
3. Video scene is defined as a collection of shots related to the video content, and the temporally adjacent ones. It depicts and conveys the concept or story of a video.
4. Video group is an intermediate entity between the physical shots and the video scenes. The shots in a video group are visually similar and temporally close to each other.
5. Video is at the root level and it contains all the components defined above.

 TYPES OF VIDEO SIGNALS

1. Component video
2. Composite Video
3. S-video

COMPONENT VIDEO SIGNLS

Component video: Higher-end video systems make use of three separate video signals for the red, green, and blue image planes. Each color channel is sent as a separate video signal.

Most computer systems use Component Video, with separate signals for R, G, and B signals.

For any color separation scheme, Component Video gives the best color reproduction since there is no “crosstalk” between the three channels.

This is not the case for S-Video or Composite Video, discussed next. Component video, however, requires more bandwidth and good synchronization of the three components.

Makes use of three separate video signals for Red, Green and Blue.

COMPOSITE VIDEO | 1 SIGNAL

Composite video: color (\chrominance") and intensity (\luminance") signals are mixed into a single carrier wave. Chrominance is a composition of two color components (I and Q, or U and V).

• Used by broadcast TV, In NTSC TV, e.g., I and Q are combined into a chroma signal, and a color subcarrier is then employed to put the chroma signal at the high-frequency end of the signal shared with the luminance signal.
• The chrominance and luminance components can be separated at the receiver end and then the two color components can be further recovered.
• When connecting to TVs or VCRs, Composite Video uses only one wire and video color signals are mixed, not sent separately. The audio and sync signals are additions to this one signal.
• Since color and intensity are wrapped into the same signal, some interference between the luminance and chrominance signals is inevitable.
•  

S-VIDEO | 2 SIGNALS

S-Video: as a compromise, (Separated video, or Super-video, e.g., in S-VHS) uses two wires, one for luminance and another for a composite chrominance signal.

• As a result, there is less crosstalk between the color information and the crucial gray-scale information.
• The reason for placing luminance into its own part of the signal is that black-and-white information is most crucial for visual perception.
• In fact, humans are able to differentiate spatial resolution in grayscale images with a much higher acuity than for the color part of color images.
• As a result, we can send less accurate color information than must be sent for intensity information | we can only see fairly large blobs of color, so it makes sense to send less color detail.

 ANALOG VIDEO

An analog signal f(t) samples a time-varying image. So called “progressive” scanning traces through a complete picture (a frame) row-wise for each time interval.

In TV, and in some monitors and multimedia standards as well, another system, called \interlaced" scanning is used:
 

a) The odd-numbered lines are traced first, and then the even numbered lines are traced. This results in “odd” and “even” fields --- two fields make up one frame.
 

b) In fact, the odd lines (starting from 1) end up at the middle of a line at the end of the odd field, and the even scan starts at a half-way point.

 

Multimedia Technology - Chapter 5_ Video

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