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.
You'll want to crop, resize, and optimize your images for the web before uploading them into the CMS.
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.
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).
Aim to keep your images 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).'
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 Help Desk.
Also, Adobe Photoshop is available on some computer labs on campus.
Free Online Image Optimizers
Some possible free alternatives to Photoshop for image optimization include: