Skip UCSF navigation|About accessibility UCSF University of California, San Francisco
About UCSF
Search UCSF
UCSF Medical Center
End of UCSF navigation
Visual Design
Overview |
Layouts |
Colors |
Text |
Images
Boxes |
Tables |
Calendars |
Forms |
Downloads |

End of section-level navigation

School of Pharmacy•

UCSF School of Pharmacy

Images

  1. Use images primarily for content, which means:
    • images that people need to see
    • images that people ask to see
    • images that directly illustrate the neighboring text.
    Avoid using images as filler content which has no direct informational value. How can you tell if you have a filler image? Ask yourself: Would someone ever request or expect to see exactly this kind of image on this page? If the answer is no, you have a filler image. If you insist on using an image as filler, or if you're not sure if you have a filler image, keep it small in physical size and filesize.
  2. Crop images to fill most of its frame with interesting content.
  3. Sharpen images if needed and if they are not intentionally out of focus.
  4. Optimize your images and save them (typically) as JPEG High (60%) for photos or as GIF for line art, screen snapshots, spreadsheet charts, and nearly all computer-generated graphics. When using GIF, use the lowest number of colors that still renders the image accurately.
  5. Use only high quality images. If you look closely at a zoom level of 100% and can see JPEG artifacting, it's not high quality -- don't use it.
  6. Optionally include a single-pixel border set to rgb(153,153,153) or #999999, particularly for images that bleed very light colors to any edge.
  7. If your images contain identifiable faces, you must obtain a signed release from every identifiable person in the photo to meet legal obligations. Failure to do so constitutes a legal risk for which you may be personally held responsible. Please respect the rights of others before uploading. Contact the Associate Dean for Planning and Communications for details.
  8. Do not use background images (also known as watermarks).

Examples of where we use images:

Icons

Avoid using iconic labelling systems. This means don't use icons as navigation -- use text labels instead. Thumbnails, which are acceptable primarily for downloads, are not the same as icons.

Go To: Visual Design or Style Guide