Formatting Images

In the old CMS, all photos had to be sized and optimized for Web use before they could be uploaded to the CMS. In the new CMS, there are several places where users can upload their own images without sizing them beforehand.

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
  Using either the Photo Gallery template or the photo gallery feature on the basic page templates (Content, Content - Slim), you should be able to upload images directly from your computer, providing they are large enough. Medium to large horizontal images work best for these photos. At a minimum, you want an image that is at least 524x349 pixels to use the Content - Slim template and 351x234 pixels to use the Content template. If you upload an image and it looks fuzzy, the image it too small. You should remove or replace it. It is also preferred to have a caption for each image for accessibility purposes. If you upload images that are larger than the specified dimensions, you will be prompted to crop them when you Save and Publish the page.
• Feature Box
  If you choose to use the optional feature box(es) at the top of the basic page templates, you can upload images directly from your computer, providing they are large enough. Medium to large horizontal images work best for these photos. At a minimum, you want an image that is at least 327x217 pixels. If you upload an image and it looks fuzzy, the image it too small. You should remove or replace it. It is also preferred to have a caption for each image for accessibility purposes. If you upload images that are larger than the specified dimensions, you will be prompted to crop them when you Save and Publish the page. If you require assistance with an image for the feature box, contact the Web Manager.

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 instead of using the Photo Gallery feature that will display a large, horizontal photo on the right side of the page, 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. To upload a photo for use in the main content area, use the Upload New Resource button on the right side in the Edit Page interface in CMS. The photo will be added to the list of resources for that page, and then you can drag it into the content area.
• Custom Callout Sidelet
  If you decide to use the Custom Callout sidelet,

Note: See the Documentation 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.

Therefore, the current Web site standards call for creating a “full-sized” image that is 700 pixels wide for a horizontal image or 500 pixels wide for a vertical image, and labeling it as such by appending the word Full to the end of the file name. However, for each image, we also create a smaller version, 200 pixels in width, that is labeled Small and placed on the Web page. For instance, you may size an image of Jones Hall and then label the appropriate versions JonesHallFull.jpg and JonesHallSmall.jpg. Then you can insert the small version on your Web page and link it to the larger version for users who want to see the larger image.

Occasionally you may have reason to size an image differently. For instance, portraits are often sized to 150 pixels in width and labeled as such: Bweist150.jpg. Alternately, if you want an image to appear larger on a given page, perhaps as a central feature of the content, you can size and name it accordingly so it can be easily distinguished when selecting photos for inclusion on web pages: JonesHall300.jpg.

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 (as described above), the Full version 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
When adding and formatting pictures on a page, remember to place only small images on the page (which are often labeled "Small" in the file name) rather than a larger image. You can then choose to link that smaller version to a larger image if you want.

It is recommended not to adjust the image size using the Image Properties window. If the image is going to be directly adjacent to text, you likely will want to add 5 or 10 pixels of horizontal space between the image and the text by setting the Horizontal Padding, and set the Alignment field to indicate if you want the image to appear to the left or right of the text (the two most popular options).

One property you should always set for images you add to the Web is the Alt Text, or alternate text. Alt 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 Al Text. Otherwise, enter some brief but meaningful text in this field.