Resolution Loss on Export

[JKirshy]

I'm really hoping someone will be able to help me with this one. Here's the situation.

Client needs a 300x250 banner animation at 10MB or less MP4 or MOV. I've built the banner in AE and it looks perfect and sharp at 100%. When I export an uncompressed MOV or MP4 the resolution sucks. It looks pixelated and blurry on some of the objects. I've tried multiple export paths (using media encoder, and premier pro) and always the same result.

I even rebuilt all of the elements within AE so that everything would be vectors and I hoped would remain sharp no matter the scale. Still no good.

So then I made a new composition at 600x500 and again rebuilt all of the elements to fit this new size. When I exported this everything remained sharp. Even an MP4 at 9.1 MB is sharp and clean. When played in Quicktime it's perfect. And if I scale it down in my Quicktime pro player window to 300x250 is remains sharp. But again when I export from Quicktime Pro to 300x250 the resolution lessens significantly. Even an export using Pro Res 422(HQ) codex cannot keep the resolution perfect.

I don't know what to do. I'm at a loss. Please help!

[Roei Tzoref]

try this:

1. export to your desired format. use Adobe Media Encore high quality match source preset
2. import back to Ae
3. place it above the original setup in your composition

do you see any differences at 100% in Ae? if so, show them to us and provide screenshots: before+after. point us exactly where you see the problem (it may not be so apparent to us). also show us your export settings.

keep mind that when compressing to H.264, there will be loss of quality and a bit of softness. this will be more apparent if you have high contrast between the graphics and background.

[JKirshy]

I took this screenshot at 100% in AE. The left is the native AE comp and the right is the imported MP4 from Media Encoder. You can see that the Yellow arrow with the "New" super, and the other yellow rounded rectangle are of lower quality.

[Rick Gerard · Accepted solution]

Unless you are an expert in video formats and compression you have no business creating comps with custom sizes. Only a few of the delivery formats will accept custom sizes. All others, like H.264 MP4, will either resize your frame to a standard size or do a terrible job compressing the video. You simply cannot create a custom sized banner as a video and have it look great.

If you need custom banners for web pages you should be using Adobe Animate, not AE. Your change in apparent resolution comes from compression and pixel resampling. Adobe Animate can use the power of html5 to create pixel perfect animations for the web, AE will only create video.

The only other option would be to create your custom comp size to match your banner size perfectly, export a lossless video, import that video into Photoshop and then use Photoshop to export an animated gif. Using this technique you can dramatically decrease the file size of your banners because you can eliminate all of the frames where nothing is moving and change the timing of each frame in Photoshop (or any other app that makes animated gifs) so one frame can last 20 seconds where 20 seconds of video wuould require 20 X 30 or 15 or whatever frame rate you choose for your video and that can easily be hundreds of frames.

[JKirshy]

Rick, thanks for replying. I'm not sure if you intended to sound as harsh as you seem to come across in your response or not. But given that you have over 20 years experience using After Effects plus all of your other years of experience I'm willing to give you the benefit of the doubt and just assume you don't have time to be nice in your response.

In any event, I know that for regular banner ads I would normally provide a GIF or someone would have built these in a different program. And in fact they did just that with a number of other banners for this campaign. However for the 300x250 banner they (the client) wanted to use it on social media, Instagram or Facebook, and have asked for a video version of it. I believe that is what the delivery requirements are for that use.

I'm no rookie to this type of work. I've been doing this for a number of years and normally I have had no trouble creating these types of animations. But there is something very strange gong on with this one in particular. Especially when I can make the a perfectly good output at 600x500 as an h264 MP4 or a ProResHQ MOV.

If you have another suggestion of how I can get this same video file to look crisp at 300x250 I am all ears!

[Rick Gerard]

If the client insists on that frame size for the video then they have to live with the consequences. You might try a different compressor (handbrake) but H.264 has standards for both frame size and frame rate and any deviation from the standards will cause a loss of quality, especially where you have solid colors and hard edges against white. This happens because of the way MPEG groups colors in blocks of pixels and averages the information against the luminance channel.

Clients need to be made aware of the limitations of the frame size they choose and if they want the best quality they have to stick with the standards. I've had several clients over the years that just couldn't accept the limitations of the technology so I stopped working for them. I've had more clients that were more than willing to listen and learn and adjust their expectations and even their specifications to achieve the best quality product.

My best suggestion for hiding those artifacts would be to change the design a bit, make sure that everything is perfectly aligned on the pixel grid and make sure that your color values will compress well. That can be very hard to do if the client has a design bible they expect you to stick to and the color values are set in stone.

Sorry if I sounded harsh but most AE users are not very experienced and a great many of them have never studied anything about video standards, compression and color space. When posting questions that require us to carefully analyze the problem it is always helpful to post as many details as possible. Good luck with your project. You can probably improve the look a bit if you check the position of all your graphic elements and make sure they are precisely lined up on the pixel grid by viewing at 800% or more.

[Dave_LaRonde]

"Client needs a 300x250 banner animation at 10MB or less MP4 or MOV."

Ah, then take advantage of quicktime!

For the render from AE, I'd use JPEG 2000 or Photo JPEG codecs.  You'll get much better results, and you don't have to worry about off-the-wall pixel dimensions.

[Dave_LaRonde]

Of course, with delivery specs like that (10 megabytes?  Really?),  the client can't expect pristine-looking video.  I guess it all comes down to the frame rate and the duration of the animation.

