Image and Video Fundamentals: Formats, Compression, and Processing

TAKEAWAYS:

• Digital images are represented as pixel grids (raster) or mathematical equations (vector), each suited for different use cases (e.g., photos vs. logos).
• Color models (RGB, CMYK, HSL) define how colors are encoded and displayed, with RGB dominant in screens and CMYK in print.
• Video formats (e.g., MP4, AVI) store frames sequentially, with codecs like H.264 balancing quality and file size.
• Compression reduces file size via lossy (e.g., JPEG) or lossless (e.g., PNG) methods, critical for storage and streaming.
• Image/video processing includes filtering (e.g., blurring), transformations (e.g., rotation), and morphing, used in apps like photo editors or video effects.
• Real-world systems (e.g., eSewa’s QR code generation, YouTube’s adaptive streaming) rely on these principles for efficiency and user experience.

1. Digital Images: Raster vs. Vector Graphics

Digital images are categorized into two primary types: raster (bitmap) and vector, each with distinct characteristics and applications.

Side-by-side comparison of a pixelated raster image (left) and a scalable vector logo (right) for Nabil Bank (Image: TU Wien: Dirk Praetorius, Michele Ruggeri, Public domain, via Wikimedia Commons)

Raster Graphics

• Represented as a grid of pixels (picture elements), where each pixel stores color and brightness data.
• Resolution-dependent: Scaling up raster images causes pixelation (loss of quality).
• File formats: JPEG, PNG, GIF, BMP.
• Use cases: Photographs, digital paintings, complex textures.

Vector Graphics

• Defined by mathematical paths (lines, curves, shapes) using points, lines, and curves.
• Resolution-independent: Scales perfectly without quality loss.
• File formats: SVG, AI, EPS.
• Use cases: Logos, icons, typography, illustrations.

Comparison Table: Raster vs. Vector Graphics

Worked Example: Choosing the Right Format

• Task: Design a logo for a Nepalese bank (e.g., Nabil Bank) and a brochure cover.
  • Logo: Use vector (SVG) for scalability across print and digital.
  • Brochure cover: Use raster (PNG/JPEG) for photographic elements like landscapes.

2. Color Models: RGB, CMYK, and HSL

Color models define how colors are represented and manipulated in digital and print media.

RGB (Red, Green, Blue)

• Additive model: Combines light colors (used in screens, projectors).
• Range: 0–255 per channel (8-bit depth).
• Example: Smartphone screens, YouTube videos.

CMYK (Cyan, Magenta, Yellow, Key/Black)

• Subtractive model: Mixes ink colors (used in printing).
• Range: 0–100% per channel.
• Example: Newspapers, business cards.

HSL (Hue, Saturation, Lightness)

• Perceptual model: Describes color intuitively (used in design tools).
• Hue: 0–360° (color wheel).
• Saturation: 0–100% (vividness).
• Lightness: 0–100% (brightness).

Worked Example: Converting RGB to CMYK for Print

• Scenario: A Daraz advertisement designed in RGB (for screen) must be printed.
  • Step 1: Open the RGB image in Adobe Photoshop.
  • Step 2: Convert to CMYK using Image > Mode > CMYK.
  • Step 3: Adjust colors to account for ink limitations (e.g., avoid pure red, which requires high magenta + yellow).

3. Video Fundamentals: Formats and Codecs

Videos are sequences of frames (images) played at a frame rate (e.g., 24–60 fps). Key components:

• Frame rate (fps): Higher fps = smoother motion (e.g., 60 fps for action films).
• Resolution: Measured in pixels (e.g., 1080p = 1920×1080).
• Codecs: Algorithms for compressing/decompressing video (e.g., H.264, VP9).

Common Video Formats

Worked Example: Choosing a Format for NTC’s Online Classes

• Requirement: Host lectures with minimal buffering.
  • Format: MP4 (H.264 codec) for wide compatibility.
  • Resolution: 720p (balance of quality and bandwidth).
  • Bitrate: 3–5 Mbps to ensure smooth playback on slow connections.

4. Image and Video Compression

Compression reduces file size by removing redundant data. Two main types:

Lossless Compression

