Export as Movie -> PNG sequence = compression artefacts

Exporting & Previewing
1

I get compression artefacts (banding) when exporting an animation with a colour blend animation.
Thought PNG export should be lossless. The banding is not visible in Hype or in a web browser. Appears on the exported PNGs.

Is there a way around this?

( The banding effects gets worse when the PNG sequence is imported to Adobe Premiere Pro and then exported - as far as I have tested, with most export settings in Premier Pro. )

Attached, a test document :slight_smile:

test_animated_gradient_export.hype.zip (24.5 KB)

2

Have you tried video export out of hype?

3

Yes. Even ProRes 422 gives banding.
And I need parts that are background transparent - a second reason to use PNG sequence.

4

PNG is lossless, but there's a few things that might effect it like bit depth, color profile information, and even the fact that you are on a retina display vs. using non-retina output.

Perhaps my eyes are bad, but don't see bad banding when I just do a PNG export on my setup :slight_smile:. Could you maybe send this info:

  • What display you are viewing on
  • What color profile you are using (in the Display system preferences)
  • A sample png from the export
  • A screenshot from Hype's editor showing that same frame (and please note if the same problem exists when taking the screenshot)
  • A screenshot or image when imported into Adobe Premiere

For all the images, please include this in a .zip so we know we're getting the exact copy and not one that the forum software may have altered in some way.

5

Actually… I had to make a separate test project - not to include client files at this forum. With the PNG sequence export from the Hype document I sent previously - there are no banding on the PNGs.
I checked with quick look. When the files are opened in Preview - it looks OK!

However, with the client files - same type of Hype gradient animation - there are banding artefacts.
Sometimes visible in Hype too. Have not seen it while doing a preview in Safari.
Also visible in Premiere Pro.

For me… I think the major challenge is to find proper export settings for Premiere Pro - another product, another forum.

Yet - want to have as good input as possible in this workflow; Hype export -> Premiere Pro -> video export.
screenshots_PT1.zip (2.5 MB)

6

screenshots_PT2.zip (1.9 MB)

7

screenshots_PT3.zip (2.3 MB)

8

screenshots_PT4.zip (1.3 MB)

It was tricky to take the Premiere screenshot and keep the file size below 3MB.

9

Thanks for sending those.

So where does it not look okay? Just in Premiere and no where else? Or just in a premiere export?

I'm not 100% certain on the flow and when/where you see this issue.. if you don't mind elaborating that would be great.

Also, can you send that sample .hype document, so I can correlated the document to what you are seeing?

Realistically I'm not sure you can really get banding to go away unless you're dealing with 10-bit color. 8-bit usually will show some banding.

You're welcome to upload files to an alternate service (dropbox, icloud, wetransfer, etc.) and post a link.

10

animated_gradient.zip (2.1 MB)

Hype test project + one sample of exported PNG ( + the Premiere Pro project).
Have tried to maximise all colour settings in Premiere.

After further analysis:

  1. Banding is visible in Hype if a bitmap that is resized with animated scaling is present. Otherwise it looks perfect in Hype - on the liquid retina XDR display.
    Always perfect in Safari.

  2. Banding is more or less visible on exported files - perhaps more at certain gradient angles.

  3. Banding visible in Premiere preview window - even with all preview settings set to 'max quality'.

  4. Banding most apparent in the exported video from Premiere.

This is tricky - maybe we shouldn't spend too much time on this :slight_smile:

1 Like
11

Thanks for sending those and more details - it is now very easy for me to see and reproduce the issue (even without premiere pro import).

I think there's some voodoo Safari and Chrome are doing in the rendering pipeline to produce smoother gradients than typical. (Typical being standard algorithms and 8-bit sRGB color).

I found that if you're looking at the smooth gradient in Hype, and then switch to another application and jiggle its window, then banding will even appear in Hype!

I'm not sure there's any way we can properly capture the non-banded window due to whatever shenanigans WebKit/Chrome are doing. And even if we capture, I don't think the data could be written out as an 8-bit PNG. (Though other >8-bit formats may be okay if we can). Likewise doing system-based screen captures of the Hype window, even when looking smooth, will result in banding.

I've filed a bug to investigate more at some point, since it'd be good to make sure at least we have a pipeline capable of P3/10-bit color, but I'd say the chances are slim for this looking too good. 8 bits per channel is just not enough to properly represent smooth gradients over a large surface.

Sorry there's not better news... You might be able to use 10-bit color in a premiere project and/or use after effects with this to get the desired result?

12

Thanks!

After working more with this, I have noticed that the banding can appear in Hype. Shutting down other applications might help. Yesterday a got the feeling that night shift on for the display has an influence. Should be off anyway, when working with colour corrections etc.

It would be nice if 10-bit video output from Hype was a possibility. Also, to have some more control of codec settings.

I have used Hype for things where others perhaps would have used e.g. After Effects.
Hype is a much better animation tool! :slight_smile:

Will solve this, somehow. Includes reading in on color management with Preimere and export settings for HDR videos.

13

Have managed to do an export from Hype (PNG sequence) with very little visible banding.

14

Yes, absolutely agreed.

Interesting - did you make any other changes beyond night shift?

15

Turned off all applications. Started Hype, made the export.

As a side note: animated colour gradients made directly in Premiere also gives artefacts in exported videos, unless export color space is set to Rec. 2100 HLG or Rec. 2100 PQ. My conclusions so far.

1 Like