[JKirshy]

Hi guys. Thanks for the help. Unfortunately Photo JPEG and JPEG 2000 codecs did not change the quality. Nor did aligning to the pixel grid. I even found a script that adjusts the position and size of objects to fix this issue and it had no effect. It seems like Rick has the correct answer. It's just not possible with the design to keep it sharp at that resolution. Even uncompressed still had the issue. Even Targ and JPEG sequences had the issue. After Effects simply cannot make it at this size.

[Roei Tzoref]

Id like to run some test with this if you don't mind. Can you upload a frame of you video at full size when it's Sharp? I intend to make a video out of it through various tools and see if we can get a 300*250 sharp playback at 100%.

[JKirshy]

Roei I can do you one better. Here is a link to the video at 600x500 that is perfectly sharp. If you can get it down to 300x250 and maintain sharpness somehow I would really appreciate it!

Link

[Roei Tzoref]

OK. I did some tests. it appears Dave was right, the lossless (virtually) Quicktime Jpeg2000 gives the best results. I rendered through Ae.

I have gone also to 80% (to reduce size)and it's still the same quality - size about 8MB. I think you can go further than that!

[JKirshy]

Roei I tried that too but even you can see that it still isn't sharp and it really should be. I don't know what AE is doing to the output but to me it's a failure of the software to properly output something that should be easy.

[Rick Gerard]

So I tried re-compressing using Handbreak and compared that with AME. There was no decernable difference. As I said in my second reply, the problem is the saturated bright colors against the white and MPEG compression. If you want to reduce the color artifacts on the edges where you have red against white or yellow against red you will have to redo the design and give the color compression something to work with. Color is compressed by grouping blocks of 4 and the values are averaged. When you spike the values at 256 and zero there is nothing to work with so the color edges soften. The solution is to change the color values at the edges slightly to give the compressor some more values to work with.

Video is not like print. Animated video and the web is not like print. You can't make perfect edges for every device, you have to compromise on the edge detail. If applying some kind of sharpening filter (which will look worse if you zoom in on the detail, doesn't give you the results you want then you have to either settle or change the design.

Personally I would not waste any more time worrying about this. If the client wants video and is going to distribute via the web they must accept the limitations of the technology. When you reduce the data, you loose definition and the only way to get around the problem is to hide the color artifacts in the design. Throw a little color noise in the image and you'll be hard pressed to tell the difference in a lossless 4:4:4 color version and an MPEG compress 4:2:0 copy without using some software to detect the changes. We'll all just have to wait for 10 bit MPEG video and 10 bit displays to reduce this problem to imperceptible levels.

[JKirshy]

Rick, what colour change would you recommend? You say slightly but what exactly would work? The issue with that, as you mentioned, is that from a corporate perspective they are locked to their own design specs so there wouldn't be much changed that they could approve.

Is the reason it's so much sharper at 600x500 that there are just more pixels to work with? And it just can't compress further?

[Roei Tzoref]

Roei I tried that too but even you can see that it still isn't sharp and it really should be.

I really can't see any difference, please show it to me.

this is at 600%. show me please where you see it.

and I digitally checked too with blend mode set to difference:

the original:

the new on top:

set the new to difference:

this is rendering to 60% quality and got a 6MB file as a result.

[JKirshy]

Roei I don't see a difference. You're right about that. Their issue is that it's not as sharp as they "think" it should be.

Thanks everyone for helping out on this!

[Roei Tzoref]

Their issue is that it's not as sharp as they "think" it should be.

I see. then this is something with the design and the limitation of digital imagery, that is - it's made of pixels. we have established this is not the compression or an output problem. you can control what you can in digital design following the pixel grid and what Rick has written before. but at least now you know, and have tested, a format that will stay true 100% to your design in your software and that's something

[Rick Gerard]

The only thing I can think of that would not significantly change the design would be to add a bit of noise or texture to the white background. That would hide the softening edges a bit when the image is compressed. Personally I think it's a lot of fuss for very little gain. Pixel peeping at 100% scale on an average color display is going to be different than Pixel peeping at 100% on a seriously professional graphics monitor. Also, if somebody is viewing a small image on an HR display (Mac Retina) for example, you should be sending that display an image that is 2X as large as the image for a standard display.

Line up the edges perfectly I with the pixel grid and drop the levels of the colors so there are no values maxed out and add a little bit of noise and you are going to be as good as it's going to get.

To check the compressed version against the uncompressed, supposedly fine version I would load a frame of each into AE and use the difference mode to look for fouled up edges. That's the only true test. I don't know anybody that has good enough eyes to tell the difference by looking at the images one at a time.

If the client is not happy then you either have to go up the chain to someone that can override the decision to redo or convince them to change the design slightly. If the man in charge comes from a print background it's going to be hard to convince him (or her) that video is different.

EDIT: Have you tried adding an adjustment layer with some sharpening applied. Unsharp mask or some other approach through color grading may help with the perception of sharp edges. Be warned though that HR displays and checking a scaled up view with sharpening added will probably look worse. Movement will definitely not look as good if you add some sharpening.

[Kevin-Monahan]

Hi JKirshy,

Care to mark any of our expert's responses as the correct one? Or do you still need help with your graphic? Let us know so we can close out this thread.

Thanks,
Kevin

[JKirshy]

It seems like most of the experts had correct responses. Unfortunately the nature of the issue was that none of the solutions offered fully satisfied the client.