進階渲染：透明影片、GIF、編碼格式全攻略
同一個 Remotion 專案輸出 MP4、GIF、透明 MOV、HDR、WebM——學會渲染參數、編碼格式、硬體加速，選對格式省時省頻寬。
成品預覽
這是一支 14 秒的 Remotion 精華集錦（showreel）——kinetic typography、數據動畫、logo 揭露、幾何色塊、電影感光暈，快剪呈現 Remotion 能做出來的動畫風格。片尾低調帶出一排格式標籤（MP4、H.264、HEVC、WebM、ProRes、GIF、HDR），暗示同一個原始檔，不同用途就選不同格式輸出。
這篇會做出什麼
把同一個 Remotion composition 輸出成 5 種不同格式，理解每種的取捨：
- MP4 H.264：YouTube、社群媒體、通用
- MP4 H.265 (HEVC)：同品質檔案更小，但相容性差
- WebM VP9：網頁嵌入、透明背景支援
- ProRes 4444 (MOV)：透明背景、專業剪輯軟體
- GIF：Twitter/Slack 小片段，最多 8 秒
- HDR MP4：Dolby Vision / HDR10，高階顯示器
每種格式都會比較「檔案大小、品質、相容性、用途」。
前置知識
- 有一支已經做好的 Composition（用 T03 片頭或 T06 儀表板都行）
Step 1：基本 MP4 H.264（最通用）
npx remotion render MyComposition out/video.mp4預設就是 H.264 yuv420p 30fps CRF 18。幾乎所有平台都吃這個格式。
CRF 是 H.264 的品質參數：
- 15~18：視覺無損
- 20~23：網路串流建議
- 28+：低品質
渲染 MyComposition 成 MP4：
- H.264 CRF 18
- 輸出 out/high-quality.mp4
- 確認檔案大小
💡 編碼參數、CRF、preset 的完整說明在 /docs/encoding。
Step 2：H.265 / HEVC（同品質更小）
npx remotion render MyComposition out/hevc.mp4 --codec=h265H.265 同樣視覺品質下檔案大約小 30~50%。但：
- Safari 沒問題，Chrome 要看版本
- 編碼速度比 H.264 慢 2~3 倍
- 某些 Android 裝置不支援
何時用 H.265：大檔案 + iOS 用戶為主 + 自己掌控播放端。
💡 各種 codec 對比、硬體解碼支援在 /docs/video-formats。
Step 3：WebM VP9（網頁 + 透明）
npx remotion render MyComposition out/video.webm --codec=vp9WebM 在 Chrome / Firefox 網頁直接播放很友善。更重要：支援 alpha 通道。
何時用 WebM：
- 網頁嵌入小動畫
- 需要透明背景
- 不用支援 Safari（iOS 較舊版本不吃 WebM）
Step 4：透明背景 MOV（ProRes 4444）
這是動畫/影片合成的聖杯——透明背景讓你疊到任何影片上。
渲染透明背景版本：
npx remotion render MyComposition out/alpha.mov \
--codec=prores --pixel-format=yuva444p10le
先決條件：
1. Composition 的 <AbsoluteFill> 不能有 backgroundColor
2. 外層改成 style={{ backgroundColor: "transparent" }}
3. 或者在 Root.tsx 的 Composition defaultProps 設 backgroundColor="transparent"
ProRes 4444 是蘋果的專業編碼，支援 alpha。檔案很大（1080p 30fps 約 200 MB/分鐘），但可以丟進 Premiere / Final Cut 當素材。
💡 透明影片的完整設定、陷阱、相容性在 /docs/transparent-videos 和 /docs/video-transparency。
Step 5：GIF（Twitter/Slack）
npx remotion render MyComposition out/video.gif --codec=gifGIF 的限制：
- 最多 256 色
- 沒有聲音
- 檔案很大（動態複雜時）
- 最高 30fps（大多數軟體只吃到 15fps）
優化：
渲染 GIF 時加 --every-nth-frame=2 只取一半的幀
--width=640 縮小尺寸
這樣 10 秒的 GIF 可能從 10MB 降到 2MB
💡 GIF 渲染的完整參數、優化、取捨在 /docs/render-gif。
Step 6：HDR（Dolby Vision / HDR10）
渲染 HDR MP4：
npx remotion render MyComposition out/hdr.mp4 \
--codec=h265 \
--color-space=bt2020-ncl \
--hdr-mode=dolby-vision
先決條件：
- macOS 13+ 或 Linux with HEVC support
- 硬體支援 HDR encoding
- 內容要真的有 HDR 顏色（用
color-space對應的 P3 顏色）
何時用 HDR：Apple TV 上架、高階 OLED 電視展示、專業影片作品。
💡 HDR 的設定、colour space、監看的完整流程在 /docs/hdr。
Step 7：硬體加速（編碼速度 x3）
預設 Remotion 用 CPU 編碼。開啟 GPU 加速：
在 remotion.config.ts：
Config.setHardwareAcceleration("if-possible");
macOS 會用 VideoToolbox，Linux 用 NVENC（需要 NVIDIA GPU）
Windows 用 QSV（Intel）或 NVENC
編碼速度比較（1080p 30fps 60 秒影片）：
- CPU H.264 CRF 18：~120 秒
- VideoToolbox H.264：~35 秒
- VideoToolbox HEVC：~50 秒
- NVENC H.264：~25 秒
注意：硬體編碼的品質通常略遜於 CPU 編碼。但速度快非常多，日常用夠了。
💡 硬體加速設定、各平台差異、品質對比在 /docs/hardware-acceleration。
Step 8：加 Metadata 與浮水印
渲染時加影片 metadata：
npx remotion render MyComposition out/video.mp4 \
--metadata="title=我的影片" \
--metadata="artist=Debug 土撥鼠"
這些 metadata 會嵌入 MP4 檔案裡，Spotify / Podcast 平台會讀。
浮水印：直接在 Composition 用 <AbsoluteFill> 疊個 Logo 圖就好。不需要渲染後處理。
💡
video-metadata與overlays-watermarks在 /docs/video-metadata 和 /docs/overlays-watermarks。
Step 9：一次渲染所有格式
寫一個腳本同時產 5 種格式：
新建 scripts/render-all.mjs：
import { bundle } from "@remotion/bundler";
import { renderMedia, selectComposition } from "@remotion/renderer";
const bundled = await bundle("./src/index.ts");
const composition = await selectComposition({ serveUrl: bundled, id: "MyComposition" });
const formats = [
{ name: "mp4-h264", codec: "h264", outputLocation: "out/video.mp4" },
{ name: "mp4-h265", codec: "h265", outputLocation: "out/hevc.mp4" },
{ name: "webm-vp9", codec: "vp9", outputLocation: "out/video.webm" },
{ name: "mov-alpha", codec: "prores", outputLocation: "out/alpha.mov", pixelFormat: "yuva444p10le" },
{ name: "gif", codec: "gif", outputLocation: "out/video.gif", everyNthFrame: 2 },
];
for (const format of formats) {
console.time(format.name);
await renderMedia({ composition, serveUrl: bundled, ...format });
console.timeEnd(format.name);
}
一行命令產所有格式：node scripts/render-all.mjs
💡
render-all批量渲染完整範例在 /docs/render-all。
Step 10：渲染品質調整與 Scaling
如果想渲染 4K 但 composition 是 1080p：
npx remotion render MyComposition out/4k.mp4 \
--scale=2 \
--width=3840 \
--height=2160
或者反過來，渲染 composition 是 4K 但輸出 1080p 節省空間：
--scale=0.5
💡
render-scaling、render-quality、artifacts在 /docs/render-scaling、/docs/render-quality、/docs/artifacts。
完成！格式對照表
| 格式 | 檔案大小 | 透明 | 音訊 | 用途 |
|---|---|---|---|---|
| MP4 H.264 | 中 | ❌ | ✅ | 通用、YouTube、社群 |
| MP4 H.265 | 小 | ❌ | ✅ | iOS / 節省空間 |
| WebM VP9 | 中 | ✅ | ✅ | 網頁嵌入 |
| MOV ProRes 4444 | 大 | ✅ | ✅ | 專業剪輯、疊圖 |
| GIF | 小~中 | ✅ | ❌ | Twitter/Slack 動圖 |
| HDR MP4 | 中 | ❌ | ✅ | 高階顯示器 |
本篇涵蓋的官方文件
- /docs/encoding — 編碼參數
- /docs/video-formats — 支援的格式
- /docs/transparent-videos — 透明影片
- /docs/render-gif — GIF 渲染
- /docs/render-scaling — 縮放渲染
- /docs/render-quality — 品質參數
- /docs/hdr — HDR 輸出
- /docs/hardware-acceleration — 硬體加速
- /docs/overlays-watermarks — 浮水印
- /docs/video-metadata — 影片 metadata
- /docs/render-all — 批量多格式
- /docs/artifacts — 渲染產物
- /docs/video-transparency — 透明度細節
常見問題
Q：ProRes 4444 檔案超大（2GB / 30 秒），正常嗎？ A：正常。ProRes 設計目標是「專業編輯中間檔」，壓縮率低、品質無損、支援 alpha。不適合直接當最終輸出，要再用剪輯軟體轉成 H.264 上架。
Q：透明 WebM 在 Chrome 可以播，Safari 就變黑？ A：Safari 歷史上對 WebM alpha 支援很爛。最穩的透明影片方案還是 ProRes（macOS）或 HEVC + alpha（iOS 11+）。網頁用 Lottie 或 SVG 動畫。
Q：GIF 渲染品質很爛、顏色跳動？ A：GIF 只有 256 色，是格式限制。改善：
- 降低 fps 到 15
- 用
--gif-dither=floyd-steinberg做抖動 - 如果要乾淨的動畫，改用 WebM 或 APNG
Q：渲染時 ffmpeg 報「unsupported pixel format」？ A：通常是 codec 跟 pixel format 不相容。例如 h264 不吃 yuva444p10le（這是 ProRes 專用）。看 /docs/encoding 的相容性表。
下一步
- T16：批量渲染——CSV 一次產 100 支影片 — 用渲染 API 做大規模自動化
- T20：打造影片 SaaS API + Docker 部署 — 把渲染搬到伺服器
有問題歡迎到 FB 社群 討論！