Media and the Web—Summary

In this topic of Web Media we have examined how media is reformulated for incorporation into websites. The main issues are summarized here.

Reformulating Media for the Web

Objectives

The overarching objective of reformulating media for the Web is to provide a visitor the website with a pleasant experience. This can be summarized this way.

image files should have reasonable quality, but download quickly so that the viewer does not face annoying waits as the image downloads a section at a time.
video files should have pleasant viewing quality, but also download in a manner that the viewing can be done simultaneously with downloading without frustrating pauses.
audio files should have pleasant listening quality, but also download in a manner that the listening can be done simultaneously with downloading without frustrating pauses.

The result is, of course a trade-off between high quality and download speed. The choice will often depend on the target audience, as noted later.

A laudable second objective is:

make the delivery of media "green;" that is, make the downloads as small as possible while maintaining adequate quality so that less energy is expended when downloading the files.

Informing the Objectives

To meet these objectives two determinations must be made:

the target audience
a target download speed

These two objectives are connected. For example, if the target audience is connoisseurs of high quality video, one can assume that this audience will have access to a higher speed Internet connection so that they can enjoy higher quality video delivery. If, on the other hand, the intended audience is extended family members for sharing snapshots and amateur videos of the family, one should assume a more modest internet connection speed.

Once the target audience and target download speed are determined, media should be reformulated to meet those objectives.

Meeting the Objectives

Meeting the objectives can be done as follows.

acquire media and save it in a master folders for images, video, and audio
transform the master media files into files that meet the objectives
transcode the files to files that can be played with Web browsers and HTML 5.

Image Files

Transforming image files for the Web can be done with software ranging from free (such as Google Picasa) to expensive (such as Adobe Lightroom, Apple Aperture, and Adobe Photoshop). The steps to take are:

Edit a copy of the master image (e.g., crop it, tweak the exposure, etc.)
Resize the image to pixel dimensions that fit well on the screen. That is, the width and height of the image should be set appropriately, such as 600 pixels wide to 400 pixels high. This step will reduce the file size of the image substantially if the image master was taken with any modern camera at its highest resolution.
Export or save the image with a codec that works with all Web browsers. The jpeg format is one such.
Save the result in the master folder.
Copy this Web-ready image from the master folder into the proper folder on the local version of the website (e.g., in media/images).
Place a reference to the file with the proper HTML 5 tags into a Web page so that it can be displayed.

Audio Files

Transforming audio files can also be done with software ranging from free (e.g., Audacity) to expensive (Adobe Audition). Audacity does the job well.

Edit a copy of the master audio recording (e.g., cut sections out, rearrange sections, etc).
Change the sample rate (in Hertz) of the file so that fewer samples per second are to be kept in the resulting file (e.g., if the original master audio recording has a sample rate of 44,100 samples per second, that rate can be halved to 22,050 samples per second which means that the master uncompressed music file would have half as many numbers to store - one for each sample point - as the original).
Select a bits-per-second compression target (for example, if a 8000 bits per second is chosen, this means that each sequential 8000 bits arriving at the browser as the audio file is downloaded holds one second of music; each such 8000 bits that arrive must be decompressed into 22050 samples per second for playback). Thus, even though the recording has a certain number of samples per second from point 2, step 3 requires that those samples be compressed into 8000 bits.
Export the file to a target codec format, such as mp3 or .ogg that can be played on the Web, storing the result in the master file.
Copy the transformed file to the proper folder on the local version of the website (e.g., in media/audio).
Place a reference to the file with the proper HTML 5 tags into a Web page so that it can be played.

Video Files

Free software for doing video editing is available, but not usually as well-featured as the free software for Image and Audio files. However, for most amateur purposes not much editing needs to be done, except for cutting sections from a movie.

Edit a copy of the master video recording (e.g., trim the movie, put my different clips together, adjust the exposure, etc.)
Change the viewing frame size to fit nicely into a web page (e.g., 640 by 360 pixels).
Select a bits-per-second compression target (for example, 700 Kbps). Thus, even though the uncompressed movie may be require more bits per second to play, the codec will compress the movie so that one second of the move (e.g., 30 frames) can be transferred across the Internet at 700 Kbps; at the receiving end it must be uncompressed for playback).
Export the file to mp3 and ogg formats, because all browsers can play one or the other of these formats.
Copy the two transformed files to the proper folder on the local version of the website (e.g., in media/movies).
Place a references to the two transformed files with the HTML 5 <video> tags into a Web page so that it can be played.

Codecs

The role of codecs in delivering media across the Internet is crucial.

What a Codec Is

A codec is a program that has two parts:

a compressor that is designed to encode a file into a more compact form (so that the compressed form contains fewer bytes than the uncompressed form)
a decompressor that is designed to decode a file encoded by the compression part back into a file in the same form as the original

Why Codecs?

Purpose

The only purpose of a codec is:

to compress a file so that it smaller in terms of bytes.

Reasons for Using

The reasons for using a codec are:

to conserve space when saving a file on some medium, such as a hard disk, thumb drive, or other storage device
to make it more efficient to transfer the file (in its compressed form) across the Internet.

How Codecs Work

Codecs fall into one of two categories:

lossless: the compressor part of the program:
- takes the original uncompressed file as input
- encodes that file into a new file in such a way that the decompressor part can recover the original file exactly as it was from the compressed file.
lossy: the compressor part of the program:
- takes the original uncompressed file as input
- encodes it into a new file in such a way that the decompressor part cannot recover the original file exactly as it was, but can recover a file that is similar to the original file (it has the same number of bytes) but with lower quality.

Codecs program writers use all sorts of tricks to compress a file. For example, in a text file, if there are 20 blank characters in a row each taking up one byte the codec could create a new file that compresses the 20 blank characters into something like 20*b which might take up only 2 or 3 bytes. If this text file is to be displayed again, it must first be decompressed by the codec, which would among other things replace the 20*b sequence with 20 blanks, thus recreating the original file.

Why Are There So Many Codecs for the Same Task?

Certain programmers may believe that they can create a lossy codec that does a better job than any other codec in the sense that a way has been found to compress, say, video files in a way that makes them smaller in size but with quality as high as a competing codec. Sometimes these codecs are patented. Others are left in the public domain.