Working with Images

Selecting an Appropriate Image

When adding images to your website, it's important to keep the following things in mind.

  • Is it a high-quality image?
    • Natural color
    • Image size and shape (aspect ratio) appropriate for content type
    • File size less than 1MB (see instructions for optimizing images below)
    • Best file type for image subject (e.g. .JPG for photography, .PNG for line drawings/graphics)
  • Is it relevant and up-to-date?
    • Related to page content
    • Adds visual interest and additional context
    • "Fresh"/not old and out-of-date
  • Are we legally allowed to use the image?
    • Is it copyright protected? If so, do we have permission to use it?
    • Do you have the permission of the subjects in the image (if needed)?
      • We have permissions to use images of all faculty, staff, and students unless they opt out.
  • Does the image have an 'alt' description for accessibility?
  • Does the image have little to no text in it?
    • If there is text in the image, the text needs to be included in the 'alt' description or elsewhere on the page to meet legal web accessibility standards.

Image Editors

You'll want to crop, resize, and optimize your images for the web before uploading them into the CMS. Though, TerminalFour does have some built-in cropping and resizing abilities.

You can prepare images for the web by using an image editing software on your computer (such as Adobe Photoshop) or a web-based editor. Below are some free photo editing programs.

Optimizing Images for the Web

Providing the highest quality image content on your website requires a fine balancing act between image quality and file size. Large image files increase the load time for the page.

The goal is to have the highest quality images with the smallest file size (which will load more quickly, offering your users a better user experience, and make a positive impact on your search engine optimization).

The images on your website must be less than 1 MB in size.

Therefore, optimizing your images for the web is a very important step. Here are some resources to help:

  • Optimizing Images for Web: A Practical Guide: This blog post written by Richard Lazazzera, A Better Lemonade Stand, July 18, 2016
    This step by step tutorial on how to optimize your JPEGs, PNGs, and GIFs in Adobe Photoshop (though this blog can still be useful when using other photo editing software).

Adobe Photoshop

If you do not already have Adobe Photoshop on your university-owned machine and wish to use it for photo editing and optimizing, your department/program may be able to get a copy for your university-owned workstation through the Service Desk.

Also, Adobe Photoshop is available on some computer labs on campus (such as the Art Lab, the Mac Lab in the Administration Building, and the Media Production Center in the Library).

Additionally, if you wish to purchase Photoshop for personal use, Adobe offers a significant educational discount on Photoshop and all of the other software in the Adobe Creative Suite through Adobe Creative Cloud.

Free Online Image Optimizers

Some possible free alternatives to Photoshop for image optimization include: