Skip to main content

Images Guide

Using Images in Your Website

This guide covers:

Selecting and Acquiring Images for UD websites 

While photography and graphics can greatly enhance the appearance of a web page, there are some guidelines for appropriate use of images on UD websites. For a complete description, please see the photo guidelines (pdf) from University Marketing. In general:

  • Use UD-originated photos and graphics
  • Get copyright permission for non-UD images/graphics

Copyright

Be very sure that you are not infringing on copyright. It can be tricky to determine copyright for images you find online. It's best to simply not use any image from the web in your website -- especially because such images and graphics are probably not in keeping with the University's branding guidelines. But if you must use someone else's image, be sure to get their permission and follow any copyright requirements they stipulate. You are responsible for complying with copyright law.

UNIVERSITY SUPPLIED PHOTOGRAPHY

Use the University’s photo library at creative.udayton.edu to find thousands of original, copyright-free images of University of Dayton people, places and experiences. View the “web” folder for pre-cropped photos that can simply be downloaded to your computer and used as-is or browse all the photos and select images to download and crop yourself.

Get access and user instructions for UD's photo library >>

Choosing (or Taking) Great Photos for Your Website

The best photos, from academic to campus life environments, convey the University of Dayton's sense of community, thoughtfulness, focus and vibrancy. 

Cell phone photos: It's fine to use photos taken on a phone as long as they are sharp, in focus and at high enough resolution to appear crisp on full-size screens. Note: Images taken on phones might not display in the correct rotation. See the troubleshooting section for help correcting the rotation.

Use these criteria to select or take great photos:

  • Photograph is saturated with color to communicate the University's welcoming environment. Colors and brightness on images are leveled in order to achieve a consistent look and feel 
  • Photos do not to show people wearing logos or names of other universities, revealing /inappropriate clothing, or outdated clothing. Avoid photos of people looking bored or uninterested.
  • Photos do not to show alcohol, cigarettes, litter, etc.
  • Photos are current and fresh -- e.g. don't use a photo of a building prior to renovation
  • Consider pacing and variety, i.e. displaying a mixture of subjects, so not all photos on your site are of just buildings or just people. Photos cover a variety subjects (races, sexes, ages, etc.), campus locations, etc.
  • Photos complement the page's copy as directly as possible

On a regular basis, review your photos to ensure they are still representative and appropriate – and update, if necessary.

Infographics

Infographics are used to enhance a story by supporting copy and photography. In addition, they can be used to create visual interest when an appropriate photograph does not exist. Typically, infographics are used to help visually express facts and figures. In terms of style, University of Dayton infographics should be clean and easily understood, created with bold lines and simple concepts. More information about infographics, as well as samples, can be found on the University’s brand site. Contact University Marketing with questions.

Other Graphics

The use of non-UD graphics is generally discouraged. Common webpage graphics are supplied by the Cascade templates such as arrows, boxes and buttons.

  • Do not use non-UD graphic elements to create buttons, arrows, or other web interface elements. Contact University Marketing with questions.

ALT Tags

One of the simplest ways to improve website accessibility is to ensure each image on your website has an ALT tag (alternative text for images). The ALT tag is a text description of what appears in your photo, and it is read aloud by screen reader software. ALT tags should be:

  • Brief yet clear (e.g. “Tree” is a good tag; “Oak tree” is a better tag; “50 year old oak tree with yellow leaves” is probably too much; “Picture” doesn’t describe the image).
  • Contextual (You want the words to make sense when someone can’t see the photo. If you have an image of a logo, use “University of Dayton”, not “logo”).
  • Well-written ALT tags will help your search engine rankings, as the images on your page promote and enhance your keywords.

Optimizing Images for Web Use

  1. For best results, use your favorite photo editing tool to crop, resize, and color-correct the image.
  2. Run the image through a compression tool such as imagecompressor.com to minimize the web page-load weight of the image (large image files take a longer time to load and many such files can significantly slow down a web page).
    • Your photo editing tool might provide a way to compress the image. For example, in Photoshop, choose "File>Save for Web (Legacy).
    • Try to get the file size as far below 200kb as possible without it looking grainy.
  3. Save the image with a Cascade-friendly name: lowercase, no spaces or special characters, preferably with dimension information
    • Suggested filename format: date-subject-dimensions.filextension
    • Example filename: 05232019-udchapel-800x533px.jpg

