File Size vs. File Quality

The game all web designers play is “How low can I go?”. The strategy in delivering content to the Web, be it photos, audio, or video, is reducing the file size for download speed, while minimizing loss of quality. The catch 22 is this: your work can be superb, but if it takes too long to download your audience will not wait to see it. Conversely, your material can download fast to the user’s computer or device, but if the quality is poor, the message is still lost and the user has wasted their time.

Question: Which is worse, big download times but quality work, or fast download times but overcompressed work?

Answer: Both.

There is a constant trade-off in Web design between file compression and its effect on file quality. A balanced and educated decision is needed of designers and producers to find the right balance.

Audio in Flash

Considering Flash as producing files for Web delivery, designers need to be very conscientious of file size and its effect on sound quality.

File Format

Generally, audio files are recorded and distributed in .aiff format when on CD. While this format allows for good sound quality, it is too big of a file to use on the Web. (An average store bought CD track can be as big as 50Mb.)

Flash is most compatible with many types of audio files, but some formats allow for better compressed files, allowing for realistic download time.

Of them the mp3 format is preferred.

(Much) more on the mp3 format: http://www.iis.fraunhofer.de/amm/techinf/layer3/

Audio file compression

There are many ways to compress sound files into the mp3 format, of the simplest is iTunes.

When compressing an audio file there are three basic points to know:

Bitrate: Measured in kilobytes per second (kbps) the bitrate determines the dynamic range, the amount of detail preserved in the high and low (loud and quiet) parts of the audio.

*Flash only works with sampling rates of 11.025 kHz, 22.05 kHz, and 44.1 kHz

Sample Rate: This measurement dictates the accuracy of the sound as it gets compressed. the higher the number, measured in Hz, the more accurate (and thus, larger files) the sound. Standard for mp3 files is 128kHz, but basic audio such as voice files can go lower. (again: “How low can you go?”)

Channels:This refers to Mono and Stereo sound. (Note: Mono does not mean the sound only comes out of one speaker, but the same sound plays in both.

In-Class

Use iTunes to Import a song from a CD.

Importing audio to Flash

› Import sounds into Flash by choosing Import to Library from the File menu. The following audio file formats can be imported into Flash: WAV, AIFF, MP3

When you import an mp3 audio file to Flash do not place the file directly on the timeline. Use the inspector palette to access the audio from the Library. Be sure to the streaming option in the Inspector palette.

Images in Flash

There are two types of graphic formats flash uses best, .jpeg and .png

Jpeg compression

› Open Bridge and view Images
› Open sample file and resize to a medium stage. (Note: Image Resolution can be kept at higher the 72 ppi, as it has no bearing in file’s data size.)
› use photoshop screen sketches or ‘Rula’ to determine pixel size.
› consider browser bars and scrolls
› In Photoshop Select ‘Resample Image’ from Image Size dialog box, use ‘Bicubic Sharper’ when downsizing.

› Convert Color Profile to sRGB1998
› Image>Mode>Convert to Profile>sRGB1998
› sRGB is a smaller color space (RGB vs sRGB), but more vibrant

› Save File as an intermediate stage. Make a separate folder to store these images. They will not be the final files you import into flash and load on the web, but they are already significantly smaller then the original image.

› In Photoshop, View>Proof Setup>Windows RGB

› Color Correct and Sharpen for the Web.
› Photoshop and Flash Compression will result in loss of color saturation. To compensate, an oversaturation up to + 15 in Photoshop is recommended. (Apple + U)

› Adjustment Layer- Curves/Levels: Over contrast with S Curve slightly to compensate for web compression.

› Save For Web: Go to File > Save for Web, for web options, and save to a New Folder (i.e. “Ready”) that is ready to import into flash.

If the results are unacceptable, revert to the medium sized image reapply the curves etc. This workflow of saving a ‘Medium’ and a ‘Ready’ Folder will save tons of time as you backtrack through your design process to re-edit and retouch your photos until they are as clean, small, and dramatic as possible. (Remember: Photo quality is paramount- it is the reason you have a site in the first place…

Png compression

The png 24 file format allows for high quality image files with transparency. The png file format is not yet compatible in all Web browsers, but when imported into Flash, these files maintain transparency with an alpha channel, allowing for soft and feathered edges on artwork that fades to a transparent background.

Using a similar work established for jpg compression, create a .psd file with a transparent area. (A file with the checkerboard background in the Photoshop document.)

› Save For Web: Once your file is prepared and saved as a layered .psd, Save for Web and select the PNG-24 format.

When this file is then imported into Flash, the transparent ‘checkerboard’ area will be respected.

Bitmap Compression in Flash

Flash also has it’s own internal compression schemes and methods for handling several formats of image files. Most of Flash’s compression happens when the movie file is published. At that time, an additional round of compression is applied.