Before an image is uploaded for web viewing, it should be optimized for web and devices in a photo editing program and resized (outlined below), then "saved for web". This process reduces the file size, compresses the image, and performs color correction.
Image requirments are as follows:
- RGB color space
- 72 dpi resolution
- JPG (quality set to 80) or PNG-24
- Maximum image size - 1200px width by proportional height
4x3 Image Aspect Ratio
Images should be inserted at a 4 x 3 aspect ratio to keep a consistent look and feel. This accounts for all horizontal and vertical images regardless of what the image is. (However the "page image" field is designed for an image at 570 x 300 pixels, which is a shallower aspect ratio to allow the initial page content to appear higher in the viewport.)
Full Width Default
Any image inserted into the content area will automatically fill the content area width.
The width will depend upon the column layout. Review Inner Page Columns for clarification.
3 Column Layout
- Standard image width - 600px
2 Column Layout
- Standard image width - 900px
1 Column Layout
- Standard image width - 1200px
If an image is intended to be smaller, such as a portrait, logo, or custom graphic, refer to the CSS Classes "percent" style examples.
Page Image Option
The "Page Image" option is used to place the image below page headings and above page content.
- 570 x 300
- Border - 1px solid #E1E1E0
- Image caption below image inside box - font color - #666666