Remotion LabRemotion Lab
›渲染›影片品質指南

影片品質指南

了解如何控制 Remotion 渲染影片的品質，包括 CRF 值、解析度縮放、JPEG 品質、位元率和 x264 預設等設定。

影片品質指南

影片編碼是一個對影片資料進行大量有損壓縮以縮小檔案大小的過程。本文說明幾個可用於控制影片品質的因素和設定。

CRF（恆定速率因子）

控制影片品質的主要設定是恆定速率因子（CRF，Constant Rate Factor）。Remotion 所有渲染影片的方式都允許傳入 CRF 值。

  • CRF 值越低，品質越高，檔案越大
  • CRF 值越高，品質越低，檔案越小

允許的 CRF 範圍取決於編碼器：

編碼器CRF 範圍預設值說明
H.2640–51180 為無損，51 為最低品質
H.2650–5123同 H.264，但壓縮效率更高
VP84–639值越低品質越高
VP90–6328值越低品質越高

注意：如果你啟用了硬體加速，就無法設定 CRF。請改用 --video-bitrate 選項。

使用 CLI 設定 CRF

# H.264 高品質（適合封存）
npx remotion render MyComp --codec=h264 --crf=0
 
# H.264 平衡（預設設定）
npx remotion render MyComp --codec=h264 --crf=18
 
# H.264 較小檔案（適合網路串流）
npx remotion render MyComp --codec=h264 --crf=28

使用 renderMedia() 設定 CRF

import { renderMedia, selectComposition } from "@remotion/renderer";
 
const composition = await selectComposition({
  serveUrl: "http://localhost:3000",
  id: "MyComp",
});
 
await renderMedia({
  composition,
  serveUrl: "http://localhost:3000",
  codec: "h264",
  crf: 18, // 高品質設定
  outputLocation: "out/video.mp4",
});

解析度與清晰度

一個常被忽視的品質損失原因是高密度螢幕（Retina 顯示器）上影片模糊的問題。

問題說明

考慮以下 1920x1080 的合成，其中包含文字：

import { Composition } from "remotion";
 
const MyComponent = () => {
  return <div>Hello World</div>;
};
 
const Root: React.FC = () => {
  return (
    <Composition
      width={1920}
      height={1080}
      fps={30}
      durationInFrames={100}
      component={MyComponent}
      id="MyComp"
    />
  );
};

如果你在網頁中嵌入此影片：

<video src="video.mp4" width="1920" height="1080"></video>

在高密度螢幕（如 MacBook Retina 顯示器，2x 像素密度）上顯示時，文字會模糊。這是因為裝置有 2x 像素密度，但影片是 1920x1080，每個像素比裝置的實際像素大 2 倍。

解決方案

使用輸出縮放以更高像素密度渲染影片：

npx remotion render MyComp --scale=2

這樣會渲染出 3840x2160 的影片，在 Retina 螢幕上顯示清晰的文字和圖形。

JPEG 品質

Remotion 預設以 JPEG 格式截取瀏覽器頁面截圖，JPEG 品質預設值為 80（範圍 0 到 100）。

調整 JPEG 品質

# 提高 JPEG 品質（較大檔案，較慢渲染）
npx remotion render MyComp --jpeg-quality=95
 
# 降低 JPEG 品質（較小中間檔案，較快渲染）
npx remotion render MyComp --jpeg-quality=60

切換為 PNG 格式

如果需要更高的色彩準確度，可以切換為 PNG 格式（速度較慢，但無損）：

npx remotion render MyComp --image-format=png
await renderMedia({
  composition,
  serveUrl: "http://localhost:3000",
  codec: "h264",
  imageFormat: "png", // 使用 PNG 格式截圖
  outputLocation: "out/video.mp4",
});

色彩準確度

建議以 bt709 色彩空間匯出影片，以獲得更準確的色彩：

npx remotion render MyComp --color-space=bt709

注意：這將成為 Remotion 5.0 的預設設定。

GIF 色彩

  • 確保使用 Remotion v4.0.138 或以上版本，以獲得最佳色彩準確度
  • GIF 只支援 256 色調色板，這會導致明顯的色彩損失
  • 如果色彩損失無法接受，請考慮使用其他格式

影片位元率

你可以使用 --video-bitrate 旗標控制影片的位元率。此選項與 --crf 互斥，不能同時使用。

# 設定 8 Mbps 位元率（適合 Full HD 影片）
npx remotion render MyComp --video-bitrate=8M
 
# 設定 2 Mbps 位元率（適合網路串流）
npx remotion render MyComp --video-bitrate=2M
await renderMedia({
  composition,
  serveUrl: "http://localhost:3000",
  codec: "h264",
  videoBitrate: "8M",
  outputLocation: "out/video.mp4",
});

x264 預設

匯出 H.264 影片時，可使用 --x264-preset 旗標控制品質、速度和壓縮之間的取捨：

預設值速度壓縮效率適用場景
ultrafast最快最低快速預覽
superfast很快較低—
veryfast快中低—
faster較快中—
fast中快中—
medium中中預設值
slow慢高高品質輸出
slower很慢很高—
veryslow最慢最高封存用途
# 高品質，但渲染時間較長
npx remotion render MyComp --codec=h264 --x264-preset=slow
 
# 快速渲染，適合預覽
npx remotion render MyComp --codec=h264 --x264-preset=ultrafast
await renderMedia({
  composition,
  serveUrl: "http://localhost:3000",
  codec: "h264",
  x264Preset: "slow",
  outputLocation: "out/video.mp4",
});

綜合建議

網路串流影片

npx remotion render MyComp \
  --codec=h264 \
  --crf=23 \
  --color-space=bt709

高品質封存

npx remotion render MyComp \
  --codec=h264 \
  --crf=0 \
  --x264-preset=slow \
  --image-format=png \
  --scale=2

快速預覽

npx remotion render MyComp \
  --codec=h264 \
  --crf=35 \
  --x264-preset=ultrafast \
  --jpeg-quality=60

參見