University Marketing and Communications

Using Images

Choose an image

Images used on the University website must be shot by University of Toledo Marketing department unless previously arranged and approved with your marketing strategist. 

The University of Toledo must own the rights to the images or have permission to use the images that appear on our website. You may not search the internet for images and save them to use on your webpage.

Search UToledo photos Request a photo shootPhoto Release Form

Prepare the Image

Crop and resize an image as needed before uploading it. Use Adobe Photoshop or a free source like Pixlr.  

  • Must be an accepted file type (jpeg, jpg, png)
  • Must be less than 500 KB
  • Certain web page templates have a place for images built into them. These images must be a specific size. Learn more about the specifications of template images.
  • Other common sizes include:
    • Calendar and Events: 500 x 500 pixels recommended
    • Featured Student Testimonial (blue slider) Headshot: 300 x 360 pixels
    • Headshot Bio snippet: 240 x 360 pixels
    • Program page main image: 800 x 500 pixels
    • Sliding Banner/Hero images: 1500 x 500 pixels
    • 1/4 page width (25% 25% 25% 25% snippet, 4 columns): 600 x 400* pixels
    • 1/3 page width (33% 33% 33% snippet, 3 columns): 600 x 400* pixels
    • 1/2 page width (50% 50% snippet, 2 columns): 600 x 400* pixels
      *A standard width of 600 pixels ensures the image can adapt to different layouts and devices without losing quality. Height may vary, though 400 pixels is a good default.

Name the image

  • Use short, descriptive file names
  • Must be all lowercase
  • Must consist of only letters and numbers, no spaces or special characters
  • Use a dash, not a space or underscore
  • Must include original photo ID from the university photo gallery.
  • Images of people should be named in the order: first name, last name, photo ID 

YES: john-smith-12345678-1234.jpg, mulford-library-12345678-1234.png
NO: Smith John.jpg, Mulford_Library.png

Additional Photo Requirements and Policies:

  • Images containing clip art, copyrighted or licensed content and logos, and/or medical face masks are not permitted to be used on University of Toledo web pages. For additional questions regarding image requirements and policies, please complete a web support request for further assistance from a member of the web team.

Adding alternative text Descriptions to images

It's the legal - and right - thing to do

All images or graphics on a webpage must have alternative text descriptions — or alt text — that describe the image for users with disabilities. For example, people who are blind and use screen readers can hear the alt text read aloud.

Well-written alt text also helps search engine optimization — or SEO. The better you describe images for users, the easier it is for search engines to understand the images and deliver them to users searching for images on that topic.

There’s more to writing alt text than just adding a few words to broadly describe an image.

Learn how to write alt text

Insert the image

  1. In your browser, navigate to the page on which you want to add the image. Log in to Omni CMS.
  2. To open and edit that section, click the green editable region button next to the section you want to edit. The page must be checked out to you for the editable region buttons to appear.
  3. Place your cursor where you want the image to appear. Click the "Insert/Edit Image" icon  Insert image icon  in the toolbar. 
  4. In the "Source" field, click the file chooser. Browse Button 
  5. Navigate to the "images" folder. This is where you will upload the image.
    NOTE: You have to upload the image to a folder that is specially designated for images before adding it to a webpage. If the folder does not have an images folder, ask the web team to add one by requesting web support.
  6. Select the images folder to the left and click the "Upload" button. 
  7. In the new window that appears, click the "+ Add" button, browse to the image on your computer, select it and click the "Start Upload" button.
  8. Once the photo uploads, click the "Insert" button to select that image.
  9. In the "Insert/Edit Image" window that you return to, add an alternative text description, or alt text, of the image in the "Alternative Description" field. Alt text is required for ADA compliancy. Learn more about writing alt text.
  10. Click on the "Advanced" tab to manage your image placement. Here is where you can edit the alignment of the image and add space around the image.
  11. Click the "Insert" button to place the image.
  12. Save your work by clicking the save icon.  Save button
  13. To make your edits live, click the "Publish" button. 

Image file management

Upload an Image

All images must be uploaded to a pre-defined image folder. If you do not have an image folder you will need to make a web request to have the web team create one and add appropriate permissions. Only jpg, jpe, gif and png files can be uploaded to the image folder. 

The image you uploaded is now saved in the images folder for future use. To view the images, click on the "Production" tab near the top right of the page. You will not see the image in the folder in the "Staging" tab.

Omni CMS uses a staging server and a production server. The staging server is used to create, edit and preview content privately before publishing it. The production server contains the published webpages that can be viewed publicly. Images and documents are uploaded directly to the production server.

Deleting images

Only images that appear on webpages should be kept in Omni CMS. If you no longer need an image, then delete it. This will permanently delete the image from Omni CMS. If you are unable to delete an image, request web support.

Overwriting an image

You may need to replace an existing image, such as replacing a portrait of a staff member with a newer image. To replace an existing image, name the new image the same title as the image already in Omni CMS and upload it to the same location. When uploading, select "Overwrite Existing." This will overwrite the old image with the new one. 

Last Updated: 4/4/24