Resources

Multimedia file are not a part of HTML. Having said that, I know that many, if not most, people who create web pages do so because they want to post various types of media. Therefore, I thought it would be helpful to briefly discuss some of the nuts and bolts of integrating image, photo, audio, and video into your website. If you don’t plan to use multimedia or simply don’t care, feel free to skip over this section entirely.

Images, photos, audio clips, and videos used on the web are not different in kind the other multimedia files that you have on your computer. They are often different in quality however because compression (making the file smaller with some loss of quality) is necessary in order to keep your website downloading rather quickly.

Images & Photos

There are three main file types that used to render images on the internet: .jpg, .png, and .gif. Thankfully, these are also the three main image file types that you will find on your computer. Of course, there are other file types too but I suggest you stick with the these three for now since they are in widespread use.

1. JPEG, or JPG, is the current standard for digital photography. If you have ever used a digital camera or viewed photos on the internet, chances are you have used a JPEG (.jpg) file. JPG’s greatest strength is its widespread
   use and the ease / degree to which you can compress the image in order to make it suitable to post on the web.
2. GIF, or Graphics Interchange Format, files are usually used for logos, drawings, images of text, etc. GIFs (.gif) are still in wide use but are being replaced by PNG.
3. PNG, or Portable Network Graphics, is a newer file type that offers lossless compression. This means you can shrink the file size without any permanent degrading of the image quality. In addition, PNG (.png) is superior to GIF in that it allows better compression and enables transparency.

Regardless of which file type you use to display your image, you need to be aware of two aspects of your image before uploading to your website. The first is file size. Generally, the smallest file size (i.e. the highest compression) that still allows a visually appealing image is the one you should use. Following this simple rule will enable your web page to load more quickly and will therefore ensure that more people actually view the images that you so carefully prepared. The second major factor you need to consider is photo size or the dimensions of the photo. When developing photos in the real world, you need to decided on the dimensions … 4″x6″, 5″x7″, etc. Digital photos also have dimensions. For example, the default setting on my digital camera takes photos at 3072 by 2304 pixels. This is great for developing photos and enlarging specific sections of the photo but is much too big for a website (unless you want to user to be able to download it and print it as a high quality photo). Generally, the maximum width of an image that I would use on the web is about 640 pixels across. By limiting the number of pixels, we also shrink the file size and so speed up the downloading time. Here are some examples for you to see what I’m talking about.

JPEG Photo 1, 640 x 480 pixels, 75% (medium compression), 69 KB
<img src=”/uploads/resources/primer3_1.jpg” />

JPEG Photo 2, 480 x 360 pixels, 75% (medium compression), 44 KB
<img src=”/uploads/resources/primer3_2.jpg” />

JPEG Photo 3, 320 x 240 pixels, 100% (minimal compression), 74 KB
<img src=”/uploads/resources/primer3_3.jpg” />

JPEG Photo 4, 320 x 240 pixels, 75% (medium compression), 20 KB
<img src=”/uploads/resources/primer3_4.jpg” />

JPEG Photo 5, 320 x 240 pixels, 30% (high compression), 11 KB
<img src=”/uploads/resources/primer3_5.jpg” />

As you can see, JPEG Photo 1 is huge. The main reason you might want to use a photo this size is in the context of a web photo album. Also, at 69KB, the file size is about the maximum that I like to use for photos that will be viewed on a monitor (as opposed to those which will be printed). JPEG Photo 2 is more reasonable in size in that you can post it on a page and still have a good amount of text on the right or the left. JPEG Photo 3 is a high quality image, with small dimensions but a large file size. Because JPEG Photo 4 is about 25% of the file size of JPEG Photo 3 while still maintaining good visual quality, I would use JPEG Photo 4 on my web page. JPEG Photo 5’s file size is smaller still but I would not choose it because of the poor visual quality due to high compression. This is to say, selecting the dimensions and compression for your photos / images is not an exact science. Your goal is to get the best quality image, with the dimensions you desire, at the lowest possible file size. I’ve found that saving JPEGs at 75% often gives a good ratio of visual quality with small file size … but you’ll still need to experiment a bit.

To the right of each photo I’ve also included the html code for that photo. Here the tag is simply <img />. Note the backslash /, which we also saw in <br />. As in the previous case, it is used because this tag is not used in conjunction with a closing tag. In other words, <img>content</img> is not correct XHTML. Also the content, which is a photo, is noted within the tag itself, where the portion in quotes is the filename of the photo. So the image tag is written as <img src=”file_name” />. Remember to include the extension of the image (.jpg, .gif, or .png) or the browser won’t be able to render the image. Note also that you can also specify the dimensions of a photo. For example, if I have the JPEG Photo 1 above, which is 640×480, and want to display it as a smaller image on the web, I don’t have to change the photo file but rather can change the HTML. For example the photo below is JPEG Photo 1 at 320×240 rendered using <img src=”content/media/primer3_1.jpg” alt=”JPEG Photo 1 320×480″ width=”320″ height=”240″ />. Finally, notice that I inserted alt=”JPEG Photo 1 320×480″ in the HTML code. In the event that the photo cannot be rendered, the contents of the alt attribute will appear on the web page and, in Internet Explorer, this text will pop up when the cursor floats over the image.

To quickly and easily change the dimensions of your photos, and to efficiently catalog them, you may want to try Picasa2 from Google. While Picasa allows for some basic photo editing, more intensive editing can be done using GIMP, a free Photoshop alternative. To change the EXIF and IPTC data of your photos (to note the photographer, date, location, etc), you can use Exifer. Finally, you can build simple web photo albums using Picasa or can design your own using JAlbum, one of my favorite free tools available on the web.

