Encoding Video for the Web with QuickTime Pro

PUBLISHED by Justin Cone


One of the things we get asked about all the time is how to properly compress video for the web. Dozens of books and technical papers have been written on the subject of video compression. What people want, though, is a simple, clear approach that works well for a broad range of projects, including video that contains graphics and typography.

We invited Darwin Dion Ignacio to share his knowledge and experience on the subject. Darwin is the founder of Let’s Get Reel, a digital asset management company whose clients include Imaginary Forces, The Ebeling Group, yU+Co. and many others. With over 20 years combined experience, the staff of Let’s Get Real specializes in organizing, optimizing and distributing for creative service companies.

Read the full article…

Photo by Nate Steiner

Discover more from Motionographer®

Subscribe to get the latest posts sent to your email.

About the author

Justin Cone

/ justincone.com
Together with Carlos El Asmar, Justin co-founded Motionographer, F5 and The Motion Awards. He currently lives in Austin, Texas with is wife, son and fluffball of a dog. Before taking on Motionographer full-time, Justin worked in various capacities at Psyop, NBC-Universal, Apple, Adobe and SCAD.
More by Justin >

Encoding Video for the Web with QuickTime Pro

PUBLISHED by Justin Cone

One of the things we get asked about all the time is how to properly compress video for the web. Dozens of books and technical papers have been written on the subject of video compression. What people want is a simple, clear approach that works well for a broad range of projects, including video that contains graphics and typography. We invited Darwin Dion Ignacio to share his knowledge and experience on the subject. Darwin is the founder of Let’s Get Reel, a digital asset management company whose clients include Imaginary Forces, The Ebeling Group, yU+Co. and many others. With over 20 years combined experience, the staff of Let’s Get Real specializes in organizing, optimizing and distributing for creative service companies. Take it away, Darwin…

Getting Started

Many of you have probably used third-party software like Compressor, Cleaner or Sorenson Squeeze to compress your videos. The following steps are basic compression settings for QuickTime Pro, should you not have any of the above applications. In the next couple months, I’ll post another guide for using Compressor that will delve deeper into encoding—stuff that you probably didn’t even realize Compressor was capable of doing.

1. Always use the highest resolution source files possible

First things first, when encoding your video for the web, preparation is the key. The final output of your video will depend heavily on your source video. So it is in your best interest to encode from the original source content, i.e. high resolution renders from Final Cut, After Effects or AVID.

2. H.264 Basic Settings

All the codecs (Compression Type) out there right now may be tempting to try out, but H.264 still comes out on top. Stick with it, as it will give you the best quality for the file size. Leave the Frame Rate to Current to make the video flow just as you desired your original audience to view it. Because we’re using the H.264 codec, I recommend sticking with Automatic for Key Frames. And always keep Frame Reordering enabled for web viewing. For the Data Rate, you want to keep the Restrict to around 1300 Kbits/sec and have the video Optimized for Download (this gives you the best quality). The higher the bitrate, the better the quality—but you get stuck with a bigger file. If you have the time, play around with this setting and see the difference in quality and final size. You can go up to 2000 Kbit/sec, but no more for SD 640 x 480. You’ll also notice now that the Quality under Compressor is locked to High because you have the video Restricted to xxxx Kbits/sec, which is perfectly fine. Lastly, the Encoding is kept to Best quality (Multi-pass). It takes longer than the Single pass (obviously), but you’ll get a cleaner product.

3. Use 640×480 minimum for your export dimensions.

Keep the Dimensions at 640 x 480 VGA or higher. There is no reason you should be displaying your work at any lower resolution. Make sure you have enabled Preserve aspect ratio using: Fit within dimensions. This option will fit the video to the longest side, scaling if necessary. Should you choose a larger size (e.g. 720 x 480 NTSC SD or 1280 x 720HD), please make sure your source video is at least within the same dimensions; it would look ridiculous if you tried to stretch your video bigger than the source. Also check Deinterlace Source Video, if available.

4. Always enable Fast Start.

Make sure Prepare for Internet Streaming: Fast Start – Compressed Header is checked before clicking OK under Movie Settings. Not checking this option will cause your viewing audience to wait until the full spot has downloaded before it starts playing. This one checkbox could make the difference between your work being seen or being closed before it even plays.

5. For audio, use AAC at 128 kbps.

For the Sound Settings, keep it simple and use this screenshot as your guide. This is pretty routine, so no explanation is needed here.

6. Name with care.

