Skip to content

Instantly share code, notes, and snippets.

@MangaD

MangaD/ImageFormats.md

Last active November 27, 2025 12:56
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save MangaD/b32d53ca99e06c41e6c6e29d81ea5aec to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save MangaD/b32d53ca99e06c41e6c6e29d81ea5aec to your computer and use it in GitHub Desktop.
Download ZIP
Image Formats
Raw
ImageFormats.md

Image Formats

CC0

Disclaimer: ChatGPT generated document.

There are many image formats, each designed with trade-offs regarding compression, quality, editing capability, animation support, color depth, transparency, metadata, etc.

Below is a comprehensive, structured overview of all significant image formats—from classic raster and vector types to RAW, HDR, medical, and modern specialized formats. This is intentionally exhaustive.

📸 Complete Overview of Image Formats

📌 1. Raster vs Vector Images

Type Description Examples
Raster Grid of pixels; quality degrades if scaled PNG, JPEG, GIF, BMP, TIFF
Vector Based on geometric formulas; infinitely scalable SVG, PDF (sometimes), AI, EPS

🧊 2. Lossy vs Lossless Compression

Compression Characteristics Use cases
Lossy Data permanently discarded Web photos, small files
Lossless Original image preserved Logos, archiving, medical

🏆 3. Most Common Raster Formats

📷 JPEG / JPG

  • Lossy, 24-bit color
  • No transparency
  • Progressive support
  • Great for photographs
  • Extensions: .jpg, .jpeg
  • Variants: JPEG 2000, JPEG XR, JPEG XL (modern replacement)

🧊 PNG (Portable Network Graphics)

  • Lossless, supports alpha transparency (8-bit or 16-bit per channel)
  • Ideal for logos, text, GUI elements
  • Not good for photos (larger than JPEG)

🖊️ GIF

  • Max 256 colors, lossless but indexed
  • Supports transparency and animation
  • Obsolete; replaced by APNG and MP4

🔁 WebP (by Google)

  • Supports both lossy and lossless
  • Transparency + animation
  • Designed to replace JPEG, PNG, and GIF
  • Good compression and browser support

🌟 AVIF (AV1 Image File Format)

  • New cutting-edge format
  • Extremely high compression quality
  • Supports HDR, transparency
  • Smaller than WebP & JPEG
  • Still gaining adoption

📱 HEIF/HEIC

  • Used by Apple iPhones
  • Based on HEVC (H.265 video codec)
  • Supports multiple images (Live Photos), transparency
  • High efficiency, not universally supported

🧱 BMP (Bitmap)

  • Raw pixel data
  • No compression
  • Very large
  • Legacy Microsoft format

🖨️ TIFF

  • Powerful archival format
  • Supports layers, multi-page, metadata
  • Can be lossy or lossless
  • Used in publishing, scanning, medical imaging

🎬 APNG

  • Like PNG but supports animation
  • Better than GIF technically
  • Not fully supported everywhere

🧭 4. Vector Formats

Format Notes
SVG XML-based, scalable; web standard
EPS Encapsulated PostScript, legacy
PDF Can contain vector/raster images
AI Adobe Illustrator format
WMF/EMF Windows-specific vector formats

🎞️ 5. Animation & Multiframe Formats

Format Supports Transparency Compression Notes
GIF Yes Lossless 256 colors only
APNG Yes Lossless Better than GIF
WebP Yes Lossy/Lossless Widely supported
AVIF Yes Lossy/Lossless High-compression
MNG Yes Lossless Obsolete
HEIF Yes Lossy Used by Apple

📷 6. RAW & Professional Formats

Used in photography—retain sensor-level image data.

Format Camera Brand
CR2 / CR3 Canon
NEF Nikon
ARW Sony
RAF Fujifilm
DNG Adobe’s open RAW format

Advantages: ✔️ Preserve full image data ✔️ Best for editing ✖️ Large, require specialized software (.RAW converters)

🔬 7. Special & Industry Formats

Format Use
DICOM (.dcm) Medical imaging (CT, MRI, X-ray)
EXR (OpenEXR) High dynamic range (HDR) imaging
HDR / Radiance Lighting calculations
FITS Astronomy
XCF GIMP layered format
PSD Photoshop layered format

🔎 8. Alpha Channel & Transparency Support

Format Transparency
PNG Yes (RGBA)
WebP Yes
AVIF Yes
TIFF Yes
GIF Limited (1-bit)
JPEG ❌ No
BMP ❌ No (unless BITMAPV5)

🎨 9. Color Depth

Bit Depth Colors Formats
8-bit 256 GIF
24-bit 16.7M JPG, PNG
30-bit HDR, AVIF, EXR
48-bit Pro photography (TIFF, RAW)
96-bit Scientific imaging (EXR)

📂 10. Metadata Support

Format EXIF IPTC XMP
JPEG Yes Yes Yes
PNG Partial No Yes
WebP Yes Yes Yes
AVIF Yes Yes Yes
GIF Very limited No No
TIFF Excellent Yes Yes
RAW Extensive Yes Yes

