Templates & Tutorials

Fermilab Web Site Style Guide

Guidelines and Conventions - Graphics

Graphics on the Fermilab web site
The Fermilab web site graphics contain similar colors and treatments for a cohesive look and feel. When creating new graphics for your section, try to make the images fit the site. Use the same blue color that is used throughout the site, as well as the same font. The RGB values for the Fermi blue are 0,51,153 or hex value #003399. The font used within the header graphics and home page images is Verdana.

Displaying images on the web
File size is important when publishing images. Here are a few guidelines to help use bandwidth efficiently:

Try to avoid using the browser to size an image. In other words, don't publish an image that is 1600 x 1200 pixels and use the height and width tags in you HTML code to size it down to 640 x 480. That image would take 4 times longer to load than if it was properly sized! The sizing operation should be done before publishing by using an image processing package such as Photoshop, Paintshop Pro, or Gimp. Here are some tips.

  • You cannot successfully enlarge or shrink a color mapped (gif) image. You will notice serious degradation.
  • If an image uses indexed colors (that is, if it has a GIF file extension), you MUST convert it to RGB before any sizing operation. Images with indexed colors do not resize well.
  • If an image is not yet in a web format (GIF or JPG), you must convert it. Here are some guidelines on which format and how much compression to use:
    • Photographic images generally compress best as JPGs. When you save an image as a JPG for the 1st time, you will have a choice of compression levels. You will usually be fine somewhere in the middle or lower middle, but a little experimentation can be helpful. Always check the saved file (and file size) in a browser and make your decision based on what you see. If you decide that you can go with a little more compression, do not re-compress the already compressed image, but go back to the original and try again with more compression. Likewise if you want less compression.
    • Simple graphic images often work best as GIFs. GIF compression works by creating a color map of 256 or less colors. It does not handle gradations in color very well and will usually display "banding" (you'll know it when you see it) on any gradated portion of an image. Also, bear in mind that graphic images created in today's sophisticated graphics programs can be full of gradations that will make them poor candidates for the GIF format.
View an example of a "photographic" image at different compression settings

View an example of a "graphic" image saved in different ways

Return to Guidelines and Conventions main page

Last modified: 03/07/2013 |