Formatting Images

Where Can I Upload Photos Myself?
The locations in CMS where you can upload a digital image yourself without resizing and optimizing first are:

  • Photo Gallery
    In the Photo Gallery section you should be able to upload images directly from your computer, providing they are large enough (but not MEGA huge). Medium to large horizontal images work best for these photos, but the minimum size is noted in the CMS on the Photo Gallery section. Be sure to upload into the appropriate folder.
  • Feature Box
    If you choose to use the optional feature box(es) at the top of the basic page template, you can upload images directly from your computer, providing they are large enough. Medium to large horizontal images work best for these photos, but the minimum size is noted in the CMS on the Feature Box section. Be sure to upload into the appropriate folder.
  • Content Block
    If you choose to use the Flexible Content Blocks at the bottom of the page, you can upload images directly from your computer, provided they are large enough. The minimum size is noted on the Content Block upload section, but note that your image will be cropped into a horizontal format. Be sure to upload into the appropriate folder.
  • Right-Side Flexible Image Callout
    If you choose to use the Flexible Image callout in the right column, you can upload an image directly from your computer. The size is noted on the upload section. Be sure to upload into the appropriate folder.

Where Do I Need to Modify My Photos BEFORE I Upload Them?
The locations in CMS where you need to modify your photos before uploading them are:

  • Main Content Area
    There are some cases where you may need to display an image in the content area in line with your text. For instance, some departments choose to display staff photos with their contact information. These photos must be sized and optimized before being uploaded into the CMS.

    To upload sized/optimized in the content area, put your cursor in the area you want the image to appear, then click the image icon in the formatting toolbar. Click the image browser on the right side of the URL field. Find your folder, then click Upload File at the top of the window. Click the Upload button to find and select your file. Then click Upload File button at the bottom of the window. Once your image has uploaded, you can click it once to select it, and then click the Use Selected Item button at the bottom of the window. Depending on the image size, the CMS will give you options to use the full-sized image, or Small, Medium, or Large versions, which are scaled down versions of the image you uploaded. Select the desired option and insert your image.

    Back in the Insert/Edit Image window, the image URL has now been filled in. Complete the Image Description field, and use the Class field to indicate if you want the image to appear to the left or right of your text. It won't appear that the text wraps, but if you preview or publish, it does.

 

Note: See the Resources page for an electronic version of the step-by-step instructions for sizing and optimizing photos for the web in Adobe PhotoShop products. If you don’t have a professional graphics package such as Adobe PhotoShop Elements, please contact the Web Manager for assistance with sizing and optimizing your photos.

 

Sizing and optimizing images
Before uploading an image into the CMS, it needs to be properly sized and optimized for the web. A photo can be included in a Web page and appear only two inches wide (or 200 pixels), but really be downloading a very large file. This negatively impacts the performance of the site, as the whole image has to be downloaded before the page can be displayed.

In addition, we don’t want to put extremely large images on most of our Web pages. Instead, we want to put a smaller image on the page and, if desired, give users the option to click to view a larger version.

Besides appropriate sizing, images for the web should also be optimized for Web use. If an image starts at 4000 pixels in width with high quality, it might be a 30MB file. Once sized appropriately for the Web, it might have shrunk to only 300KB. But an optimized photo of the same size might take only 30KB, and doesn’t sacrifice any visual quality that the average person can discern. The smaller the file size, the faster the performance of the Web page. Optimizing an image is generally just a matter of selecting a Save for Web option once an image has been sized appropriately.

 

Formatting an image when adding it to a Web page
It is recommended to make only minor adjustments to the image size using the Image Properties window.

One property you should always set for images you add to the Web is the Image Description, or alternate text. Alternate text is the text that appears when you mouse over an image on a PC, but more importantly, it is the text that a screen reading program reads to a visually-impaired user to make our site accessible. It doesn't have to be lengthy, but it should be something more than "photo" or just a blank. If the photo is of a person, just put the person's name in the Image Description. Otherwise, enter some brief but meaningful text in this field.