File Formats Every Web Developer Should Know

Every file you serve on the web has a format, and every format has tradeoffs. Picking the wrong one costs you bandwidth, breaks compatibility, or degrades quality. Picking the right one is straightforward once you know the landscape.

This guide maps every file format a web developer encounters to its correct use case. Not the history, not the spec trivia — just what to use when, and why. Bookmark this as your reference table.

Each section covers one category with a decision matrix. Where format conversion is needed, we link directly to ChangeThisFile's converter routes so you can handle conversions without installing anything.

The Master Reference Table

This table covers 90% of what you'll serve. The remaining 10% is edge cases covered below.

Image Formats: The Decision Tree

Image format selection follows a simple decision tree. Start with the content type, end with the format.

Is it a vector graphic (logo, icon, illustration)? Use SVG. Full stop. SVG is infinitely scalable, CSS-styleable, and typically smaller than raster equivalents for simple graphics.

Is it a photograph or complex raster image for the web? Use WebP as your primary format with AVIF as a progressive enhancement. Both compress photos 25-50% smaller than JPG. Serve them via the <picture> element with a JPG fallback:

<picture>
  <source srcset="photo.avif" type="image/avif">
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" alt="Description" width="800" height="600">
</picture>

Is it a screenshot or graphic needing pixel-perfect lossless reproduction? Use PNG. For web delivery, also generate a lossless WebP version — it'll be 25-30% smaller than PNG.

Is it a favicon? Use a 32x32 PNG linked via <link rel="icon">, plus an SVG for modern browsers. Skip ICO unless you need legacy IE support.

Formats to Stop Using on the Web

GIF for animation: A 3-second GIF is 10MB. The same clip as MP4 is 200KB. Use <video autoplay muted loop playsinline> for "GIF-like" behavior with 98% less bandwidth.

BMP: Uncompressed pixel data. A 1080p BMP is 5.7MB versus 200KB as WebP. If you encounter BMP files, convert to WebP or PNG immediately.

TIFF: Professional print format. No browser renders TIFF natively. Convert to JPG or PNG for web use.

HEIC: Apple's camera format. Zero browser support. Always convert to JPG or WebP before serving on the web.

Video Formats: Two Formats Cover Everything

Web video is simpler than images because you really only need two container+codec combinations.

MP4 with H.264 (AVC): Universal playback. Every browser, every phone, every smart TV. Hardware decoding is everywhere. Use this as your default and fallback.

WebM with VP9: 30-50% smaller than H.264 at equivalent quality. Supported in Chrome, Firefox, Edge, and Android. Not supported in Safari before 14.1 (2021), so always provide an MP4 fallback.

<video controls preload="metadata" poster="thumb.jpg">
  <source src="video.webm" type="video/webm; codecs=vp9,opus">
  <source src="video.mp4" type="video/mp4">
</video>

AV1: The next generation. 30% smaller than VP9. Chrome and Firefox support it, Safari added support in Safari 17. Encoding is extremely slow without hardware encoders. Not yet practical as a primary delivery format for most sites.

Common Video Conversions

If you receive video in non-web formats, convert before serving:

• MKV to MP4 — MKV is common from screen recorders and downloads
• AVI to MP4 — Legacy Windows video format
• MOV to MP4 — Apple QuickTime, common from iPhone screen recordings
• FLV to MP4 — Flash video, still encountered in archived content
• MP4 to WebM — Generate a VP9 version for modern browsers
• GIF to MP4 — Replace animated GIFs with video for 90%+ file size reduction

Audio Formats: MP3 Is Fine, Opus Is Better

Audio format selection depends on whether you need universal compatibility or optimal quality-per-bit.

MP3 (128-192kbps): Universal support. Every browser, every device, every platform. Use MP3 at 128kbps for speech/podcasts and 192kbps for music where broad compatibility matters.

AAC (96-160kbps): Better quality than MP3 at the same bitrate. Natively supported in all browsers via the <audio> element. Apple's preferred format. Good choice when you control the encoder and need smaller files.

Opus (64-128kbps): The best lossy audio codec by objective quality metrics. Transparent quality at 128kbps (MP3 needs 256kbps for comparable results). Default codec for WebRTC. Supported in Chrome, Firefox, Edge, and Safari 14.1+. Use Opus when targeting modern browsers.

WAV: Uncompressed audio. Use only for sound effects that need zero latency decoding (Web Audio API) or when you need lossless source files. A 3-minute WAV is 30MB versus 3MB as MP3.

Common Audio Conversions

• WAV to MP3 — Compress raw recordings for web delivery
• FLAC to MP3 — Convert lossless archives to web-friendly format
• OGG to MP3 — Better compatibility across platforms
• MP4 to MP3 — Extract audio from video files
• AAC to MP3 — Universal format conversion

Font Formats: Just Use WOFF2

This is the simplest category. In 2026, there's one correct web font format: WOFF2.

WOFF2 uses Brotli compression, achieving 30% better compression than WOFF (which uses zlib). It's supported in 97%+ of browsers globally. The only holdouts are Internet Explorer (dead) and very old Android browsers.

@font-face {
  font-family: 'Custom';
  src: url('/fonts/custom.woff2') format('woff2');
  font-display: swap;
  font-weight: 400;
}

If you have fonts in other formats, convert them:

• TTF to WOFF2 — TrueType to web format
• OTF to WOFF2 — OpenType to web format
• WOFF to WOFF2 — Upgrade from WOFF1 compression