• No quality loss: Original data can be perfectly reconstructed.
• Methods: Run-length encoding (RLE), LZW, PNG.
• Use cases: Medical imaging, archival storage.

Lossy Compression

• Quality trade-off: Removes less important data (e.g., slight color changes).
• Methods: JPEG (images), H.264 (video).
• Use cases: Web images, streaming (Netflix, YouTube).

Comparison Table: Lossy vs. Lossless

Worked Example: Compressing a Pathao Rider App Screenshot

• Original: 5 MB PNG (lossless).
• Compressed: 500 KB JPEG (90% quality).
  • Steps:
    1. Open in Photoshop.
    2. Export as JPEG with Quality = 90.
    3. Upload to app servers (faster load time).

5. Image/Video Processing Techniques

Processing enhances or manipulates multimedia content. Key techniques:

Filtering

• Blurring: Reduces noise (e.g., motion blur in Pathao’s ride videos).
• Sharpening: Enhances edges (e.g., satellite images for NTC mapping).
• Edge detection: Identifies boundaries (used in medical imaging).

Transformations

• Rotation/Scaling: Adjusts image orientation/size (e.g., resizing profile pictures for eSewa).
• Cropping: Removes unwanted areas (e.g., editing Daraz product photos).

Morphing

• Seamless transitions: Blends two images (e.g., YouTube thumbnails, movie effects).

Worked Example: Traffic Route Optimization Using Image Processing

• Scenario: Kathmandu’s traffic congestion analyzed via CCTV footage.
  • Steps:
    1. Capture video frames at intersections.
    2. Apply edge detection to identify vehicles.
    3. Track movement using optical flow algorithms.
    4. Generate heatmaps to optimize routes (shared via NTC’s app).

In the Real World

1. eSewa’s QR Code Generation

   • Idea Used: Vector graphics (SVG) for scalable QR codes.
   • How: QR codes are resolution-independent, ensuring readability on any device (e.g., mobile phones, ATMs).

2. YouTube’s Adaptive Streaming

   • Idea Used: Video compression (H.264/AVC) and bitrate adaptation.
   • How: YouTube dynamically adjusts video quality (e.g., 720p to 4K) based on user bandwidth, reducing buffering.

3. Daraz’s Product Image Compression

   • Idea Used: Lossy JPEG compression.
   • How: Product images are compressed to <200 KB to speed up page loading, balancing quality and performance.

4. Ncell’s Mobile Video Calls

   • Idea Used: Real-time video compression (VP8/VP9).
   • How: Codecs like VP9 reduce bandwidth usage, enabling smooth calls on 4G networks.

5. NEPSE’s Stock Chart Visualizations

   • Idea Used: Raster-to-vector conversion and data-driven color models (RGB/HSL).
   • How: Stock trends are plotted as scalable vector graphs, ensuring clarity on both screens and print reports.

Exam Tip

1. Format Questions: Expect short answers on raster vs. vector, RGB vs. CMYK, and compression types. Memorize file extensions (e.g., .svg for vector).
2. Worked Examples: Practice converting between color models (e.g., RGB to CMYK) and calculating compression ratios.
3. Diagrams: Sketch pixel grids for raster images, path structures for vectors, and frame sequences for videos. Label axes in color models (e.g., RGB cube).
4. Applications: Relate concepts to local tech (e.g., "How does NTC use video compression?").
5. Common Pitfalls:
   • Confusing lossless (PNG) and lossy (JPEG) compression.
   • Misapplying RGB for print (always use CMYK).
   • Ignoring frame rate in video quality discussions.

Visual Summary

mindmap
  root((Image & Video Fundamentals))
    Raster Graphics
      Pixel Grid
      JPEG/PNG
      Scaling Issues
    Vector Graphics
      Paths/Anchors
      SVG/AI
      Scalable
    Color Models
      RGB (Screens)
      CMYK (Print)
      HSL (Design)
    Video Formats
      MP4 (H.264)
      AVI (DivX)
      Frame Rate
    Compression
      Lossless (PNG)
      Lossy (JPEG)
      Codecs (H.264)
    Processing
      Filtering (Blur/Sharpen)
      Transformations (Rotate/Crop)
      Morphing (Transitions)