Complete Guide to Multimedia Files: Formats, Online Preview, and Performance Optimization

Multimedia Files
├── Images
│   ├── Raster: JPEG, PNG, GIF, WebP, AVIF, BMP, TIFF
│   └── Vector: SVG
├── Audio
│   ├── Lossy: MP3, AAC, OGG, Opus
│   └── Lossless: WAV, FLAC, ALAC
├── Video
│   ├── Common Containers: MP4, WebM, MOV, AVI, MKV
│   └── Streaming: HLS, DASH
├── Documents
│   ├── PDF
│   └── Office: Word, Excel, PowerPoint
└── 3D Models
    └── GLTF/GLB, OBJ, FBX, STL, USDZ

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Fallback">
</picture>

JPEG Quality Settings:
├── Thumbnails: 60-70% (small file, acceptable quality)
├── Standard: 75-85% (balance of quality and size)
├── High quality: 90-95% (when detail matters)
└── Progressive: Enabled (improves loading experience)

WebP Quality Settings:
├── Thumbnails: 65-75%
├── Standard: 80-90%
└── Lossless mode: For icons, screenshots

<!-- srcset approach -->
<img srcset="small.jpg 400w,
             medium.jpg 800w,
             large.jpg 1200w"
     sizes="(max-width: 600px) 100vw,
            (max-width: 1200px) 50vw,
            33vw"
     src="medium.jpg"
     alt="Responsive image">

<!-- picture element approach -->
<picture>
  <source media="(min-width: 1200px)" srcset="large.webp">
  <source media="(min-width: 600px)" srcset="medium.webp">
  <source srcset="small.webp">
  <img src="fallback.jpg" alt="Responsive image">
</picture>

<!-- Native lazy loading -->
<img src="image.jpg" loading="lazy" alt="Lazy loaded image">

<!-- Placeholder approach -->
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Crect fill='%23f0f0f0' width='400' height='300'/%3E%3C/svg%3E"
     data-src="image.jpg"
     class="lazyload"
     alt="Lazy loaded image">

# ImageMagick batch processing
convert input.jpg -resize 1200x800\> -quality 85 -strip output.webp

# Generate multiple responsive sizes
convert input.jpg -resize 400x\> small.webp
convert input.jpg -resize 800x\> medium.webp
convert input.jpg -resize 1200x\> large.webp

# PNG compression
pngquant --quality=65-80 input.png -o output.png
optipng -o7 input.png

# Batch WebP conversion
find . -name "*.jpg" -exec cwebp -q 85 {} -o {}.webp \;

# AAC encoding
ffmpeg -i input.wav -c:a aac -b:a 128k -ar 44100 output.m4a

# MP3 encoding
ffmpeg -i input.wav -c:a libmp3lame -b:a 192k -q:a 2 output.mp3

# Opus encoding (real-time communication)
ffmpeg -i input.wav -c:a libopus -b:a 64k output.opus

<audio controls preload="metadata">
  <source src="audio.mp3" type="audio/mpeg">
  <source src="audio.ogg" type="audio/ogg">
  Your browser does not support audio playback
</audio>

Video File = Container + Video Codec + Audio Codec

Common Containers: MP4, WebM, MOV, MKV, AVI
Common Video Codecs: H.264, H.265, VP9, AV1
Common Audio Codecs: AAC, MP3, Opus, AC3

# General web video (compatibility first)
ffmpeg -i input.mp4 \
  -c:v libx264 -profile:v high -level 4.0 \
  -b:v 4M -maxrate 5M -bufsize 8M \
  -c:a aac -b:a 128k \
  -movflags +faststart \
  output.mp4

# Parameter explanation:
# -profile:v high  : Use High Profile
# -level 4.0       : 1080p compatible
# -b:v 4M          : Target bitrate 4Mbps
# -maxrate 5M      : Maximum bitrate 5Mbps
# -bufsize 8M      : Buffer size
# -movflags +faststart : Move metadata to front for quick start

