Image File Formats Compared - JPEG, PNG, GIF, TIFF, SVG and PDF

What You Need to Know

Image formats are not interchangeable “file wrappers” — each format bakes in compression behavior, color limits, transparency rules, metadata support, and whether it stores raster pixels or scalable vectors. In digital image editing, choosing the wrong format is a fast way to get:

• visible artifacts (blockiness, banding)
• broken transparency
• wrong colors in print
• huge files
• blurry logos/icons

Core definitions (the exam-grade version)

• Raster formats store an image as a grid of pixels: JPEG, PNG, GIF, TIFF.
• Vector formats store shapes/paths mathematically: SVG, and often content inside PDF.
• Lossy compression throws away information to reduce file size (quality decreases): JPEG (and optionally in TIFF/PDF if they embed JPEG).
• Lossless compression reduces size without losing image information: PNG, GIF (palette-limited), TIFF (when using lossless methods).

Why this matters (typical use cases)

• Photos for web: JPEG (small, good for continuous tone).
• Graphics with transparency: PNG (true alpha) or SVG (vector).
• Simple animations: GIF (palette-limited) (or modern alternatives, but GIF is common).
• Archiving / print workflows: TIFF (high bit depth, flexible, widely supported in print).
• Logos/icons/diagrams: SVG (resolution-independent).
• Final delivery for print/multi-page/vector+raster: PDF (layout-preserving, press standards).

Critical reminder: Transparency is not one thing. PNG supports true alpha; GIF is effectively 1-bit transparency; JPEG has no transparency.

Step-by-Step Breakdown

A practical decision workflow (exporting the “right” file)

1. Decide: raster or vector?

   • If it must scale perfectly (logo, icon, line art): choose SVG or PDF.
   • If it’s a photograph or pixel-based painting: choose JPEG/PNG/TIFF.

2. Decide: web/screen or print/archive?

   • Web/screen: JPEG/PNG/GIF/SVG.
   • Print delivery or long-term master: TIFF or PDF.

3. Check transparency needs

   • No transparency needed: JPEG is fine for photos.
   • Soft edges/partial transparency needed: PNG (raster) or SVG/PDF (vector).
   • Only hard on/off transparency and tiny palettes: GIF.

4. Check color + bit depth requirements

   • High-quality editing/retouching, smooth gradients: prefer TIFF (often 16-bit/channel).
   • Web graphics with limited colors: PNG-8 or GIF.

5. Choose compression + settings

   • JPEG: pick a quality level; watch for artifacts.
   • PNG: lossless; optimization reduces size without changing pixels.
   • TIFF: pick compression method (LZW/ZIP lossless; JPEG lossy).
   • PDF: choose presets (print vs smallest size), embedding fonts, image downsampling.

6. Verify with a quick inspection

   • Zoom to $100\%$ and $200\%$ for artifacts/edges.
   • Toggle background behind transparent edges.
   • Soft-proof if destined for print (format choice interacts with color management).

Micro “worked” decisions

• You have a product photo for a website hero banner: JPEG (good quality/size tradeoff).
• You have a UI icon with transparency: PNG (or SVG if it’s vector).
• You must send a press-ready multi-page brochure: PDF (often PDF/X).
• You want a future-proof master of a retouched photo: TIFF (lossless, high bit depth).

Key Formulas, Rules & Facts

File size math you can use on exams

Uncompressed raster size (before compression) is approximately:

$\text{bytes} = \text{width} \times \text{height} \times \frac{\text{bits per pixel}}{8}$

Common bits per pixel (bpp):

• RGB 8-bit/channel: $24\,\text{bpp}$
• RGBA 8-bit/channel: $32\,\text{bpp}$
• RGB 16-bit/channel: $48\,\text{bpp}$

Compression ratio varies by content (flat color compresses well; noise compresses poorly).

High-yield comparison table

JPEG essentials (what’s tested)

• Lossy compression: repeated saving compounds damage.
• Uses block-based transforms (commonly $8 \times 8$ blocks), causing block artifacts at low quality.
• Often uses chroma subsampling (e.g., $4:2:0$) to reduce color detail more than luminance.
• Modes you may see:
  • Baseline JPEG: sequential loading.
  • Progressive JPEG: loads in passes (useful on slow connections).

PNG essentials

• Lossless; saving repeatedly does not degrade pixels.
• Supports:
  • True alpha transparency (soft edges, shadows).
  • Grayscale, truecolor, or indexed (paletted) variants.
• Interlacing: Adam7 (progressive-like display).
• Common variants in editors:
  • PNG-24/32: truecolor (32 implies alpha).
  • PNG-8: indexed palette, smaller, but limited colors.

GIF essentials

• Indexed color only: max $256$ colors per frame.
• Animation support (frame-based with timing + disposal methods).
• Transparency is single-color keying (effectively on/off), not soft alpha.

TIFF essentials