Audio

As with images and photos, there are a limited number of useful file types for sharing audio files on the web. Those are MP3 (.mp3), WMA a.k.a. Windows Media Audio (.wma), and MP4 (.mp4 or .m4a). [There are also the Real Audio files but I have never needed to play one, much less create one. Wave (.wave) files are also common but are appropriate only for audio clips lasting a few seconds.] Of the three, MP3 is the most popular and most digital audio players (hardware and software) can play them without a problem. WMA files are also pretty common with nearly all software and most hardware enabling playback. Unfortunately, to the best of my knowledge, Apple’s IPOD cannot play these files so you might want to consider that if you’re hoping your files will be downloaded to listen to at a later time, when the person is away from their computer. The benefit of WMA is that, according to some, the it’s compression to quality ratio is better than MP3. That means a small WMA file may reproduce a better quality sound than a comparably sized MP3. MP4, also known as AAC or Advanced Audio Codec, has the best compression of the bunch and is becoming the new standard. This means you can create smaller files while maintaining the quality of the recording. Most new software can play MP4 files and more and more hardware is designed with MP4 in mind. IPODs should be able to play MP4 files without a problem.

As with images and photos, you should be attentive to file size / bandwidth issues. MP4 files outperform others under high compression (32-64 kbps) so they are an ideal choice for streaming audio on the web. Beyond that, you’re a bit on your own. I usually experiment with my audio clips, compressing them more and more until I’ve found a good ratio of sound quality to file size.

By default, the vast majority of audio players embedded into web browsers (such as Windows Media Player or Quicktime) automatically stream audio files unless the connection is deemed to be too slow. The easiest way to link to your audio is to code according to the following model: <a href=”songtitle.mp3″>link</a>. For example, the code for this sample audio is <a href=”/uploads/resources/primer3_audio.mp3″>sample audio</a>. You can also embed audio files into your webpage but, generally, it is a terrible idea.

WavePad is a helpful free program to use in editing, tweaking, and saving audio files in different formats. I’ve also found SUPER to be useful for quickly and easily converting from one file format to another. As a bonus, it works well with video too. As a more direct link to the download, you can click here.

Video

When it comes to video, there are many file format options: MPG (.mpg or .mpeg), AVI or Audio Video Interleave (.avi), WMV or Windows Media Video (.wmv), Quicktime (.mov), Real Video (.rm or .ram), Shockwave/Flash (.swf), and MP4 (.mp4). To make things extra confusing, .avi, .mov, and .mp4 are all “container formats” which means that they provide the tag for a variety of compatible file types. For example, an MP4 video might contain video encoded in H.263 or H.264 which is also called AVC (Advanced Audio Codec) which is sometimes called Nero Digital. Interestingly, .mov files can also contain these file formats. Confused? You should be!

So which file type should you use? If you really want to be sure anyone who stumbles across your site can view the video clip(s), you’ll probably want to consider using at least two file formats. That way, you increase the odds that the viewer will already have the right software installed and won’t have to wait for any additional downloads. For practical reasons I’d suggest that at least one of the two be encoded in WMV. This is easy to do with Windows Movie Maker which comes free with (all?) Windows XP and Vista installations. My rationale is that most people in the world run Windows and therefore will already have Windows Media Player which can play .wmv files. In addition, many PDAs and other mobile media players play .wmv files. For the second video format, I’d suggest a Shockwave/Flash file (you can convert your video to this format using Super) because the vast majority of home computers have the player already integrated with their browsers.

With video, as with photo and audio, there is an inherent trade off between file size and video quality. So, the smaller you make your video with regard to pixel dimensions, the smaller your file size will be. The second factor is number of frames per second (fps). 15 fps is a bit choppy but gives a smaller file size than a smoother 30 fps. The final significant factor is the bitrate, which is the average number of bits of data per second of video. In the quality per bit department, I think you’d be hard pressed to beat H.264 (whether you use the .mp4 or .mov extension is irrelevant). Recently there has been a bunch of mobile hardware that can play these files but I’ve found that many personal computers still do not have the software to play these files. Again, you’ll find it beneficial to experiment saving your video files with different dimensions and bitrates to see where you find optimal balance for your purposes. To convert between different file formats, you won’t find a program that is more powerful or easier to use than SUPER.

Here’s a comparison of the same video at different dimensions, frames per second, and bitrates. All of these are in WMV format. Click the links to see what they look like.

You link to video file in the same way that you link to any other files, like this <a href=”videotitle.wmv”>link</a>. For example, the code for the small video is <a href=”content/media/primer3_vid_s.wmv”>the small video</a>. You will note that the video links above cause the videos to open in your multimedia player rather than in your web page.

It is also possible to embed videos in your webpage using the <object> tag, though you should only embed a video into a page if the person viewing the site is expecting the video on that page. Though it is possible to use the <embed> tag to accomplish the same task, <embed> is not technically part of XHTML. Unfortunately, when viewing pages containing <object> tags with Internet Explorer, you may get the following warning at the top of the browser, “To help protect your security, Internet Explorer has restricted this webpage from running scripts or ActiveX controls that could access your computer. Click here for options…” At which point the person viewing the website will have to click and select “Allow Blocked Content…” Unfortunately, I don’t know a way to get around this problem.

Here is the code for the embedded video above:

Enough already about multimedia files. Let’s get back to HTML and learn about tables.