# High compression encoding
ffmpeg -i input.mp4 \
  -c:v libx265 -crf 28 \
  -c:a aac -b:a 128k \
  output_hevc.mp4

# Generate video thumbnail
ffmpeg -i input.mp4 -ss 00:00:01 -vframes 1 -q:v 2 thumbnail.jpg

HLS Structure:
├── master.m3u8 (master playlist)
├── playlist_240p.m3u8
├── playlist_360p.m3u8
├── playlist_720p.m3u8
└── segment_*.ts (video segments)

ffmpeg -i input.mp4 \
  -filter_complex "[v:0]split=3[v1][v2][v3]" \
  -map "[v1]" -b:v:0 800k -s:v:0 640x360 \
  -map "[v2]" -b:v:1 2000k -s:v:1 1280x720 \
  -map "[v3]" -b:v:2 4000k -s:v:2 1920x1080 \
  -c:a aac -b:a 128k \
  -f hls -hls_time 6 -hls_list_size 0 \
  -master_pl_name master.m3u8 \
  -var_stream_map "v:0,a:0 v:1,a:0 v:2,a:0" \
  stream_%v.m3u8

<!-- Basic video playback -->
<video controls width="800" poster="thumbnail.jpg" preload="metadata">
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  Your browser does not support video playback
</video>

<!-- HLS playback (requires HLS.js) -->
<video id="video" controls></video>
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<script>
  if (Hls.isSupported()) {
    const video = document.getElementById('video');
    const hls = new Hls();
    hls.loadSource('https://example.com/video/master.m3u8');
    hls.attachMedia(video);
  }
</script>

1. Encoding Optimization
   ├── Use H.264 High Profile
   ├── Set reasonable GOP size (2-4 seconds)
   ├── Enable B-frames for better compression
   └── Use two-pass encoding

2. Transmission Optimization
   ├── Adopt HLS/DASH adaptive streaming
   ├── CDN acceleration
   ├── Enable HTTP/2 or HTTP/3
   └── Enable Gzip/Brotli compression

3. Playback Optimization
   ├── Set poster image
   ├── Use preload="metadata"
   ├── Lazy load video elements
   └── Use player libraries like video.js

4. Experience Optimization
   ├── Autoplay (muted)
   ├── Playback speed control
   ├── Picture-in-picture mode
   └── Subtitle support

<canvas id="pdf-canvas"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
<script>
  const url = 'document.pdf';
  const canvas = document.getElementById('pdf-canvas');
  const ctx = canvas.getContext('2d');

  pdfjsLib.getDocument(url).promise.then(pdf => {
    pdf.getPage(1).then(page => {
      const viewport = page.getViewport({ scale: 1.5 });
      canvas.height = viewport.height;
      canvas.width = viewport.width;
      page.render({ canvasContext: ctx, viewport: viewport });
    });
  });
</script>

# Ghostscript PDF compression
gs -sDEVICE=pdfwrite -dCompatibilityLevel=1.4 \
   -dPDFSETTINGS=/ebook \
   -dNOPAUSE -dQUIET -dBATCH \
   -sOutputFile=compressed.pdf input.pdf

# PDFSETTINGS options:
# /screen   - 72dpi, smallest file
# /ebook    - 150dpi, medium quality
# /printer  - 300dpi, print quality
# /prepress - 300dpi, highest quality

# Convert to PDF
libreoffice --headless --convert-to pdf document.docx

# Convert to HTML
libreoffice --headless --convert-to html document.docx

// Excel preview (SheetJS)
import * as XLSX from 'xlsx';

async function previewExcel(file) {
  const data = await file.arrayBuffer();
  const workbook = XLSX.read(data);
  const sheet = workbook.Sheets[workbook.SheetNames[0]];
  const html = XLSX.utils.sheet_to_html(sheet);
  document.getElementById('preview').innerHTML = html;
}

// Word preview (docx-preview)
import { renderAsync } from 'docx-preview';

