Fuzzy video export

[tpetry]

No matter what I try, the edges of objects in the videos always look fuzzy for every codec. But the still images look perfectly sharp. I tried every codec, quality control and image export setting. Did I miss any import setting?

When I export the image sequence and generate a video with ffmpeg then everything looks correct. So its not some internal problem about video image algorithms.

[JonnyBurger]

Indeed it shouldn't look like this!
It looks like a video was rendered without any antialiasing.

Which version of Remotion is this happening in, and what resolution do you export the video in?

[tpetry]

I tried exporting at 1448x874 @ 60fps and 1920x1080 @ 60fps.

Node.JS = v20.8.1, OS = darwin

On version: 4.0.76
- @remotion/bundler
- @remotion/cli
- @remotion/eslint-config
- @remotion/eslint-plugin
- @remotion/renderer
- @remotion/media-utils
- @remotion/paths
- @remotion/player
- @remotion/shapes
- @remotion/zod-types
- @remotion/tailwind
- @remotion/transitions
- remotion

✅ Great! All packages have the same version.

Would a sample project to reproduce the bug help?

[JonnyBurger]

@tpetry That would definitely be helpful! I'll take a look if you post one.

[tpetry]

I was able to remove anything complex from my video to keep only a few elements that showcase the issue:
https://github.com/tpetry/remotion-video-fuzzy

[JonnyBurger]

@tpetry The problem was resolved when changing the image format to JPEG or adding a background.

The video does not have a background, therefore the frames are transparent if the image format is set to PNG.
However, H.264 is not a codec that supports transparent frames, therefore FFmpeg needs to add a black background again.

It seems that this process does not happen with antialiasing, and that semi-transparent pixels get converted into full opaque pixels.

[tpetry]

Interesting. The JPEG change was not needed but setting a background manually is required. Good to know. That wasn't documented anywhere?