Images-Templates and CMS - Carnegie Mellon University

Images

Images can be inserted into four general areas of a website: the wordmark or logo, the header area, the main content area, and in callout boxes.

Image Areas

All images should be in JPG, GIF or PNG format at a resolution of 72 dpi. Image sizes are restricted based on the area and page type of where the image is to be placed.

Size Restrictions

Note: The image sizes below for content areas are for websites that use a white background color; if your website uses a khaki background color, the image sizes for content areas may need to be slightly smaller. More on background colors.

Page Area Width Height
Wordmark or logo (upper left corner) 214px (exactly) Open
Header Photo 748px (exactly) Open
Main Content Area - 2 column page 670px max Open
Main Content Area - 3 column page 430px max Open
Callout Box w/Background Color 180px max Open
Callout Box w/o Background Color 219px max Open
Expand/Collapse Item - 2 column page 650px max Open
Expand/Collapse Item - 3 column page 410px max Open

Adding Images to the Content of a Page

  1. Place your cursor where you would like to add an image. Click the Insert/Edit image button.

    Add Image
  2. Click the browse icon.
    Browse for image
  3. Do one of the following:
    • Image Has Previously Been Uploaded to the CMS - Browse for the image using the folder structure. Once you locate and select the image, click Confirm.
      Browse for header image
    • Image Has Not Yet Been Uploaded to the CMS - Select the folder you'd like to upload the image. Click Upload and browse for the image on your computer and click Confirm.
      Upload header photo
  4. Enter Alternate Text (required); alternate text offers a description of the image for those with visual impairments; read more about web accessibility.
    Add Alternate Text
  5. Check This is a decorative image if the image is to be used for decorative purposes only and is not crucial to the content of the page (alternate text will not be required).
     Decorative Text
  6. Click the Insert button to add the image to the page.

Wrapping Text Around an Image

Hamerschlag Hall

You have the option of wrapping text around an image as shown in this paragraph. You may place the image to the left or to the right of the text as desired. The ideal size of the image will vary depending on the page type you choose (e.g., 2 column or 3 column page). In general, use your best judgement when determining an appropriate image size to complement the amount of text content on the page.

To wrap text around an image, follow the instructions below.

Follow the general instructions for adding an image to a page using the steps above. After the image has been added to the content, click on the image to select it and then in the Styles drop-down menu select either floatleft or floatright depending on where you would like to place the image.


Float Image Left

The image will be adjusted to the left or to the right of the text accordingly.