Website Image Size and Format Guide

Posted June 14th, 2012 at 10:37 am.

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.

See the Drupal image positioning guide for further information on the image options available in the WYSIWYG editor/body area.

These options apply to our Drupal and Legacy sites EXCEPT for the carousels.
imageStyleGuide-drupal

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:

  • Wide slide carousel and Regular slide carousel (Drupal) true dimensions: 892px x 408px (Drupal resizes for smaller carousel)
  • Super-wide image (Drupal): 900px wide [MAX]
  • Wide image: 600px wide [MAX]
  • Images floated in main body with wrapped text: 150px – 300px wide
  • Thumbnails: 100px square
  • Headshots used for staff directories, etc:  220px square

Right Column:

  • 250px – 300 px wide

 

 

Comments are closed.