Guidelines For Images

Members of the Department of Biological Sciences should follow these guidelines for generating images for posting on their Departmental Web Site. Images should be submitted by email to bioweb+@pitt.edu; movies should be delivered on a Zip disk.

What file format to use

  • Full-color images should be submitted in JPG file format; saving from most programs with a quality of "7 out of 10" (medium-high on most rendering programs) is sufficient for most images. Target a file size of 100 kb or less for rapid loading. Much larger images should be split into smaller images for sequential loading.
  • Black-and-white line drawings can be saved in GIF format, leading to smaller, faster-loading images. Use the "anti-aliasing" option on your drawing program when saving a drawing as a GIF; this minimizes the "jagginess" of the lines.
  • Animated GIF's are fine.
  • Photoshop documents should be converted to GIF or JPG prior to submission.
  • Images in other file formats (BMP, PCX, Targa, PICT, TIFF, PNG, etc) should be converted to JPG

What size to use

Images should be supplied in a size that looks good in its context. Crop images as necessary to highlight what's important. Here are the standard sizes we use:

  • Full Page Width - 600 pixels wide. This width will fill the screen on smaller monitors, so no text will appear on either side of these images. Such images will usually be 100 - 300 pixels in height, and will fil the screen on smaller monitors. Use this size sparingly, for large and complicated images.
  • 2/3 Page Width - 4000 pixels wide. This width allows for a caption to be placed on the right or left side of the image. However, text is typically not scrolled around the image, as this space will be too small on smaller monitors.
  • 1/2 page Width -300 pixels wide. This width allows for text to be scrolled around the image, even on smaller monitors. This size is appropraite for smaller, less-complicated images, but may provide insufficient detail for some complicated images which would be better displayed at 330 pixels wide.
  • Custom sizes - Images larger than 420 pixels wide will require scrolling; such large images should only very rarely be needed. Very tall images (> 300 pixels) should also be avoided unless they are thin, and can allow text to scroll next to them; remember that tall images may require scrolling to see all of it.

How to edit an image

Pay attention to the following details, especially when editing an image taken by the digital camera:

  • Cropping - Make sure the subjects of the photo are in the center, and that extraneous space is not wasted on background. Remember that these images are small.
  • Brightness - Almost uniformly, photos taken with the digital camera are too dark. Adjust the levels (not the brightness) accordingly. In Photoshop, choose "Image | Adjust | Levels", move the right-hand marker to the upper end of the level distribution, move the left-hand marker to the lower end of the level distribution, and adjust the center (gamma) control so the image appears nice and bright (but not washed out).
  • Color balance - Especially under fluorescent light, everything looks yellow. Most importantly, adjust midtones and highlights to make flesh tones look correct. In Photoshop, choose "Image | Adjust | Color Balance" and play with the controls until things look better.
  • Saturation - In many cases, the colors are muted. Go to "Image | Adjust | Saturation" to add back a little color, if necessary. But don't make things cartoony bright!
  • Glare - Often, the flash will cause unsightly glare, especially in eyeglasses. Use the Smudge Tool (the little finger) to darken these areas out. Be careful in selecting a brush That is of appropriate size.
  • Clutter - If an image is cluttered, you may use a combination of creative cropping and cloning to clean it all up. The Rubber Stamp Tool can replicate areas of the image, allow one to remove clutter (like the arm of a person otherwise cropped from the photo).
  • Selecting Areas - Often, adjustments that you make should not be applied uniformly to the entire image. If you want to brighten a subject's face, but not the whole image, select just the face. If a cold day is making a subject's face too red around the nose and cheeks, select just those areas to decrease the reds.
  • Feathering - To avoid unusual transitions when you apply changes in colors or levels to a selected area, use the Feather option ("Select | Feather...") to blend these changes in gradually around the edges of the selections.
  • Focus - Almost uniformly, images taken with the digital camera are a bit out of focus. Use the Unsharp mask to make them sharper, but not garish. Choose "Filter | Sharpen | Unsharp Mask..." and adjust the rdius and threshold to sharpen images. Be careful not to use this too much. Experiment by turning the preview on and off to see how it all looks. Do this as the last step in editing.
  • Size - When you are done, save the edited image separately from the original file. Then reduce it in size to the specifications noted above. Make sure that the cropping is consistent with the size you want (more complex photos may need a larger final size). Save the reduced image in a separate file, so you can continue to make adjustments to the original.
  • Recheck - After shrinking the image, recheck the levels; losing pixels almost always makes the image get darker as the brightest pixels are blended with darker ones.

Movies

We can post movies on the site. Here are some guidelines to follow:

  • Use MPG or MOV file formats; other conventional formats (like AVI) are less universally supported. Shockwave, RealMedia and other special formats still require plug-ins that are not found in many browsers.
  • Keep movies as short as possible; remember that these can take a long time to download over a modem.
  • All movies will be referenced as links; the length of the movie and its file size will be reported. This will allow users to choose to view the movie. We will not construct a page with an automatically loading movie.
  • Since one must link to a movie to view it, supply a reference image (like a JPG of the first frame) to be used as a hyperlink.
  • Supply a description of the movie suitable for a your target audience.
  • DO NOT submit movies by email; the large file size of movies will fill the quota for the email account and cause further mail to be rejected. Instead, submit movies on a ZIP disk or CD-R, or place it on an FTP site.

Copyrighted Materials

We cannot post images that we do not own without the prior, written consent of the copyright holder. These images include, but are not limited to, images that appear in text books, images that appear on other web sites, or even you own figures that you have published. To obtain a copyright release, contact the copyright holder and explain that:

  1. The image will be used on your Departmental Web site.
  2. The images is being used in a not-for-profit context.
  3. The owner of the image will be acknowledged with the staement, "Image used by persmission of ..."

In virtually every case, permission will be granted.

 
This Site is maintained by the Bioscience Webmaster; this page was last modified 18 June 2008