Lastly, file naming is highly important when it comes to uploading your file. Here’s a rule of thumb: Always name your file starting with the artist’s name, title of piece and the compression type. Never leave spaces between words. I highly recommend separating words with hyphens and underscores, never periods, which could cause problems in URLs. Most importantly, make sure your final output has a file extension (e.g. .mov, .mp4, etc). This will enable the browser to know which plug-in to use for playback.

Contact me

Should you have any questions please feel free to contact me at darwin@letsgereel.com.

Discover more from Motionographer®

Subscribe to get the latest posts sent to your email.

About the author

Justin Cone

/ justincone.com
Together with Carlos El Asmar, Justin co-founded Motionographer, F5 and The Motion Awards. He currently lives in Austin, Texas with is wife, son and fluffball of a dog. Before taking on Motionographer full-time, Justin worked in various capacities at Psyop, NBC-Universal, Apple, Adobe and SCAD.
More by Justin >

17 Comments

benfrank

what about the loss of color fidelity from compressing using h264? how do you compensate for this without doing a custom color correct everytime? i’ve had pretty great results using photojpg and am curious if there is a way to get the colour to be accurate using h264.

preposterous

+ I get colour space limited to RGB 16 – 235 when I encode H.264 through quicktime pro. How can I keep it at 0 – 255 ?

theotherdarwin

hi Ben, this has been a lingering problem in the past, as we’ve still been waiting for an QT update to fix it. Some will notice that when you view your video via web through Firefox all the colors will be the way you want it to be, but that doesn’t help because how can you be assured that your audience will be using Firefox. The one that I’ve found to work the best is the following:

> Under the Movie Settings click on Filter
> Drop Down on Adjustments to ColorSync
> Under Source Profile: Choose your current monitor
> Set the Destination Profile to Apple RGB
> Keep Matching Option to whatever it is.
You will see that all the colors are bolder and darker, closer to the original source video. Feel free to contact me should you have any more questions.

jipe

theotherdarwin,

Thanks for the article; I pretty much use the exact same settings but never really knew what anyone else used. However, I can’t find the settings that you mention in your above comment when I try to export from QT Pro on a PC. Do you know if the ColorSync option is Mac only?

Deom

I seem to have the same issue as you jipe. But found the following tip that seems to work:

“Elan Soltes
This tip from Mitch Gates does the trick quite nicely:

As you may have noticed, the current implementation of the H.264 compressor for Quicktime has the nasty side-effect of raising the gamma or black levels of the resulting movie file. In order to fix this you must have Quicktime Pro (otherwise the fix will not hold since you can’t save the updated .mov). Here are the steps?

Open the QT
Go to “Window/Show Movie Properties”
Select “Video Track”, then click the “Visual Settings” tab
At the bottom left, change the transparency to “Blend” then move the slider to 100
Change the transparency to “Straight Alpha”
Close the Movie Properties window, then play or scrub the QT. Your black levels should now look correct
Save over old .mov.”

Read the full thread .

dek

People with PCs should think of using better solutions. (Almost anything is better than the PC version of Quicktime)

Personally I found StaxRip a perfect tool for my needs: it’s completely based on GNU/GPL software, it’s easy (not simple, since it’s based on the AviSynth scripting language, but easy if you know what you’re doing) to use but also extremely flexible. Also X.264 achieve better compression that Apple’s H264 codec and it’s way faster.
(I’ve already converted two MacIntel users with dual boot to StaxRip :D )

Obviously, being a blogger, I have different needs than people who export their work from After Effects or who edit DV footage…

As for the points in the article, I’ll add what I get to know in two years of encoding:

2. The bitrate is a function of the resolution so it would be more appropriate talking about bitrate ratios. A good resolution-independent value is 0.1/0.2 bits per pixel per frame. That is: (x * width * height * fps) bits per second, with x between 0.1 and 0.2 (higher values for videos with higher frequency “features”, such as little particles, film grain, hand drawn textures, and so on… Using filters to reduce such features before encoding is always a good idea.)

3. H.264 is an MPEG codec, so resolution should be multiple of 16. And never ever use an odd (not divisible by 2) number, because MPEG codecs use the YV12 colorspace.

4. Compressed header makes your clip non compliant to the IsoMedia standard. You may not care about that, but I do. I want my clips to be visible on any platform.

> Not checking this option will cause your viewing audience to wait until the full spot has downloaded before it starts playing.

Not true (or maybe only true for QT Pro?)
Compressing header is one thing. Interleaving is another. You can interleave (thus allowing your clip to start as soon as the first frame is loaded) but still leave the header uncompressed: it will take a unperceivable fraction of second more to get to the first video frame, but that’s all.

