How to preserve RGB color as much as possible converting a series of PNG files to a video container with ffmpeg?

Question

I have 950 PNG files which are intended to become individual frames in a 38 second video track á 25 frames per second. The file names are identical except for sequence number, as is customary in these kind of cases.

I want to produce a container of a widely-supported format, ideally WebM if all criteria can be met with it, or MPEG-4 for instance, with a codec that is supported by modern browsers for playback, from this series of PNG images I have. The problem is that the colors are shifted and the background color in the decoded video no longer matches the same RGB triplet sampled from the background color in the PNG images. This results in the video sticking out from intended background on my HTML page where the video is embedded.

I tried the simple:

ffmpeg -f image2 -i image%03d.png output.webm

which indeed gave me a 25 fps VP9 video track packed in a WebM container.

The PNG images are animation style, with solid background and simple shapes animating for foreground. They appear to be color untagged (that's what Adobe Bridge tells me, I assume this means no embedded color profile or a reference to one). The problem with my above attempt is that even though the container is played back in Chrome, the background color sampled from the PNG image, with RGB triplet #ED4D56, does not perceptually match the background color that appears in the video being played back.

Is this an unavoidable side-effect of the RGB to YUV (encoding) to RGB (playback) color conversion? Is there any way to mitigate this? I don't insist the frames in the video track be encoded using RGB, I suppose YUV is fine, as long as a modern browser playing back these frames produces the same (within a negligible margin of error) RGB triplet when decoding and displaying the frame(s).

My question is, what command line using ffmpeg can I try to mitigate this? I am open to switch the video codec, pixel format, enable color management in ffmpeg if it exists, etc.

Answer 1

I had a very similar task recently and I'd say there is still no perfect solution (as of Oct 2018). This is the side-effect of the low-precision RGB to YUV to RGB color conversion indeed. Even some "lossless" variants of codecs (e.g. libvpx-vp9 -lossless) produce distorted colors due to the YUV colorspace.

• If non-exact colors are acceptable, then the libvpx codec can make quite a good job:

  ffmpeg -r 25 -i image%03d.png -c:v libvpx -crf 4 -b:v 0 output.webm
  

  With these settings it produced a negligible amount of color shift or even the exact colors for some sets of frames. VPx codecs are widely supported (all major browsers except IE and Safari) and produce reasonable file size.

• If the exact colors are strictly required, then we need to avoid the colorspace conversion. The only cross-browser solution I came up with is to use animated png images. ffmpeg has only very basic support for apng, so it's better to use other tools, e.g. apngasm:

  apngasm output.png image001.png 1 25
  

  it'll work everywhere except IE and Edge (there it will fallback to static first frame). The file sizes are huge, but that's the price for the real lossless encoding.

• The libx264rgb codec also should be mentioned - using it will be the correct way of encoding the precise RGB colors when/if browsers will support it.