Using Images and Videos on the Website

We strive to give our viewers a sense of being here, and of being in some way connected to the people, places, and things in each shot. Images used on our websites should authentically represent the diversity of our campus and promote a sense of belonging for all.

Best Practices for Images

Optimizing images for the web is important for several reasons. Smaller image files mean faster loading times, reduced bandwidth usage, and improved SEO. Optimized images also ensure consistent image quality across different devices and screen sizes. Optimizing images is a crucial step in website development and maintenance, as it helps to ensure a fast, efficient, and positive user experience. Depending on the original image size and the final recommended image size, you may need to resize, crop, and/or compress your image. When you resize an image, you are reducing the overall size of an image keeping the proportions. (If you change the width, the height will automatically adjust. If you change the height, the width will automatically adjust.) When you crop an image, you are "cutting away" part of the image. 

Compressing image files before uploading them into Drupal is important for not only CMS storage, but also to optimize page load speed.  We recommend cropping your original file to the correct dimensions/ratio, and then uploading the file to one of these services if it is over 350 KB. (If you are resizing/cropping your image in Pixlr or Photoshop, you can compress/optimize the image when saving it.)

Some free compression tools you can try include:

• Optimizilla
• TinyPNG
• Squoosh
• Compressor

Key things to keep in mind

• Images can easily be made smaller, but not larger (without pixelation). Start with the largest image you can and make it smaller for best results. In PhotoShelter, download the large version of the image and then edit it to fit the recommended image size.
• In general, images should be the smallest file size possible without degrading quality.
• Images should be saved at 72 DPI (Dots Per Inch). This the optimal for displaying while keeping a low file size.
• If you are using a large background image, be aware about anything else on the page that can slow down your website.
• Be sure you have permission from subjects and the right to use any image you upload to the web.

Don't do this

• Upload images of text or signatures, but logos are acceptable.
• Upload infographics or flyers. Content of these items should be added as readable text on the page.
• Upload images that contain sensitive data (i.e., credit card numbers, SSN, grades, etc.)

More About Alt Text

• All images must have alt text (a brief description of the image) added to the webpage.
• Alt text is a brief description (under 125 characters) of the image. This is mandatory to comply with accessibility guidelines. Alt text is used by assistive technology tools to describe the image to someone that can not see (or is not displaying) the image.
• Alt text provides context for search engine crawlers as well as for those viewing a page with a screen reader.
• Don't include the words "image of" or "photo of" within the alt text.
• Alt text for headshots should just be the person's name and title if relevant.