async function previewWord(file) {
  const data = await file.arrayBuffer();
  await renderAsync(data, document.getElementById('preview'));
}

model.gltf/
├── model.gltf (JSON description)
├── textures/
│   ├── diffuse.png
│   └── normal.png
└── model.bin (geometry data)

import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';

// Scene initialization
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(width, height);
document.getElementById('container').appendChild(renderer.domElement);

// Controls
const controls = new OrbitControls(camera, renderer.domElement);

// Loaders
const loader = new GLTFLoader();
const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath('/draco/');
loader.setDRACOLoader(dracoLoader);

// Load model
loader.load('model.glb', (gltf) => {
  scene.add(gltf.scene);
  renderer.render(scene, camera);
});

// Animation loop
function animate() {
  requestAnimationFrame(animate);
  controls.update();
  renderer.render(scene, camera);
}
animate();

# Install Draco tools
npm install -g draco3d

# Compress GLTF
gltf-pipeline -i input.gltf -o output.glb -d

# Compression parameters
# -d, --draco.compressMeshes  Compress meshes
# --draco.compressionLevel    Compression level (0-10)

const lod = new THREE.LOD();

// Switch model detail based on distance
lod.addLevel(highDetailModel, 0);      // 0-50 meters
lod.addLevel(mediumDetailModel, 50);   // 50-100 meters
lod.addLevel(lowDetailModel, 100);     // 100+ meters

scene.add(lod);

// Intersection Observer lazy loading
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const element = entry.target;
      if (element.dataset.src) {
        element.src = element.dataset.src;
      }
      observer.unobserve(element);
    }
  });
}, { rootMargin: '100px' });

document.querySelectorAll('.lazy').forEach(el => observer.observe(el));

<!-- Preload critical resources -->
<link rel="preload" href="hero-image.webp" as="image">
<link rel="preload" href="video.mp4" as="video">

<!-- Preconnect -->
<link rel="preconnect" href="https://cdn.example.com">
<link rel="dns-prefetch" href="https://cdn.example.com">

Image Progressive Loading Flow:
├── 1. Display blurry placeholder (20px wide, blur filter)
├── 2. Load medium quality (400px wide)
└── 3. Load high quality (1200px wide)

Video Progressive Loading Flow:
├── 1. Display poster image
├── 2. Load metadata
├── 3. Load first frame
└── 4. Load video segments on demand

HTTP Cache Configuration:

Static Resources (with hash):
├── Cache-Control: max-age=31536000, immutable
└── Example: image.a1b2c3.webp

Dynamic Resources:
├── Cache-Control: max-age=3600, stale-while-revalidate=86400
└── Use with ETag

User Uploaded Content:
├── Cache-Control: max-age=86400
├── CDN cache: 7-30 days
└── Version control: image.jpg?v=123

CDN Image Processing Services:

Alibaba Cloud OSS + IMG:
├── Image resize: ?x-oss-process=image/resize,w_800
├── Format conversion: ?x-oss-process=image/format,webp
├── Quality adjustment: ?x-oss-process=image/quality,q_85
└── Watermark: ?x-oss-process=image/watermark,...

Tencent Cloud COS:
├── Image processing: ?imageMogr2/thumbnail/800x
├── Format conversion: ?imageMogr2/format/webp
└── Quality adjustment: ?imageMogr2/quality/85

Video Processing:
├── Alibaba Cloud VOD: Transcoding, screenshots, watermarks
├── Tencent Cloud VOD: Transcoding, content moderation
└── Qiniu Cloud: Audio/video processing, AI analysis

// Performance API monitoring
const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach(entry => {
    console.log(`${entry.name}: ${entry.duration}ms`);
  });
});

observer.observe({ entryTypes: ['resource', 'paint', 'largest-contentful-paint'] });

// Custom metrics
const img = new Image();
img.onload = () => {
  const timing = performance.now() - startTime;
  console.log(`Image load time: ${timing}ms`);
};
const startTime = performance.now();
img.src = 'image.webp';