Sam's Web Format Field Guide (2025)
Table of Contents
Sam’s Web Format Field Guide (2025)
What works, what’s changed, and why any of it still matters
I got my first taste of the internet in 1993 when I was in high school. I was no stranger to computers, but I wanted to see one of those cool BBSs I’d heard about. AOL and CompuServe were around, but they were pay-to-play and I was saving my money for my weekly comic book habit.
Back then, 9,600 bit/s dial-up modems were common and 14.4 kbps was top of the line. Images were sparse and economized down to the pixel. Audio was mostly 8-bit. And video? Painful. If you wanted to watch a 1-minute video of someone walking uphill both ways in the snow, it would take well over an hour to download it (streaming wasn’t a thing yet) which tied up your home phone line the whole time for everyone in the house (cellphones weren’t common, and there was no such thing tethering).
So I grew up with the difference between 10KB and 10MB being the line between working and broken. And I’ve been working with web formats long enough to remember when “transparency” meant saving a GIF with just the right background color, and when everything on the web ran on a plug-in and a prayer.
Between 2000 and 2015, I wrote a few posts here breaking down which image, audio, and video formats were worth using, and why. I’d run tests, benchmark file sizes, and translate the shifting sands of browser support into simple, practical choices I could point other people to in conversation, in workshops, and for my own reference when I forgot.
And here I am in 2025 doing it again.
Why? Because these fundamentals still matter, and the landscape has shifted just enough that if you’re not paying attention, you’re probably overloading your site, misunderstanding your options, or defaulting to whatever your build tool gave you. Or more likely whatever you copy-pasted off the web or out of your favorite AI.
I’m not against doing that at first, or in a pinch. I’ve certainly done it! But if you’re going to depend on something (or want others to use it) you’re going to need to understand how it works.
Unfortunately, I find that most people still don’t understand web formats deeply.
They might know some compression settings or recognize terms like “lossless” or “WebP,” but they often don’t know what tradeoffs they’re making. Or how a little bit of the right kind of knowledge can unlock cleaner, lighter, faster, and ultimately more creative and fulfilling work.
So, time to reboot the field guide. This time with a little sense-checking and formatting support from my favorite LLM and yours: ChatGPT. Use this as a reference, I know I will. It’s kinda long. (Sorry?)
But if you take only one idea from this post, let it be this: Formats are not just containers. They’re decisions.
And understanding your decisions gives you leverage when the defaults stop making sense. Enjoy!
Markdown Grab’n Go
If you’re hip to markdown files, just Save link as…
- web_image_format_reference
- web_video_format_reference
- web_audio_format_reference
- web_font_format_reference
- web_compression_format_reference
If not, scroll to your heart’s content.
Note: These aren’t all the image/video/audio/font/compression formats that exist on the web — but if you’re deviating from these… you probably shouldn’t. I might, if I had a really good reason. But even then, I’d exhaust these first.
✅ Web Image Format Reference
| Format | Type | Best For | Transparency | Animation | Avg File Size (500×500) | Notes |
|---|---|---|---|---|---|---|
| SVG | Vector | Icons, logos, UI elements | ✅ Yes | ✅ Yes | 🚀 Tiny (1–20KB) | Code-based, infinitely scalable, CSS/JS friendly |
| PNG | Raster | Transparent images, screenshots | ✅ Yes | ❌ No | 📦 Medium (50–300KB) | Lossless, bulky for photos |
| JPG/JPEG | Raster | Photos, gradients, backgrounds | ❌ No | ❌ No | 📉 Small (30–150KB) | Lossy, great for detailed images |
| GIF | Raster | Simple animations, memes | ✅ Limited² | ✅ Yes | 🧱 Large (200–500KB) | 256 colors max, legacy use only |
| WEBP | Raster | All-purpose modern web image | ✅ Yes | ✅ Yes | 🔥 Smallest (20–100KB) | Superior compression, supports animation/transparency |
| AVIF | Raster | Photos, high-efficiency compression | ✅ Yes | ✅ Yes | 🧊 Ultra-small (10–50KB) | Cutting-edge, limited older browser support |
| HEIC | Raster | Apple photos, mobile uploads | ✅ Yes | ✅ Yes | 💾 Tiny (10–50KB) | Not natively supported in all browsers |
- File sizes are estimates based on a 500×500 px image with average detail and compression.
- ² GIF supports only binary transparency (on/off).
- AVIF and WEBP are excellent replacements for PNG + JPG if browser support is acceptable.
🎥 Web Video Format Reference
| Format | Codec | Best For | Transparency | Audio Support | Avg File Size (1-min, 720p@24fps) | Notes |
|---|---|---|---|---|---|---|
| MP4 | H.264 | Universal playback, self-hosting | ❌ No | ✅ Yes | ~20–50MB | Most compatible format, best fallback |
| WEBM | VP9/VP8 | Modern browsers, open standard | ❌ No | ✅ Yes | ~15–35MB | Good quality, smaller size, not supported in Safari pre-16 |
| AV1 | AV1 | Cutting-edge compression | ❌ No | ✅ Yes | ~10–25MB | Smallest size, limited device support |
| GIF | Frame-based | Tiny looping animations | ✅ Limited² | ❌ No | ~5–15MB | Very inefficient for video; not recommended |
| MOV | ProRes/etc. | Editing, Apple-specific use | ✅ Partial | ✅ Yes | ~50–200MB | Not web-optimized, use for source only |
- Benchmarked at 1280×720 (720p), 24fps, Constant RF 23–25 equivalent.
- ² GIFs are image sequences with no real video compression or audio.
- Use MP4 (H.264) for universal compatibility and WEBM or AV1 for modern lean delivery.
🎧 Web Audio Format Reference
| Format | Codec | Best For | Streaming | Browser Support | Avg File Size (1-min @128kbps) | Notes |
|---|---|---|---|---|---|---|
| MP3 | MPEG-1 Layer 3 | Universal playback, podcasts | ✅ Yes | ✅ Full | ~1MB | Most compatible, lossy but efficient |
| AAC | AAC-LC | Streaming audio (YouTube, iTunes) | ✅ Yes | ✅ Full | ~0.9MB | Better quality than MP3 at same bitrate |
| OGG | Vorbis | Open-source alternative | ✅ Yes | ✅ Most (not Safari <14) | ~0.9MB | Smaller size, good quality |
| OPUS | Opus | Voice/video calls, modern web | ✅ Yes | ✅ Most (not Safari <13) | ~0.5–0.8MB | Best compression for voice, adaptive bitrate |
| WAV | PCM | Raw audio, editing/mastering | ❌ No | ✅ Full | ~10MB | Uncompressed, not ideal for web use |
| FLAC | FLAC | Lossless music streaming | ✅ Yes | ✅ Most (except Safari pre-16) | ~4–5MB | Audiophile-grade, larger size |
| AIFF | PCM | Apple-based uncompressed audio | ❌ No | ✅ Partial | ~10MB | Like WAV, but less portable |
- Benchmarked at 128kbps unless format dictates otherwise (Opus varies adaptively)
- MP3 is still the safest fallback for universal access
- OPUS and AAC offer the best efficiency for streaming or embedding voice/music online
- WAV/AIFF are ideal for editing, not delivery
🔤 Web Font Format Reference
| Format | Compression | Browser Support | Best For | Avg File Size (1 weight) | Notes |
|---|---|---|---|---|---|
| WOFF2 | ✅ Best | ✅ Full (Chrome, Firefox, Edge, Safari ≥10) | Modern web font delivery | ~20–40KB | Most efficient, preferred format |
| WOFF | ✅ Good | ✅ Full (fallback) | Fallback for older browsers | ~30–70KB | Slightly larger than WOFF2 |
| TTF | ❌ None | ✅ Most | App development, older Android | ~100–150KB | Editable, not optimized for web |
| OTF | ❌ None | ✅ Partial | Desktop publishing, macOS native | ~100–200KB | Advanced typography features, heavier |
| EOT | ❌ None | ⚠️ Only IE 6–11 | Legacy IE support only | ~50–100KB | Obsolete; use only if supporting IE8 |
| SVG | ❌ None | ⚠️ Obsolete | Early iOS use only | ~100–200KB | Deprecated, avoid use |
- WOFF2 is the gold standard for modern web use — compact, fast, and broadly supported.
- Include WOFF as a fallback for legacy browsers.
- Avoid TTF/OTF for production use unless embedding for native apps or editing.
- Subsetting fonts (e.g., Google Fonts API or tools like FontForge, Glyphhanger) can dramatically reduce file size.
- Only include weights and styles actually in use to avoid bloat.
📦 Web Compression Format Reference
| Format | Type | Best For | Compression Ratio | Speed | Browser Support | Notes |
|---|---|---|---|---|---|---|
| ZIP | Archive | File downloads, email attachments | ✅ Good (~2–3×) | ✅ Fast | ✅ Native via download | Most universal archive format |
| GZIP (.gz) | Stream/Single | HTTP compression, log files | ✅ Great (~2–5×) | ✅ Very fast | ✅ Full (server/client) | Standard for HTTP content compression |
| BROTLI (.br) | Stream/Single | Web asset delivery (JS/CSS/HTML) | ✅ Excellent (~3–6×) | ⚠️ Slower | ✅ Full (modern browsers) | Better than GZIP for static assets |
| TAR | Archive | Packaging multiple files (Linux) | ❌ None (no compression) | ✅ Fast | ❌ No browser | Often used with GZIP or BZIP2 |
| TAR.GZ | Archive+Compress | Unix packages, scripts | ✅ Great | ✅ Fast | ❌ No browser | Common for open-source software |
| 7Z | Archive | Large backups, ultra-compression | ✅ Best (~10×+) | ❌ Slower | ❌ No browser | High compression ratio, lower compatibility |
| RAR | Archive | Proprietary archives | ✅ Good | ⚠️ Slower | ❌ No browser | Requires special tools, license-restricted |
| ZSTD (.zst) | Stream | Logs, modern backups | ✅ Excellent | ✅ Very fast | ❌ No browser | Designed for speed and efficiency |
- For the web, focus on GZIP (default) and Brotli (modern, smaller).
- Use ZIP for downloadable file bundles (multi-platform support).
- Avoid formats that require manual extraction unless used for tech-savvy users.
- Brotli is now preferred for JS/CSS/HTML in production web servers (e.g., with NGINX or Cloudflare).
Whether you’re optimizing page load, making design decisions, preserving accessibility, or just trying to avoid another uncompressed 10MB PNG loading on mobile, know that format literacy gives you options most people don’t even realize they have.
And if you’ve made it this far, you probably care about this too! Yay!!!
I guess I’ll keep updating these guides as I find better ways to teach, share, and test them. If you’ve got additions, feedback, or horror stories from the front lines of format failure, I’d love to hear them.