Images

• The current DPI (resolution) requirement for all images is 72 DPI. This is set in the image editing software (typically Adobe Photoshop).

• JPG and PNG files are accepted. GIF files should no longer be used.
  • JPG files are for photos/pictures.
  • PNG files are for logos/graphics.

With the introduction of our latest page elements, the recommended dimensions may vary depending upon the use case. Please visit each of the page elements to view our recommended image dimensions. If you have further questions about the recommended image dimensions, please email the Web Team.

Faculty and staff images should be sized to 300x300 and saved as a JPG. The existing size is 100x100 and that size should only be used if the native image is smaller than 300x300. Please email the Web Team if you need assistance sizing images.

Image cropping and resizing may sound like performing the same task but there are distinct differences between the two. If you need assistance cropping or resizing images, please email the Web Team.

Cropping Images

Cropping an image involves removing a portion of the image that you don’t want to include. For example, if you have an image with a person next to a lake and if you need to remove the lake from the image, you will crop the lake out of the image.

Resizing Images

Resizing an image means making an image either smaller or larger. Typically, you will make the image smaller as increasing the native image size may cause the image to become pixelated and/or blurry.

Applying images to a page is a two-step process.

1. First, you will need to make sure that the images have been uploaded into the site images folder. Please see the instructions here.
2. Once the images have been uploaded and approved via the workflow process, you then can apply them to the site pages. Please see below for further information.

Images are applied throughout 3 different locations in the page template:

• Page Header
• Page Text Editor
• Page Element Image Field

Page Header

• Please see the instructions here.

Page Text Editor

• You can insert an image into the body copy of a page or through an element which has a body copy section.
• When editing the page, locate the editor that has the body copy toolbar (shown below).
  
  
  
  
• Click on the "Insert/edit image" icon.
  
  
  
  
• Click on the "Choose File" button.
  
  
  
  
• Browse to the location where you have uploaded the image and then click the radio button to the left of the image name.
  
  
  
  
• The image will now be selected. Next, please describe the image by entering text in the "Image Description" field. This text is read to the user if they are using a screen reader. Please ensure that this text is descriptive and concise.
  
  
  
  
  
• Click "Ok" when done.
  
  
  
  
• The image will now be inserted into the page.

Page Element Image Field

• Most of our page elements have an image field which is either required or optional depending upon the chosen page element. When editing a page, you will scroll down to the specific section for the page element and locate the field to select the image. These field names vary based on the specific page element. An example is shown below.