Displaying a TIFF in a Web Page

This tutorial will show you how to display a TIFF in a web page. Web browsers can display standard image formats such as GIF, JPG, and PNG files. Unfoturnately, web browsers won't display TIFF images.

Luckily for us, we have a secret weapon called QuickTime. Beyond having the ability to play QuickTime movies, QuickTime also supports a number of image formats including TIFF, Photoshop (PSD), PICT, Targa, and more. Visit the QuickTime Tech Specs page for a complete list of supported files.

Apple's QuickTime player is available for both Windows and Mac. Foturnately, QuickTime is installed on most computers. If the plugin isn't installed on the computer, we can take advantage of the auto install feature.

Below is a sample embed tag that will load the sample TIFF image (car.tif):

<OBJECT CLASSID="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" WIDTH="100%" HEIGHT="100%"
CODEBASE="http://www.apple.com/qtactivex/qtplugin.cab">
<PARAM name="SRC" VALUE="car.tif">
<PARAM name="SCALE" VALUE="aspect">
</OBJECT>

The WIDTH and HEIGHT of the QuickTime plugin is set to 100%. This will make the plugin the same size as the web page in the browser.

The SRC attribute specifies the file to load. In our example, the file is in the same directory as the html file. If the file is in a different directory, specify the complete URL.

The SCALE parameter will specify how to scale the image. In our example, we set it to "aspect". This will maintain the aspect ratio. If you specify "1", the image will displayed in it original size.

NOTE: Because of the "Click to Activate" issue with Active X controls (ie QuickTime plugin), the image will not load until the plugin is clicked on. There is a solution for this problem. In short, the <OBJECT/> tags must be written in an external JavaScript file. Our example files below take care of this problem. To understand more about this issue, visit Apple's tutorial "Including QuickTime In A Web Page".

Demo:

Click to View Demo

Download Files (Right Click - Save Target As):

• car.tif (sample tiff)
• viewtiff.htm
• viewtiff.js

Resources:

• QuickTime Tech Specs
• Including QuickTime In A Web Page