🖼️ Images & Encoding Study Plan

📚 Lesson Overview

This plan covers foundational knowledge and practical applications related to digital images, encoding systems, and data representation. Topics include abstraction, image representation, compression, color coding, and Base64 encoding.

1. 🧠 Abstraction & Number Systems

Abstraction: Simplifying complex digital data (like images) into manageable numerical forms.
Pixel: The smallest unit of a digital image.
Color models:
- RGB: Red, Green, Blue (0–255 each channel).
- Grayscale: Single value from 0 (black) to 255 (white).
Numeral Systems:
- Binary: Base-2 (e.g., 11111111 for 255)
- Octal: Base-8 (e.g., 377 for 255)
- Hexadecimal: Base-16 (e.g., FF for 255)

2. 🖼️ Digital Image Encoding

Each image is a grid of pixels.
Pixels store color info typically in 8-bit RGB format.
Grayscale uses one channel instead of three.
Encoded values can be:
- Decimal: 255
- Binary: 11111111
- Octal: 377
- Hexadecimal: FF

3. 🗜️ Image Compression Techniques

Why Compress? Reduce file size for faster transfer and storage efficiency.

🔹 Lossless Compression

No data lost, reversible.
Example: PNG
Maintains image quality.

🔸 Lossy Compression

Discards less-important details.
Not reversible.
Example: JPEG
Uses:
- Discrete Cosine Transform (DCT)
- Quantization

4. 🕵️‍♂️ Steganography

Hiding messages in images.
Typically modifies the Least Significant Bits (LSBs) of pixel values.
Keeps visual appearance nearly unchanged.
Can be used for:
- Secret communication
- Watermarking

5. 🌈 Color Codes

🔶 Hexadecimal Colors

Format: #RRGGBB
FF = 255 (max intensity), 00 = 0 (none)
Example: #FF5733 = (255, 87, 51)

🔷 RGB Format

Format: rgb(R, G, B)
Example: rgb(255, 0, 0) = Red
Range for each: 0–255

🔸 HSL (Hue, Saturation, Lightness)

Not covered in-depth here, but used in CSS as hsl(120, 100%, 50%)

6. 🔐 Base64 Encoding

Converts binary data into a 64-character text format.
Not encryption, just encoding.
Useful for:
- Embedding images in HTML
- Transmitting data over APIs or email
- Avoiding special-character issues

⚙️ How It Works

Converts 3 bytes (24 bits) into 4 Base64 characters.
Character set: A–Z, a–z, 0–9, +, /
Padding with = if needed.

🧪 Example:

Text: "Hello"
Binary: 01001000 01100101 01101100 01101100 01101111
Base64: SGVsbG8=

🔄 Summary

Concept	Key Ideas
Pixel Encoding	RGB values stored in binary, hex, octal
Compression	Lossless vs. Lossy (DCT, quantization for JPEG)
Color Codes	Hex: `#RRGGBB`, RGB: `rgb(r, g, b)`
Base64	Encodes binary → text; reversible, but not secure encryption
Steganography	Hides data inside images using subtle pixel value changes

✅ Use this as a quick reference or to build quiz questions and lesson reviews!

Study Plan 9

with notes