Image Dimensions and Sizes (Suggested)

While most images sizes will work equally well, some of the design modules work best with specific ratios or sizes. Please refer to the tips on each of the design module pages for suggested formats and dimensions.

Uploading Images to Cascade

To use an image in your webpage, you need to upload it to Cascade. There are two ways you can upload an image file - before you start editing a page and during a page edit. The instructions, below, describe how to do both.

Upload an Image to Cascade

  1. Prepare the image before uploading it to Cascade. This includes cropping it, leveling the colors and brightness, compressing/saving the image for web use, and giving it a web-ready filename (no capitals or spaces)
  2. Log into Cascade and navigate to your website.
  3. Go to Add Content and select Image.
  4. File Name: Don’t enter anything. Cascade will apply the filename of your image including the extension (image filenames must include the file extension such as ,jpg, .png, etc.). 
  5. Placement Folder: Set the placement folder to [your_site]/_resources/images. Always place images in a separate folder apart from your web page files. This housekeeping rule keeps Cascade tidy and easier to use.
  6. Title: Give the image a short title
  7. Skip Start Date
  8. Review date – this should be set already. You can select a different review date, if desired.
  9. You’ll now see some basic editing tools in the Edit File Contents section (crop, resize, etc.) However, the editing tools don’t work very well, so it’s recommended that you edit your images outside of Cascade before you upload them.
  10. Click "Save & Preview", then "Submit". You’ll see your image. 
  11. Click the Publish button and click "Publish". 

Upload AN IMAGE TO CASCADE WHILE EDITING A Page

If you want, you can upload an image WHILE you are editing a page. But you must follow the steps in the correct order to save yourself headaches later.

In any of the module fields where images can be used, follow these steps:

  1. Click in the chooser box to open the “Choose a File” pane. From the Post Content area, click the insert image tool and then “Choose File.”
  2. In the window that opens, click "Upload".
  3. Drag a photo from your desktop into the chooser box or click on “choose” to browse to your photo.
  4. Set the placement folder to store the image in your site's _resources/img folder.
  5. Click “Choose” in the upper right to complete the upload process. The image will now be inserted in your page as well.

Troubleshooting Image Problems

Image Not Displaying/Image is Broken on Webpage

To fix a broken image on a webpage:

In Cascade, publish the image file. Then, refresh the browser to see if the image is now displaying on the webpage. If that doesn't work, republish the web page using the image. Check the page using your browser's in-cognito mode. If that doesn't work, contact itservicecenter@udayton.edu for assistance.

Image appears Rotated or Sideways

The rotation of an image has to do with the device it was taken with and viewed on.  When taking a photo with an iPhone, for example, the orientation of the phone is recorded and stored as extra data in the image.  When the image is viewed on an iPhone compatible device (iPhone, iPad, Mac, etc.) it reads the extra data to determine what the orientation of the image should be.  An Android phone may not read the extra data so the image displays as intended.  iPhone is trying to be helpful but really it isn't.  There are two ways to fix it:  a) make sure the phone or camera is rotated the correct way when taking the photo; or b) use a tool to remove the extra data.  Caveat - we have no idea how to tell if the camera or device is rotated the correct way. Here's some more information on option b:

Images contain metadata; information such as location the picture was taken, what type of camera it was taken with, and when it was taken. Another piece of information that can be included is the orientation of the camera when the picture was taken. You can remove this metadata, called EXIF data, in a couple of ways.

  • On a Mac, the best way we found was to use a tool called ImageOptim (https://imageoptim.com/howto.html)
  • On Windows, you can right click the image, select properties, and go to the details tab. At the bottom you should see a link to "Remove Properties and Personal Information"
CONTACT

Need Cascade Help? Call or email the IT Service Center.



937-229-3888
Email