Making Difficult Animations Work for Banners

When Flash was king, we were stuck with a lousy 40K file size limit for a standard ad unit. Now with the death of Flash and the rise of HTML5, we are given a slightly new opportunity to do more creative things with banner ads. With the recent draft specifications released from the Interactive Advertising Bureau (IAB), we are given a little more flexibility with file size; however, we still need to be mindful that the extra file size can quickly get used up.

Two of the more difficult animations to achieve are panning and zooming. With the use of panning or zooming, there needs to be that perfect balance between file size and the animations used to pull off these effects. Let’s take a look at some ways to keep file size down and allow the animations to look smooth.

Panning

Pans can be very difficult to achieve in a 40K banner because the larger image needed to pan around would be very large in file size. For this to work, the larger image must be compressed to fit within the requirements. Knowing these tips and examples will help you keep file size down while creating high-quality work. As a “rule of thumb,” the image needed to pan should not be twice the size of the banner being created.

Let’s take a look at an image that we want to pan across the screen. With this image being three times the width of the banner, file size is already high, even after it has been compressed.

Keeping to the “rule of thumb” by saving the image to no more than twice the size of the banner, we almost cut the file size in half. This will allow us to add the additional content needed, without sacrificing image quality.

Pan Animations

When panning an image, please keep in mind the timing needed to pan from point A to point B, since we are only allowed to use 24 fps (frames per second) for animations. If the pan only moves a short distance over 15 seconds, there is a very good chance the animation will be choppy. For instance, if an image pans only 50 pixels over a 15-second animation, the image is only moving about 3.3 pixels per second.

The examples below demonstrate the same image panning 100 pixels over different rates.

15 SECONDS – ANIMATION APPEARS TO BE SLOW AND CHOPPY

3 SECONDS – ANIMATION APPEARS TO BE FAST AND SMOOTH

Zooming

Zooms are very difficult to achieve in a 40K banner because the larger image needed to zoom or pan around would be very large in file size. For this to work, the larger image must be compressed to fit within the requirements. Knowing these tips and examples will help you keep file size down while creating high-quality work. As a “rule of thumb,” the image should only be 125% larger than the size of the banner being created.

Let’s take a look at an image that we want to zoom out from. With this image being four times the width and height of the banner, file size is already high, even after it has been compressed.

Keeping to the “rule of thumb” by saving the image only 125% larger than the size of the banner, we cut the file size in half. Even though the file size has been exceeded, we are still able to compress this image a little more and maintain good image quality. This will allow us to add the additional content needed.

Zoom Animations

When zooming an image in or out, you will also need to keep in mind the timing needed to zoom from point A to point B, since we are only allowed to use 24 fps for animations. If the zoom only moves a short distance over 15 seconds, there is a very good chance that the animation will be choppy. Same as panning, if an image zooms only 50% over a 15-second animation, the image can only move so many pixels per second.

The examples below demonstrate the same image zooming out 100% over different rates.

15 SECONDS – ANIMATION APPEARS TO BE SLOW AND CHOPPY

3 SECONDS – ANIMATION APPEARS TO BE FAST AND SMOOTH