Skip Navigation

Website Style Guide

Using Images in the Web

It is important to keep in mind a few rules when using images on the web. 

  • We do not upload raw images to our site. If your image is over 200KB (in the case of a large image), it probably has not been optimized for the web and should not be used in a page.
  • Our preferred file format for photos is .JPG.
  • When preparing images for the web, it is better to use Adobe Fireworks' Optimize feature. When exporting images from Photoshop, they can be up to twice the size than those exported from Fireworks.
  • If you must use Adobe Photoshop or Illustrator, use their Save for Web & Devices feature to optimize the images. This feature is accessible from their File menu or the shortcut CTRL + ALT + SHIFT + S. Try to use a quality level between 60% - 80% to keep the size of file down while not lowering the quality of the image too much.
  • Do not stretch or enlarge images.

The following placeholder images include their dimensions and recommended file size for easy reference.

Hero (< ~100KB)

Should only be used as a header image – used below the title. Any subsequent large images should be 680px ✕ 420px.

720 x 420 pixel placeholder

Useful as a header image – used below the title – or as a break in between paragraphs.

Placeholder 720x180

Large Body Image (< ~100KB)

It can also be used in between paragraphs or at the end of the page. Must be centered.

Placeholder 680x420

Slideshows & Promos (< ~70KB)

This size is used for the slideshow in our homepage and sites like News

Placeholder 420x280

Two-Column Callout (< ~30KB)

Placeholder 300x150

Medium Landscape Floated Image (< ~20KB)

Used for in-content images which can be aligned left or right through the classes block_left or block_right.

Placeholder 190x120

Medium Portrait Floated Image (< ~30KB)

Used for in-content images which can be aligned left or right through the classes block_left or block_right.

Placeholder 230x280

Three-Column Callout (< ~20KB)

Used for callouts as well as small content images which can be aligned left or right through the classes block_left or block_right.

Placeholder 190x120

Profile Slideshow (< ~30KB)

Used for profile slideshows as well as small content images which can be aligned left or right through the classes block_left or block_right.

Placeholder 190x220

Four-Column Callout (< ~10KB)

Placeholder 140x90

Small Profile (< ~10KB)

Used for small profile images which can be aligned left or right through the classes block_left or block_right.

Placeholder 120x120
 


To Align Images to the Left or Right

To properly align images in SiteExecutive you should set the class to block_left or block_right within the "Image Properties" dialog box when importing the image or by control or right-clicking an image on a page. (See image below for where to find this setting.) Relying on the SiteExecutive "Align Right" or "Align Left" controls in the tool bar will not create the correct amount space around left or right aligned images.

Setting block class