Participating Frequently

Answered

Resolution Loss on Export

Forum|Forum|8 years ago
April 21, 2017
4 replies
12380 views

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!

This topic has been closed for replies.

Correct answer Rick Gerard

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.

Kevin-Monahan

Community Manager

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

Kevin Monahan - Sr. Community and Engagement Strategist – Adobe Pro Video and Audio

J

JKirshyAuthor

Participating Frequently

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.

Dave_LaRonde

Inspiring

"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

Inspiring

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.

J

JKirshyAuthor

Participating Frequently

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.

R

Rick Gerard

Correct answer

Community Expert

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.

J

JKirshyAuthor

Participating Frequently

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!

R

Rick Gerard

Community Expert

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.

Roei Tzoref

Legend

try this:

export to your desired format. use Adobe Media Encore high quality match source preset
import back to Ae
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.

J

JKirshyAuthor

Participating Frequently

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.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded