M3: Assignment 2 - Section D; Reduce Animations File Size

Resolution & File Size

When you create an animation, you need to consider how large the animations canvas size is. The larger the canvas size is a factor that will determine how large the file size is, and this will in turn determine how long it takes to load.

When you produce an animation the default canvas size (resolution, which is measured in pixels) 550x400 in Adobe Flash. This would be an appropriate size for an advert on a website, but any larger would be redundant, and not be shown unless the user viewed the animation outside the website. You would usually know where you would like your animation to be (on the web), so it is simple to figure out what to set the canvas size. this can normally be achieved by inspecting the “element” of the website you would like it to be.

Also the DPI (dots per inch) of the animation itself is key, this will vastly alter the file size, especially if you have a larger animation and more frames. The recommended DPI is 72; anything over the resolution would not be seen on the web, as a note 300 is the recommended DPI for printing.

Another factor that will determine the file size is the FPS (frames per second), the human eye only needs 12 FPS to notice Animation. But this will not be smooth enogh, it is recommended to keep it at least at 25 FPS (if not 30 FPS).

But you might want to set your animations FPS to 60 which will make it smoother. I would not recommend doing this, since this will increase the file size (or could make your animation too quick, depending on how you do it) and it will not be entirely noticeable.

Although FPS is a factor, if certain compression techniques are used this factor can severely be reduced. A tween in an SWF will be similar to how vector images are used to reduce the file size, and use calculations to draw the images (changes for tweens) instead of individual pixels.

Sound 

It’s not just images that can be stored in different formats, and implement different ways to reduce their file size. The MP3 audio format is the most used lossy audio codec, although it does have a few issues with it such as patent issues. WMA (Windows Media Audio) is Microsoft lossy codec, it was made to avoid issues with licensing which exists in the MP3 format. But AAC (Advanced Audio Coding) superseded it, it is the standard format used in MPEG4 encoded videos, it’s also widely used since it has excellent licensing (DRM and none is needed to stream it).

Sound files will also vary in size depending on what format they use, MP£ is commonly used for its excellent compression, but it also depends on how many channels there are. A usual audio file will contain two channels, left and right (stereo), but can have only one (mono), or 5+ (surround sound).

File Format & Sound 

To examine how the file format contributes to the size of the file, and only this variable, I will export the animation I did for P7 in different formats (and convert them for more results than the default option in Adobe Flash).

Format	Size (With Sound)	Size (Without Sound)
SWF	638 KBs	517 KBs
AVI	3+ GBs
GIF		8,835 KBs
MP4	6,591 KBs

As we can see AVI creates a very large file, being hundreds of times larger than the other formats, whist the SWF is the smallest (being under 10 times the size of a MP4, and over 13 under a GIF).
It is interesting to notice that the GIF is bigger than the MP4 though, since a GIF cannot hold sound, so you would assume it would be smaller, but this is not the case. This is very likely to the GIF holding each frame as an image, and having little to no compression in-between frames (inter-frame compression).

Compression

Images can be quantised, which can lead to the lossless (BMP or PNG files usually are) or lossy parts of the file.

Lossless compression is when the file is compressed then when it is uncompressed, it is exactly the same, a simple lossless compression technique is AZ compression. AZ normally ia used in text, it uses pointers to refer back to repeated keywords, and these pointers are stored in two 8 bit numbers (but can be partitioned). There is one referring back to where the start of the repeated word starts, then one where it ends. This can save a considerate amount of space, for example you could repeat a 8 character word (8 bytes), but only use 2 bytes to repeat it (compressed by 400%).

Lossy compression is usually the form of compression used in images (which can be used in animation). This means when the image is uncompressed after the compression it is not exactly the same, but to the human eye it is barely noticeable, and it allows for far more compression.

Lossy compression is used in the YCbCr colour mode, this is achieved by down sampling, usually it is downsampled by a factor of two (meaning 400% compression, being that you’d have 1 luminance pixel instead of 4 (2x2)). You can do this by a much higher factor, such as 10, and it still won’t be noticeable to the human eye, this works due to the human eye noticing grayscale more than luminance.

There are also tools you can use to compress files, two popular software packages that “zip” up a file (but there are other formats such as rar) are Winzip and Winrar.

Colour Depth

A pixel in an image is stored in binary components following a colour mode (as mentioned above). But these components for each of the colours can vary in size, usually they are stored in 8 bits (meaning 256 shades of a colour, and over 16 million combinations with a 3 channel pixel).
If you create an animation with very simple colours (such as black and pure red, without any gradients), you could lower the colour depth, this will decrease the file size by changing #FF0000 (red in hexadecimal, with 8 bits red reserve for each channel) to #F00 (4 bits red reserve for each channel), halving the amount of space used by colours.

If you did have any gradients in your animation or a smooth transition of opacity when you have used the brush, you would not try and lower the colour depth to save size. This is due to a gradient needing more shades in-between the colours to ensure the transition is smooth, if you do lower the colour depth it will lower the quality of the animation/image.