Key performance tips: Subset your fonts to only the characters you use (Latin, Latin Extended, etc.). A full Noto Sans is 400KB+ as WOFF2; a Latin-only subset is 20KB. Use font-display: swap to prevent invisible text during load. Preload critical fonts with <link rel="preload" as="font" type="font/woff2" crossorigin>.

Data Formats: JSON, CSV, and the Rest

JSON is the default data interchange format for the web. APIs speak JSON. Config files use JSON (or YAML/TOML). Browser localStorage stores JSON strings. fetch() has a built-in .json() method. Unless you have a specific reason to use something else, use JSON.

CSV is for tabular data exports. When users need to open data in Excel or Google Sheets, give them CSV. It's universally recognized by spreadsheet software and trivial to parse. For richer spreadsheet features (multiple sheets, formatting), convert CSV to XLSX.

XML is legacy in most web contexts but still used in RSS feeds, SOAP APIs, SVG, and some enterprise integrations. If you receive XML from an upstream API, convert to JSON at the integration boundary and work with JSON internally.

YAML is popular for configuration files (Docker Compose, GitHub Actions, Kubernetes). Never use YAML for data interchange — it's too ambiguous (the Norway problem: NO parses as boolean false). JSON to YAML and YAML to JSON conversions are common when moving between config formats.

Document Formats: PDF for Output, HTML for Everything Else

PDF is the web's standard for downloadable documents — invoices, reports, tickets, contracts. PDFs render identically everywhere and are printable by design. Generate them server-side with Puppeteer, WeasyPrint, or wkhtmltopdf. Client-side generation works too via jsPDF or html2pdf.js for simpler documents.

Common conversion routes for web apps:

• HTML to PDF — Render a page as a downloadable PDF
• DOCX to PDF — Convert uploaded Word docs for display
• CSV to PDF — Render data tables as PDF reports
• JPG to PDF | PNG to PDF — Combine images into PDF documents

DOCX is Microsoft Word's format. Web apps that handle document uploads will encounter DOCX constantly. You'll typically convert them to HTML for display (DOCX to HTML) or PDF for download (DOCX to PDF).

Markdown is the web developer's writing format. Use it for content authoring, documentation, and README files. Convert to HTML for rendering.

Archive Formats: ZIP for Downloads

ZIP is the only archive format you should serve to users. It's natively supported on Windows, macOS, and Linux without any additional software. When your web app needs to bundle multiple files for download, create a ZIP.

You can create ZIPs client-side with JSZip:

import JSZip from 'jszip';
const zip = new JSZip();
zip.file('report.csv', csvContent);
zip.file('chart.png', pngBlob);
const blob = await zip.generateAsync({ type: 'blob' });
// Trigger download

If users upload archives in other formats, convert them for processing:

• RAR to ZIP — RAR requires WinRAR; ZIP is universal
• 7Z to ZIP — 7-Zip format to standard ZIP
• TAR to ZIP — Unix archive to cross-platform format

Serving Files: Content-Type Headers Matter

Every file you serve needs the correct Content-Type header. Get it wrong and browsers will misinterpret the file, refuse to render it, or trigger security warnings.

// Essential MIME types for web development
const mimeTypes = {
  // Images
  '.webp': 'image/webp',
  '.avif': 'image/avif',
  '.jpg':  'image/jpeg',
  '.png':  'image/png',
  '.svg':  'image/svg+xml',
  '.ico':  'image/x-icon',
  '.gif':  'image/gif',
  // Video
  '.mp4':  'video/mp4',
  '.webm': 'video/webm',
  // Audio
  '.mp3':  'audio/mpeg',
  '.ogg':  'audio/ogg',
  '.wav':  'audio/wav',
  // Fonts
  '.woff2': 'font/woff2',
  // Data
  '.json': 'application/json',
  '.csv':  'text/csv',
  '.xml':  'application/xml',
  // Documents
  '.pdf':  'application/pdf',
  '.zip':  'application/zip',
};

Always set X-Content-Type-Options: nosniff to prevent browsers from MIME-sniffing the content. Without this header, a browser might execute a JavaScript file served as text/plain, creating a security vulnerability.

Format Performance Checklist

A quick-reference checklist for shipping files that don't destroy your Core Web Vitals:

• Images: Serve WebP/AVIF via <picture>, set explicit width/height to prevent CLS, lazy-load below-the-fold images, preload LCP image
• Video: Use preload="metadata" (not auto), always include a poster, use MP4 H.264 Baseline for mobile compatibility
• Audio: Use preload="none" for non-critical audio, prefer Opus in WebM container for size
• Fonts: WOFF2 only, subset to needed character ranges, font-display: swap, preload critical fonts
• JSON/API responses: Enable gzip/brotli compression at the CDN/server level — JSON compresses 70-80%
• PDF: Linearize ("fast web view") for streaming display in browser PDF viewers
• ZIP downloads: Set Content-Disposition: attachment to trigger download instead of navigation

Web format selection isn't about knowing every format — it's about knowing which 15-20 formats actually matter and when to reach for each one. The table at the top of this guide covers the vast majority of cases.

When you encounter a file in the wrong format for web delivery, convert it. ChangeThisFile handles 634 conversion routes across images, video, audio, documents, data, and archives — client-side when possible (files never leave your device) and server-side when heavier processing is needed.