• TIFF is a container: capabilities depend on tags + codec.
• Common compressions:
  • None (huge)
  • LZW (lossless)
  • ZIP/Deflate (lossless)
  • JPEG (lossy)
  • PackBits (simple RLE-like; lossless)
• Can store multiple pages (multi-page TIFF) and lots of metadata.
• BigTIFF exists for very large files (addresses beyond classic TIFF limits).

SVG essentials

• Vector paths + text in XML.
• Can embed raster images, but then it’s no longer purely resolution-independent.
• Can be styled/animated via CSS/SMIL and scripted (security policies may restrict this).
• Great for logos, icons, diagrams; not for photo realism.

PDF essentials

• PDF can contain:
  • vector art (paths)
  • embedded raster images (often JPEG/JPEG2000/Flate)
  • fonts, text, spot colors, profiles
• Print workflows often require standards:
  • PDF/X variants for press (constrains color, fonts, transparency rules depending on version).
• “Save as PDF” may downsample/compress images depending on preset.

Examples & Applications

Example 1: Web photo vs web graphic

• Scenario: You have a photograph and a logo for the same webpage.
• Best picks:
  • Photo: JPEG at a quality that avoids visible blocks/banding.
  • Logo: SVG (best), or PNG if you need pixel-perfect raster.
• Key insight: JPEG is optimized for continuous tone; SVG/PNG preserve hard edges.

Example 2: Transparent overlay on a photo

• Scenario: You designed a badge with soft shadow that must sit on top of varying backgrounds.
• Best pick: PNG (RGBA).
• Why: GIF transparency will halo (1-bit), and JPEG cannot do alpha.

Example 3: Archive master vs sharing copy

• Scenario: You retouched a high-res portrait and want a master plus a shareable version.
• Best picks:
  • Master: TIFF with lossless compression (LZW/ZIP), keep higher bit depth if available.
  • Share: JPEG sized for the destination.
• Key insight: keep a lossless master; export lossy derivatives.

Example 4: Delivering artwork to print

• Scenario: A poster includes vector text/logos plus embedded photos.
• Best pick: PDF (print preset), ensuring fonts embedded and images not overly downsampled.
• If asked “why not TIFF?”: TIFF is raster-only; you’d have to rasterize the text/logos, losing crisp scaling.

Common Mistakes & Traps

1. Mistake: Using JPEG for logos/text/UI

   • What goes wrong: fuzzy edges, ringing artifacts, “mosquito noise” around text.
   • Fix: use PNG or SVG.

2. Mistake: Assuming PNG is always smaller than JPEG

   • Why wrong: PNG is lossless; photos have high entropy and compress poorly in PNG.
   • Fix: use JPEG for photos, PNG for flat graphics/transparency.

3. Mistake: Expecting GIF to handle smooth transparency

   • Why wrong: GIF transparency is effectively binary.
   • Fix: use PNG (soft alpha) or export as video/other modern web formats when allowed.

4. Mistake: Believing “TIFF = lossless” by definition

   • Why wrong: TIFF can use lossy JPEG compression internally.
   • Fix: check TIFF compression settings (choose LZW/ZIP if you need lossless).

5. Mistake: Confusing DPI with pixel dimensions when choosing formats

   • Why wrong: For raster images, the real detail is in pixel dimensions; DPI is metadata until print.
   • Fix: decide on required pixel size first; then set DPI for print context.

6. Mistake: Flattening vectors unintentionally when exporting to PDF

   • What goes wrong: text becomes raster, edges soften, file balloons.
   • Fix: use PDF presets that preserve vectors; avoid “rasterize everything” options.

7. Mistake: Color issues from wrong expectations (screen vs print)

   • What goes wrong: PNG/JPEG are commonly used in RGB screen workflows; print may expect CMYK/ICC-managed PDFs.
   • Fix: for print delivery, prefer PDF (with proper profiles/standards) or TIFF when specifically requested.

8. Mistake: Re-saving JPEG multiple times during editing

   • Why wrong: each save re-quantizes and accumulates artifacts.
   • Fix: edit in a lossless/master format (e.g., TIFF or native project file), export JPEG at the end.

Trap to watch: “PDF” and “TIFF” are containers. Two PDFs can behave totally differently depending on what’s embedded and how it’s compressed.

Memory Aids & Quick Tricks

Quick Review Checklist

• JPEG: lossy, no transparency, best for photos, artifacts worsen with re-saves.
• PNG: lossless, true alpha, best for UI/text/graphics and transparency; big for photos.
• GIF: max $256$ colors, 1-bit transparency, supports animation; poor for photos.
• TIFF: raster container; can be lossless or lossy depending on compression; great for masters/print.
• SVG: vector XML; best for logos/icons/diagrams; resolution-independent.
• PDF: container for vector+raster+text+fonts; best for final delivery/print/multi-page.
• Always ask: raster vs vector, lossy vs lossless, transparency, print vs screen, master vs derivative.

You’ve got this — if you can justify your format choice with compression + transparency + use case, you’ll ace the questions.