San Fernando Valley History Digital Library

Oviatt Library

Creating Optimized GIF Images for Web Display

View a PDF version of this page

Purpose: to create an optimized version of the archival TIFF that is more detailed than the version provided through the ContentDM database. Most frequently, a GIF will be created for maps or large-dimension items with a lot of text. The following procedure does not apply to JPEG image processing.

Make a local copy of the TIFF image, and open it in Photoshop.
Set the image view to 100% (adjust in the lower left-hand corner of the window).
Click Image > Image size to open the image dialog box.
Make sure "Constrain Proportions" box is checked.
The height and width measurements under "Pixel Dimensions" indicate the exact display size of the image viewed at 100%. You can resize the image by reducing the pixel dimensions, or by adjusting the percentage of the current size. Reduce the dimensions of the TIFF until you are satisfied the file is small enough to view comfortably, but big enough to display important details (such as legible text). You may need to resize several times before reaching the desired scale.
Click OK. Click File > Save for Web. A tabbed window will open. Click the "2-up" tab.
In the Settings box on the right, set the second box to "GIF" and the third box to "Adaptive." (See Fig. 1)
The "2-up" tab lets you compare the quality of the resized TIFF image (left) with a preview of the optimized image (right). Photoshop tells you the size of the optimized file (in kilobytes) and how long it will take to download via a 28.8kbps modem. (Note: 99% of the modem connections nowadays are 56kbps--i.e. twice as fast).
You can adjust the KB size and quality of the file by adjusting the lossy scale (0-100) and the color range (2-256).
0 lossy and 256 colors will create the largest optimized files of the highest quality.
When you're satisfied with the quality of the preview, click OK. Save the file locally, then transfer it to the V:\details folder (or ask Mary to do so). The URL for the optimized image will be
http://digital-library.csun.edu/details/FILE_det.gif.
Add this URL to the "Larger View" field in the Acquisitions Station record.

Naming protocols:
To avoid confusion, detail files in the V:\details folder will be named differently than files in the database or on the server--they're a different size and format, after all. The suggested naming protocol adds _det to the name. For example, if the original TIFF is IAMms12.tif, the optimized GIF will be IAMms12_det.gif.

Multiple details
If you are creating several detailed areas (as for example, in a large map), add a colored overlay to the JPEG image marking the boundaries of the detailed areas before importing the JPEG to the Acquisition Station. Select and copy-and-paste the detailed areas from the TIFF to create separate GIF files, and name them according to the areas you have marked out (EXAMPLE: in LSTA2, see BUSms06.jpg, which has detail files BUSms06_detA.gif, BUSms06_detB.gif, and BUSms06_detC.gif.). Add multiple detail links to the "Detailed View" field.

updated 7/18/2003 by EAA

CSUN Home Library Home Contact us Back to the San Fernando Valley History Digital Library