ocelot

xvid4psp (stupid name) is basically the best tool i’ve found for free pc encoding..
https://www.winnydows.com/page.php?2

does basically all you could ever ask for, has nice presets, but allows you to make your own, etc, and doesnt force you to dive into commandline like most of the other apps that do similiar stuff.

diver3000

Here some more Info about the “washed out” effect on PC Platform:
https://www.monostep.org/quicktime/

Apple/Quicktime told me that is has something with my encoder settings. Than it has something to do with my graphic card. Than it has something to do with “Direct Draw”.

No. Its just a “f***ing” bug by apple. Its so old and they will never fix it.

theotherdarwin

Thanks to all who have responded for the PC gamma shift problem, it’s greatly appreciated. It keeps this community going, when people give a little bit of their insight and knowledge to something like this. Don’t forget to VOTE !

jipe

Deom,

Thanks for the tip about the alpha trick. I’d read about it before, but apparently it can cause playback issues such as stuttering when you view the file in full screen. I have not confirmed this myself yet.

I think I may have to get my hands dirty with dex’s suggestion, because Apple’s lack of initiative here is more than disappointing. I won’t bother upgrading to the next version of QT Pro unless they figure out how to fix it. And lest I sound like an echo of theotherdarwin, thanks to everyone who contributed here.

diver3000

Yes. If you change the “quicktime player” setting teh film will stuttering in full screen. Even on a very new and fast PC. And. I think you cannot safe in into the quicktime file. So if you upload a .mov online. Every PC user will see a “washed out” version. …and. This problem is 2 years old. I check every new quicktime version. They knew this problem. But they won’t fix it. It sucks… couse other player like “vlc player” play the file correctly. Even with “direct draw”, etc. So its clearly a “Quicktime Player” Problem. Just the player. If the player sucks… you can nothing do.

The reason why this really pissing me of is that i got Clients that wants quicktime files and than told me the final version looks washed out. And I say: well… it’s Apple’s Quicktime Player…. and they simple don’t belive me like: “Apple? No way!”

I wish the PC Apple Community would force/push (ion from of mails, forums, etc) it more. But maybe most of them don’t pay for the “Pro” Version. And second: It’s very very difficult to communicate with apple. There is no “contact person” in my land/language (germany). If you find an email adress you first have to register yourself. And than they give you some apple mailinglist where noone will anwer your questions. I told the question every week. Once in a week. First they ignore me (becouse i could tell them that they are wrong by saing me that it is my graphic card or any other shit) Second: they kicked me out of the mailing list.

;)

benfrank

for whatever reasons, no method of h264 color fixing works for me. it always is washed out, making the colours look horrible.

uglydrunkling

Seems like you’re talking about the problem of viewing a Quicktime H264 on a PC.

However I have noticed considerable desaturation on the same mac I compressed from. It seems that if I crank the export all the way to Best instead of High (which can triple the file size) the problem improves a great deal at least on my own machine. But this kind of solution is really only good for delivering to clients.

entelechy

I’ve been trying to figure this out as well, esp. as I’m doing more client work for the web. I’ve been using PhotoJPEG when I can.

Here’s a good article as well: https://www.kenstone.net/fcp_homepage/preprocessing_hodgetts.html

For H.264, the frame controls tab in Compressor seem to help with image quality. Adding some slight tweaks to gamma, etc. in the filters helps a bit, but as others stated, it’s a bit of a crapshoot. We spend so much time getting everything looking just the way we want, and online there’s so many factors that can change how it’s viewed.

And yes, I wish Apple would fix this already!

gfioravanti

You should check out the DV Kitchen encoding software. It uses the x264 codec and the quality is amazing! The x264 codec has beat out most other H.264 codecs, including Apple’s, in several codec shootouts.

Here’s a link to some sample footage encoded with DV Kitchen and x264: https://www.dvcreators.net/dv-kitchen/features/encoding/

And DV Kitchen also does batch encoding, FTP uploading and then will even generate HTML code for publishing to the web.

https://www.dvcreators.net/dv-kitchen/features/publish/

I’ve been using this for a while and have not needed to use anything else since.

bicycleman

thanks thanks thanks. :)

Berklee2006

Great stuff, you mentioned at the beginning of this article, “I’ll post another guide for using Compressor that will delve deeper into encoding—stuff that you probably didn’t even realize Compressor was capable of doing”. I would really like to hear your blog on this subject! Thanks in advance-

Comments are closed.