💡 11. Best Format for...

Use Case Best Format
Photography (Web) AVIF > WebP > JPEG
Logos / UI PNG or SVG (if vector)
Print / Archival TIFF
Animation WebP or APNG
Mobile Photos HEIC
High-quality HDR AVIF or OpenEXR
Max compatibility JPEG or PNG
Scientific / Medical EXR (HDR) / DICOM (medical)

📊 12. Quick Comparison Table

Format Lossless Transparency Animation Typical Use
JPEG ❌ ❌ ❌ Photographs
PNG ✔️ ✔️ ❌ Graphics
GIF ✔️ ✔ (1-bit) ✔️ Simple animation
WebP ✔️ / ❌ ✔️ ✔️ Modern web
AVIF ✔️ / ❌ ✔️ ✔️ Next-gen web
TIFF ✔️ / ❌ ✔️ ❌ Archival
RAW ✔️ ✔️ ❌ Photography
SVG N/A (vector) ✔️ Limited Logos/UI

🔮 13. Future of Image Formats

  • JPEG XL (JXL) – Designed to replace JPEG/WebP, supports lossless recompression of JPEG, progressive loading, HDR, animation.
  • AVIF and WebP – Rapid adoption due to excellent compression.
  • SVG – Increasing use for icons, responsive design.

📦 14. Conversion & Editing Best Practices

  • Never convert JPEG → PNG expecting quality gain.
  • Convert PNG → JPEG only for photos.
  • Preserve RAW files; export to JPEG/PNG/WebP for final use.
  • For web, prefer AVIF, fallback to WebP, then JPEG.

📚 15. Related Technologies

  • ICC Color Profiles
  • EXIF metadata parsing
  • Color space management (sRGB, Adobe RGB, Display-P3)
  • Gamma correction
  • Progressive encoding

🏁 Final Thoughts

  • No single "best" image format — it depends on use case.
  • Modern recommendation: → AVIF (for photography and web) → PNG/SVG (for graphics and UI) → TIFF/RAW (for editing & archiving) → WebP as transitional modern format.

🖼️ Raster vs Vector Images

📌 1. Raster (Bitmap) Images

👉 Made of pixels (tiny colored squares). The image is essentially a grid of pixels, each with a specific color.

📍 Characteristics

Property Description
Resolution-dependent Scaling up causes pixelation or blur
Fixed number of pixels e.g. 1920×1080 = 2,073,600 pixels
Great for complex imagery Photos, scanned documents
High detail, no formula Stores exact colors
Editing Pixel-level manipulation

📸 Examples of raster formats:

  • JPEG, PNG, GIF, BMP, WebP, AVIF, TIFF
  • RAW camera formats: CR2, NEF, ARW, etc.

🔍 If you zoom in on a raster image: You see squares (pixelation), like:

🟥🟧🟨🟩🟦
🟧🟥🟧🟩🟦
🟨🟧🟥🟩🟦

🧮 2. Vector Images

👉 Made of mathematical equations, not pixels.

A vector image describes shapes using lines, curves, points, and polygons.

📍 Characteristics

Property Description
Resolution-independent Can scale to any size with no quality loss
Lightweight Small file size
Ideal for crisp shapes Logos, icons, typography
Editable element-wise Modify shapes, curves
Poor for photos Can't represent complex natural texture well

✏️ Common vector formats:

  • SVG (web)
  • AI (Adobe Illustrator)
  • EPS, PDF (can embed vector elements)
  • WMF / EMF (Windows graphics)

🧠 Example: A red circle

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="red" />
</svg>

Instead of pixels, this is a formula: “Draw a circle at (50,50) with radius 40.”

🔍 Comparison Table

Feature Raster Vector
Based on Pixels Math formulas (paths/curves)
Scalability Loses quality Lossless scaling
Best for Photos Logos, icons, diagrams
File size Can be large Usually small
Editing Pixel manipulation Shape manipulation
Tools Photoshop, GIMP Illustrator, Inkscape
Format examples PNG, JPG, WebP SVG, AI, EPS

🎯 When to Use Which?

Use Case Recommended
Photograph Raster (JPEG, PNG, AVIF)
Logo Vector (SVG)
Web icon Vector (SVG), or raster (PNG) if small
Digital art (painting) Raster
Printed banner Vector (to avoid pixelation)
UI/graphics SVG/PNG hybrid
Infographics Vector preferred
Complex scene Raster

💬 Analogy

Raster Vector
Like a photo Like a blueprint
Records every detail Describes shapes
Becomes blurry if enlarged Always stays sharp

🧪 Hybrid Cases

Some formats support both:

  • PDF → can contain vector graphics and raster images.
  • EPS → similar mixed capabilities.
  • SVG → can embed raster images with <image> tags.
  • Photoshop (PSD) & TIFF → can include vector layers.

🔚 Summary

  • Raster = pixel-based; great for photos, loses quality when scaled.
  • Vector = math-based; ideal for graphics/logos, always sharp.

If you're doing image compression, media storage, editing, or optimization, knowing this helps choose the right format and workflow.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment