Module -03: File Formats & Compression — Design & Code Foundations

01

Raster vs Vector

The fundamental split in digital graphics. Raster = pixels. Vector = math. This distinction determines everything about how images behave.

NORMAL SIZE

ZOOMED IN (Pixels visible)

Raster formats: JPEG, PNG, GIF, WebP, AVIF, BMP, TIFF

Raster: Pixels on a Grid

Raster images are grids of colored pixels. They have fixed dimensions (e.g., 1920x1080). Scaling up reveals pixels ("pixelation"). Photos are always raster — you can't describe a photo with math.

Key limitation: Raster = fixed pixels. Scale up = quality loss.

SMALL

LARGE (Same quality)

<circle cx="12" cy="12" r="10" />
// Math describes shape, not pixels

Vector: Mathematical Shapes

Vector images are mathematical instructions: "draw a circle at position 12,12 with radius 10." They scale infinitely without quality loss. Logos, icons, and illustrations should be vector when possible.

Key advantage: Vector = math. Scale infinitely, perfect at any size.

USE RASTER

Photos
Complex artwork
Screenshots
Textures
Anything photographic

USE VECTOR

Logos
Icons
Illustrations
UI elements
Anything with clean lines

Rule: If it could be drawn with shapes, use vector. If it's photographic, use raster.

Choosing Raster vs Vector

The choice is usually obvious. Photos = raster. Logos = vector. The gray area is illustrations — simple ones work as vector (SVG), complex ones may need raster (PNG).

Decision rule: Photos = raster. Icons/logos = vector. Always.

<svg viewBox="0 0 24 24">
  <path
    d="M12 2L2 7l10 5 10-5-10-5z"
    fill="#3b82f6"
  />
</svg>

+Scales perfectly+Tiny file size+CSS/JS controllable+Accessible (text readable)

SVG: The Web's Vector Format

SVG (Scalable Vector Graphics) is XML-based — it's literally code. You can style it with CSS, animate it with JavaScript, and it's text-searchable. Perfect for icons, logos, and simple illustrations on the web.

Web standard: SVG = vector + code. Style with CSS, animate with JS.

02

Lossy vs Lossless Compression

All compression reduces file size. Lossy throws away data permanently. Lossless keeps everything but compresses it. This is the core tradeoff.

ORIGINAL

5 MB

100% quality

LOSSLESS

3 MB

100% quality

LOSSY

200 KB

~85% quality

Lossy compression achieves 25x smaller files by permanently discarding data

Compression: Size vs Quality

Lossless compression is like zipping a file — nothing is lost, you can get the original back. Lossy compression permanently removes data that (hopefully) won't be noticed. You can't undo lossy compression.

Key difference: Lossy = permanent data loss. Lossless = reversible.

JPEG Compression

Divides image into 8x8 blocks, discards subtle color variations humans can't easily see

Artifacts

"Blocky" areas, color banding, halos around edges — signs of aggressive compression

Generation Loss

Re-saving a JPEG compresses again. Each save degrades quality further.

How Lossy Compression Works

JPEG is the classic lossy format. It analyzes images and removes details humans are less likely to notice. But compress too much and you get "artifacts" — blocky areas and color banding. Never edit and re-save JPEGs repeatedly.

Common mistake: Never re-save JPEGs. Each save = more quality loss.

RUN-LENGTH ENCODING

AAAAAABBBCC → 6A3B2C

Repeated data described efficiently

DICTIONARY COMPRESSION

"the cat sat" → references to "the", "at"

Patterns replaced with short codes

Formats: PNG, GIF, TIFF, BMP, WebP (lossless mode)

How Lossless Compression Works

Lossless compression finds patterns and encodes them efficiently. "100 red pixels in a row" becomes "100×red" instead of listing each pixel. Works great for graphics with solid colors, terrible for photos.

Best use case: Lossless works best on images with solid colors, not photos

JPEG QUALITY SCALE (0-100):

10-30

Terrible (visible artifacts)

60-75

Good for web (best balance)

80-90

High quality (larger files)

95-100

Overkill (diminishing returns)

Understanding Quality Numbers

Quality 100 isn't "perfect" — it's still lossy. The difference between 90 and 100 is often invisible but doubles file size. For web, 60-80 is usually the sweet spot. Always test visually.

Web best practice: Quality 60-80 is usually ideal. 100 is overkill.

03

Image Formats Compared

JPEG, PNG, GIF, WebP, AVIF, SVG — each format has specific strengths. Choosing wrong means bloated files or degraded quality.

