How to Compress Videos for Apps

Published in

versett

6 min readOct 17, 2017

In this post I discuss video compression for iOS apps using Adobe After Effects and Adobe Media Encoder.

Video engagement on web and mobile devices has never been higher. Social media platforms such as Facebook, Instagram, and Twitter are filled with videos; Facebook even has an entire tab devoted to videos. Now non-social media apps are turning to video as well. Many companies including Airbnb, Sonos, Gatorade, and Kayla Itsines have seen tremendous success using video advertisements on Instagram while companies like Saks show in-app product videos for their best-selling items.

If you’ve downloaded Spotify, Tumblr, or Lyft, you’ve probably seen the video playing in the background of their login screens. These fun, engaging videos give the user a great feel for the app and the brand before entering the experience. While I’m familiar with compression settings for app store videos, before this week I’d never made and compressed a video for use in the background of an app.

Media compression

Compression can be an important although controversial topic in app development especially when it comes to hardcoded image and video content. Are designers or developers responsible for compression? How compressed should images and videos be? Should design files contain the source files or the compressed files?

While image compression is fairly easy and accessible with apps like TinyPNG and JPEGmini, video compression techniques vary based on target device and use and can get confusing quickly. Just looking at the possible compression settings for videos can be intimidating, especially if you don’t know what they mean.

Why compress files?

The average file size of an iOS app is 37.9MB, and there are a few incentives for using compression techniques to keep the size of your app down.

Large files make digital downloads and purchases inconvenient. Smaller file size equals faster download speed for your users.
There is a 100MB limit for downloading and updating iOS apps via cellular data. Uncompressed videos can easily be 100MB themselves!
When running low on storage, it’s easy for users to go into their settings and see which apps are taking up the most space.
Beyond keeping media file sizes down for the app store, uncompressed images and videos make Flinto and Principle prototype files huge and hard for clients to download.

Background videos for mobile apps are neither interactive nor the focus of the page, so it’s best to use a super small file with the right amount of quality (preferably no larger than 5–10MB). The video doesn’t even have to be that long, especially if it has a seamless loop.

While GIFs and video files can be used for this purpose, video files tend to be smaller in size than animated GIFs. Apple iOS devices can accept .m4v, .mp4, and .mov file formats.

For the sake of this post, I’ve mocked up what the Starbucks app could look like with a video for the login screen.

Here’s a small, 5 second preview of how the prototype turned out. My Flinto file turned out to be 6.4MB, only 1MB larger than the 5.4MB compressed video file!

Exporting from After Effects

Using a 1080x1920 composition (the same size that Apple TV, iPhone SE, and iPhone plus require for their app previews) I edited together a few different clips from Starbucks ads I found on Youtube, creating a 20 second video with no audio. I figured that if after compressing the video I still had a huge file size, I could cut down on the composition size or length.

Now the video has to be exported. H.264 (or MPEG-4 AVC) is a compression standard. Its compression quality makes it one of the most commonly used formats for video compression. H.264 can be played in most web browsers, mobile devices, TVs, and streaming devices.

While there are settings within H.264 when exporting, I noticed changing these settings not only had no impact on the end file size but also had lower video quality.

Compressing in Media Encoder

File Format

Under “File Format” I select “H.264”.

H.264 Profiles

H.264 has different profiles, relating to video quality and amount of compression. The profile choices in Adobe Media Encoder are Baseline, Main, and High. Since High offered the best quality and the choice between High and Baseline didn’t impact the end file size, I selected High.

Levels relates to composition size and maximum bitrate, and since it didn’t have a huge effect on file size I left mine at 4.1.

Bitrate Settings

Bitrate is the amount of data encoded in the video per second. In Adobe Media Encoder, there are 3 types of bitrate encoding.

VBR means variable bitrate. It lets you set a target bitrate and a maximum bitrate. With these settings, each shot will have its own unique bitrate based on what will provide the highest quality render for that scene.
VBR 2 pass compresses the video in two steps. During the first step, it analyses the video and determines how much data the video needs for each shot, while during the second pass it uses this knowledge to compress the video.
VBR 1 pass only compresses the video in one step, it is less effective in terms of compression but takes less time than the VBR 2 pass.
CBR states for constant bitrate. It gives each shot the same amount of data. Like VBR 1 pass, it is less effective in terms of compression but takes less time than the VBR 2 pass.

While the Apple Developer Guidelines recommend a bitrate of between 10 and 12 for app store previews, they have a maximum file size of 500 MB. That’s way too large for a hardcoded video! Since the iPhone6 and iPhone SE can only support .mp4 videos with a bitrate of 2.5, I set the target bitrate to 2.2 and the Maximum to 2.64 (lowering below these numbers resulted in a noticeable loss of quality). Changing the range from 10–12 to 2.2–2.64 cut the file size by 75%, and the difference in quality was negligible.

Results

By using Adobe Media encoder and altering the Profile and Bitrate settings, I was able to cut my video file down to 2% of its original, uncompressed size.