Ohio University College Gate
Using Images on the Website

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

Using Military Images

In compliance with the Department of Defense Memorandum of Understanding, we are required to add a disclaimer to a caption or page where military images are used. Add the following disclaimer to the caption of the photo (or at the bottom of the page in italics if it doesn't make sense in the caption):

Disclaimer:It is not the intent of Ohio University to imply an endorsement by any service branch of the U.S. Armed Forces.

Examples:

Optimization

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:

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.

Recommended Image Sizes

The first number is the width of the image; the second number is the height.

Hero Images

  • Full: 1800px by 835px
  • Condensed: 1800px by 472px
  • White and Green: 1000px by 1000px
  • Grey Stripe: 1500px by 1000px
  • RFI: 1500px by 1000px

Web Elements

  • Featured Media: 1800 x 1000 px
  • Card Links Element: 1140px by 360px
    • will center crop anything that doesn't fit this aspect ratio
  • Image Gallery: 600 x 400 px
  • Image Slideshow: 2280px by variable height (note: height is capped at 666px and so will crop to that)
  • Image Tiles: 732px by 786px
    • will center crop anything that doesn't fit this aspect ratio
  • Image with Text Overlay: 
    • Background Image: 2280 px wide by variable height
    • Inner Circle Image: 700px x 700px
      • will center crop anything that doesn't fit this aspect ratio
  • Promo Boxes: 1400 px by variable height
  • Topic Preview: 1800 x 1000 px

Staff Profiles

Staff pages are different across the different site. Look at your existing profiles and use the same size. If you switch to the recommended size, you will eventually need to resize existing images. You should be able to obtain staff/faculty photos from PhotoShelter. 

Recommended: 400 x 600 px

View Site in Mobile | Classic
Share by: