Quality Guide

Video encoding involves heavily compressing the video data to reduce the file size, which is a lossy process.
This document explains a few factors and settings that can be used to control the quality of the video.

CRF

The main setting to control the quality of the video is the Constant Rate Factor (CRF).
All ways to render a video in Remotion allow passing a CRF value. Allowed values depend on the codec.

Resolution (Unsharp text)

A somewhat surprising way to lose quality is the fact that many computers have a high-density display, but the dimensions of a video don't consider that.

Consider a 1920x1080 video, in which you render text:

tsx
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"
    />
  );
};

tsx
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"
    />
  );
};

If you render it out and embed the video on a webpage:

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

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

You will have a less sharp text if the video is displayed on a high-density display (like a Macbook).
This is because the device has a 2x pixel density, but the video is 1920x1080, which means that each pixel is 2x bigger than the device's pixel.
To display the font with the same sharpness as on a low-density display, you would need to render a 4K video.

Use Output Scaling to render the video with a higher pixel density.

JPEG Quality

Remotion makes screenshots of the browser page by default in JPEG format.
The JPEG quality by default is 80 (on a scale of 0 to 100).
You may tweak it using the --jpeg-quality flag or switch to PNG as the image format using --image-format=png (slower).

Color accuracy

Export your video in bt709 for more accurate colors.

note

This will become the default in Remotion 5.0.

GIF Colors

Ensure you are on at least Remotion version v4.0.138 to get the best color accuracy.
GIFs only support a 256 colors palette, which leads to a big quality loss. Embrace it, or choose a different format if it is not acceptable.

Video bitrate

You can use the --video-bitrate flag to control the bitrate of the video.
It is mutually exclusive with --crf option, which means you can not use both at the same time.

x264 Preset

When exporting a H.264 video, you can use the --x264-preset flag to control the quality/speed/compression tradeoff.