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.
Banner (< ~70KB)
Useful as a header image – used below the title – or as a break in between paragraphs.
Large Body Image (< ~100KB)
It can also be used in between paragraphs or at the end of the page. Must be centered.
Slideshows & Promos (< ~70KB)
This size is used for the slideshow in our homepage and sites like News
Two-Column Callout (< ~30KB)
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.
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.
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.
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.
Four-Column Callout (< ~10KB)
Small Profile (< ~10KB)
Used for small profile images which can be aligned left or right through the classes block_left or block_right.
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.
