Output scaling - Remotion

Output scaling is useful if you would like to render the video in multiple resolutions in the same aspect ratio.

Example: Your video canvas is in Full HD (1920x1080), but would like to render your video to be in 4k (3840x2160 or 2x).

Remotion can support this higher resolution by:

setting the deviceScaleFactor of the headless browser in server-side rendering.
upscaling items on the canvas in client-side rendering.

How to scale

In the CLI, during a render of a video or a still, pass the --scale flag. For example: --scale=2
In the Node.JS functions renderStill(), renderFrames(), renderStillOnLambda() and renderMediaOnLambda(), renderMediaOnVercel() and renderStillOnVercel(), renderMediaOnCloudRun(), renderStillOnCloudRun(), you can pass a scale option.
In the client-side rendering functions renderMediaOnWeb(), renderStillOnWeb(), you can pass a scale option.

In the config file, you can pass the scale using the following statement:

import {Config} from '@remotion/cli/config';
// ---cut---
Config.setScale(2);

Allowed values

The highest scale possible is 16 (sixteen times higher dimensions on each size or 256 times more pixels).

Positive values below 1 are allowed. For example, 0.5 will half each dimension.

Before 4.0.328, there were further limitations:

Scaling values leading to non-integer pixels were not allowed.
Scaling values leading to non-even numbers were not allowed when rendering with codec h264.

Since 4.0.328, rounding is performed automatically.

Scalable elements

Elements that can be upscaled and that will enhance increased resolution are:

Text elements
SVG elements
Images (if their resolution is sufficient to display in a higher resolution)

Canvas and WebGL elements cannot be upscaled automatically, since their backing bitmap resolution is fixed by design.
You can however opt into a higher backing resolution for the following components by passing a pixelDensity prop:

<HtmlInCanvas> – pixelDensity
<Solid> – pixelDensity

To support the scale option during a render, pass usePixelDensity(), which resolves to the render scale:

tsx

import {AbsoluteFill, Solid, usePixelDensity} from 'remotion';

export const MyComp: React.FC = () => {
  const pixelDensity = usePixelDensity();
  return (
    <AbsoluteFill>
      <Solid color="#3344ff" width={1920} height={1080} pixelDensity={pixelDensity} />
    </AbsoluteFill>
  );
};

Elements that cannot be upscaled for increased resolution are:

Videos