JPEG / JPG

Joint Photographic Experts Group (1992)

STRENGTHS

Photos, gradients
Small file sizes
Universal support

WEAKNESSES

No transparency
Artifacts on edges
Bad for text/graphics

JPEG: Photos & Complex Images

JPEG excels at continuous-tone images (photos, gradients). It struggles with sharp edges — text and logos get artifacts. Never use JPEG for screenshots, logos, or anything with text.

Use case: JPEG = photos only. Never for text, logos, or graphics.

PNG

Portable Network Graphics (1996)

STRENGTHS

Transparency (alpha)
Sharp edges
Lossless quality

WEAKNESSES

Large file sizes
Bad for photos
No animation

PNG: Graphics & Transparency

PNG supports transparency (alpha channel) and preserves sharp edges perfectly. Ideal for logos, icons, screenshots, and graphics with text. File sizes are larger than JPEG for photos.

Use case: PNG = transparency + sharp edges. Logos, icons, screenshots.

WebP

Google (2010) — 97% browser support

+30% smaller than JPEG at same quality

+Supports transparency (like PNG)

+Supports animation (like GIF)

+Lossy AND lossless modes

WebP: The Modern Choice

WebP combines the best of JPEG and PNG: lossy compression for photos, lossless for graphics, transparency support, and animation. It's ~30% smaller than equivalent JPEGs. Use it as your default for web.

Recommendation: WebP = JPEG + PNG + GIF combined. Default choice for web.

AVIF

AV1 Image Format (2020) — 92% browser support

+50% smaller than JPEG (best compression)

+Better quality at low bitrates

~Slower to encode

~Some older browsers unsupported

AVIF: The Future

AVIF offers the best compression available — 50% smaller than JPEG. Browser support is now 92%+. The tradeoff is slower encoding time. Use with WebP fallback for maximum compatibility.

Future-proof: AVIF = best compression, but provide WebP fallback

◐

GIF

Graphics Interchange Format (1987)

-Only 256 colors (terrible for photos)

-Large file sizes for animation

+Universal animation support

+Works everywhere

For animation, prefer WebP or MP4 video. GIF files are huge.

GIF: Limited but Animated

GIF is ancient (1987) and limited to 256 colors. It's still used for simple animations due to universal support, but modern alternatives (WebP, MP4) are much smaller. Avoid for anything except simple animations.

Outdated: GIF = legacy format. Use WebP/MP4 for animation instead.

04

Video & Audio Formats

Video and audio compression works similarly to images — codecs trade quality for size. Understanding the basics prevents bloated media files.

CONTAINER vs CODEC:

CONTAINER (.mp4, .webm, .mov)

The "box" that holds video + audio + metadata together

CODEC (H.264, H.265, VP9, AV1)

The compression algorithm that shrinks the data

Web recommendation: MP4 container + H.264 codec = universal support

Video Compression Basics

A video file has two parts: the container (MP4, WebM) that packages everything, and the codec (H.264, AV1) that compresses the video data. MP4 + H.264 is the safe choice for web.

Safe choice: MP4 + H.264 = works everywhere. WebM + AV1 = smaller but less support.

MP3

Lossy, universal support, ~128-320 kbps

AAC

Lossy, better than MP3 at same bitrate, Apple default

OGG

Lossy, open source, good quality, less support

WAV

Lossless, huge files, editing/archival only

FLAC

Lossless compressed, audiophile quality, large files

Audio Format Comparison

For web: MP3 or AAC at 128-192 kbps is fine for most uses. WAV/FLAC are for archival and editing — never serve them on web (10x larger than MP3).

Web standard: Web audio: MP3/AAC 128-192 kbps. WAV/FLAC for masters only.

BITRATE = DATA PER SECOND

500 kbpsLow quality video, mobile data saver

2-5 MbpsStandard 720p-1080p web video

10-20 MbpsHigh quality 1080p-4K streaming

50+ MbpsProfessional/broadcast quality

Math: 5 Mbps × 60 seconds = 300 Mb = 37.5 MB per minute

Understanding Bitrate

Bitrate is how much data per second. Higher = better quality but larger files. For web video, 2-5 Mbps is usually sufficient for 1080p. Use adaptive bitrate streaming (HLS/DASH) for variable connections.

Guideline: Web video: 2-5 Mbps for 1080p is usually enough

File Formats & Compression

Core Concepts

Raster vs Vector

Lossy vs Lossless Compression

Image Formats Compared

Video & Audio Formats

Key Takeaways