For image width dimensions (in pixels) for specific uses, see typical page layout below. Click image to enlarge. A text-only list version is available at the end of this guide.
Speed is important!
Website visitors don’t care what format your images are in, they only care that they are viewable and downloaded in a timely fashion (even on slower connections). To accomplish this, images should be optimized for both speed and usability.
Image Mode: Use RGB format.
Image file format
JPG: Use this in most cases! This file type is good for saving images with millions of colors, including photographs and graphics with a variety of shades and gradients.
GIF: Best for line art/cartoon-like drawings.
PNG: Also an acceptable format, but not needed in most cases.
Please do not use other image formats on the website.
Rules for Saving Images:
- Make sure you have saved a copy of the original image, so that you can come back and edit it again later if needed. This may be a different format such as, .raw, .tiff, .png, or .psd, or it may simply be the original size of a .jpg (e.g. from your digital camera) It is especially important to save the original if layers have been added to the image or graphic file.
- .jpg files are often larger and take longer to load. However, most image editing tools allow you to select the file compression for .jpg. For example, you can choose Maximum, Very High, High, Medium, and Low. Try saving larger images under several compression settings and then test them for quality rendering and load times. Balancing quality, compression, and load times can be a judgment call depending on the particular image and the web document it appears in.
- Do not resize images using size attributes in your HTML code or Contribute. Images should be saved to the exact size you want them to be viewed on the web. Taking a large image and having it display at a smaller size not only slows down loading times but also distorts your image.
- Final web images should be saved same size at 72 pixels per inch resolution.
- An ALT tag should be used for each picture. Not only does this make your website more accessible for the blind, but many search engines index these tags as well. Contribute will require you to enter an ALT tag to describe the image when you insert it. More on ALT tags.
File sizes:
Choose the optimal size based on how you are using the image:
- For banners or header images, a file size up to 60KB is acceptable.
- For high end photographs, try to keep them to within 100KB at an absolute maximum.
List of image sizes:
Left column:
- No images– the left column is used for navigation.
Main body:
- Banners/full width photos between right and left columns: no more than 470 px wide
- Images floated in main body with wrapped text: 210px – 225px wide
- Thumbnails: between 20px x 20px – 80px x 80px
- Headshots used for staff directories, etc: around 150px – 180px wide
Right Column:
- With caption: 210px wide
- Without caption: 225 px wide