Chapter 11. preparing images multimedia for the web

Chapter 11. preparing images & multimedia for the web

"Granted, it does hold more data, but the phone book still looks more impressive."

don't miss ...

1. Understanding compression

2. Understanding memory

3. Preparing images for the web

4. Preparing audio for the web

5. Why background music can backfire

6. Preparing video for the web

The challenge of preparing images or any kind of media for the web can be summed up in two words: size and speed.

Everything that appears on your web site has to be transferred across the Internet before it appears on the user's screen. The bigger the images and files, the longer they take to send, and the less likely your viewers are to wait around.

So the goal is to get files all files: images, audio, video, animation as small as possible while retaining their artistic integrity. And whatever medium you're dealing with, the steps will be similar.

4 ways to make a file appear faster:

1. Edit or crop the file so it's smaller or shorter. With time-based media, like audio or video, you can make the clip shorter by editing out material you don't need. With images and video, you can make the picture smaller by reducing its dimensions.

2. Choose a file format. Before you can place any kind of media on the web, you have to convert it to a file format that works in the web browser. For images, you might make a JPEG or GIF. For music, it might be WindowsMedia, MP3, or several options.

3. Compress the file so it shrinks to a smaller size while maintaining reasonable quality. Each file format has its own compression technique. So when you save an image as a JPEG, the JPEG compression is applied. When you convert a music file to an MP3, the MP3 compression is applied. The compression technique, then, is what makes an MP3 an MP3 and a JPEG a JPEG.

4. Deliver the file over the Internet. With time-based media (audio, video), you have the option of streaming it over the Internet, so it's delivered in "real-time," rather than being downloaded all at once.

Step 1: Crop!

The easiest way to save space is by cropping images (and shortening audio or video). The larger photo has a nice symmetry, but you get the same content in the tighter image (left), and it's half the K-size.