Images & Graphics: Types, Formats, Compression & Applications

TAKEAWAYS:

• Raster vs. Vector: Raster images (pixels) are best for photos; vector graphics (math-based) are ideal for logos and scalable designs.
• Color Models: RGB is for digital screens, CMYK for print; HSL/HSV simplify color adjustments.
• Resolution & DPI: Higher DPI (dots per inch) improves print quality, while PPI (pixels per inch) matters for digital displays.
• File Formats: JPEG for photos, PNG for transparency, SVG for scalable graphics, GIF for animations.
• Compression: Lossy (JPEG) reduces file size but loses quality; lossless (PNG) preserves quality but increases size.
• Applications: Used in UI design (Khalti app), digital art (Photoshop), and web development (YouTube thumbnails).

1. Introduction to Images and Graphics

Types of Graphics

Graphics can be broadly classified into two categories:

• Raster Graphics (Bitmap Images): Made of pixels (tiny dots). Examples: photographs, digital paintings.
• Vector Graphics: Made of mathematical paths (lines, curves). Examples: logos, icons, diagrams.

classDiagram
    class Graphics {
        +Type: Raster or Vector
        +Used for: Photos, Logos, UI Elements
    }
    class Raster {
        +Made of Pixels
        +Examples: JPEG, PNG
        +Best for: Photos, Complex Images
    }
    class Vector {
        +Made of Paths
        +Examples: SVG, AI
        +Best for: Logos, Scalable Graphics
    }
    Graphics <|-- Raster
    Graphics <|-- Vector

Shows pixel-based vs. path-based rendering. (Image: TU Wien: Dirk Praetorius, Michele Ruggeri, Public domain, via Wikimedia Commons)

2. Raster Graphics

Raster images are composed of a grid of pixels, each with a color value. They are resolution-dependent, meaning they lose quality when scaled up.

Key Concepts:

• Resolution: Measured in pixels (e.g., 1920×1080). Higher resolution = sharper image.
• DPI (Dots Per Inch): For print quality (e.g., 300 DPI for high-quality prints).
• PPI (Pixels Per Inch): For digital displays (e.g., 72–300 PPI for screens).

Worked Example: A Daraz product image must be at least 1000×1000 pixels for high quality. If scaled to 2000×2000, it becomes pixelated.

graph LR
    A["Low Resolution"] --> B["Pixelated Image"]
    C["High Resolution"] --> D["Sharp Image"]
    A -->|"Scaling Up"| E["Blurry"]
    C -->|"Scaling Down"| F["Still Sharp"]

Advantages & Disadvantages:

3. Vector Graphics

Vector graphics use mathematical equations to define shapes, making them infinitely scalable without quality loss.

Key Concepts:

• Paths: Defined by points, lines, and curves (Bezier curves).
• Scalability: Can be resized without pixelation.
• File Formats: SVG, AI (Adobe Illustrator), EPS.

Shows how a logo is made of paths (e.g., Khalti’s logo). (Image: Vector Graphic, Public domain, via Wikimedia Commons)

mindmap
  root((Vector Graphics))
    Paths
      Points
      Curves
    Scalability
      No Quality Loss
    Formats
      SVG
      AI
      EPS

Advantages & Disadvantages:

4. Color Models

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

Common Color Models:

1. RGB (Red, Green, Blue): Used in digital screens (e.g., YouTube videos).
2. CMYK (Cyan, Magenta, Yellow, Key/Black): Used in print (e.g., Daraz brochures).
3. HSL/HSV: Used for color adjustments (Hue, Saturation, Lightness/Value).

5. Image File Formats

Different formats serve different purposes based on compression, transparency, and scalability.

Shows file size vs. quality trade-offs. (Image: LucaLindholm, CC BY 4.0, via Wikimedia Commons)

6. Image Compression

Compression reduces file size for faster transmission and storage.

Types of Compression:

1. Lossless: No quality loss (PNG, ZIP). Used for documents, logos.
2. Lossy: Reduces quality but significantly cuts file size (JPEG). Used for photos, videos.

Worked Example: A NEPSE stock chart as a PNG (lossless) may be 5 MB, but as a JPEG (lossy) it could be 200 KB—ideal for quick loading on the NEPSE website.

flowchart TD
    A["Original Image"] --> B["Lossless Compression"]
    B --> C["PNG, ZIP"]
    A --> D["Lossy Compression"]
    D --> E["JPEG, MP3"]
    C --> F["No Quality Loss"]
    E --> G["Smaller File Size"]

7. Applications in Real World

In the Real World:

1. eSewa App:

   • Uses SVG for icons (scalable without quality loss).
   • PNG for transparent backgrounds (e.g., payment success screens).

2. Daraz Website:

   • JPEG for product images (balanced quality vs. size).
   • Vector graphics for logos (ensures sharpness on all devices).

3. YouTube Thumbnails:

   • High-resolution JPEG (1280×720) for clarity.
   • RGB color model for vibrant digital display.

4. Ncell Branding:

   • SVG for logos (scalable across billboards and mobile screens).
   • CMYK for print ads (ensures color accuracy in physical media).

5. Khalti Digital Payments:

   • PNG for QR codes (transparency for overlay on receipts).
   • Vector graphics for UI elements (clean, scalable buttons).

8. Exam Tip

For TU/PU exams, focus on:

• Differentiating raster vs. vector (examples: photos vs. logos).
• Color models (RGB for screens, CMYK for print).
• File format advantages (JPEG for photos, SVG for scalability).
• Compression trade-offs (lossy vs. lossless).
• Real-world applications (eSewa icons, Daraz images, YouTube thumbnails).

Common Exam Questions:

1. "Why does a JPEG image lose quality when edited repeatedly?" → Answer: Due to lossy compression (each save discards data).
2. "Which format would you use for a logo that needs to be printed and displayed digitally?" → Answer: SVG (vector) for scalability, CMYK for print.
3. "Explain the difference between DPI and PPI." → Answer: DPI = print resolution; PPI = screen resolution.

Final Note: Mastering image types, formats, and compression is crucial for multimedia design, web development, and digital marketing. Practice identifying formats in real apps (e.g., WhatsApp stickers = PNG, Google Maps logos = SVG).