Images and Graphics | Guide to Web Standards | Kent State University

Images and Graphics

The internally facing phrase Illumination Above All should inform every photo choice for the brand. A sense of light should touch each of the photos, whether it’s illuminating a person’s face or coming through the background of the shot.

Photography Guidelines

Do:

  • Seek action shots over posed photos.
  • Think candid editorial photography.
  • Find interesting backgrounds (textures, architecture, patterns).
  • Use tasteful highlights and sun flares.

Don’t:  

  • Overly stage shots.  
  • Photograph subjects smiling at the camera.

Rule of Thumb:

  • Photograph a subject smiling or photograph a subject looking at the camera, but never photograph both.

Best Practices

  • Images should be sized according to how it would best appear on a desktop/laptop computer. Drupal will resize and crop the image on smaller devices.
  • Large hero images, due to their crop size, are narrow. Shooting loose with excess background will satisfy all items fit and allow for tighter crops if needed.
  • Photos should not include student names without their written permission.
  • Should be good quality; avoid images that have been altered or resized multiple times.  Each time a photo is re-saved the quality is diminished. Keep the original file for future edits.
  • Imagery must be consistent in size with www.kent.edu proper templates.
  • Images and graphics should be optimized for each web page and device. This includes downsizing and compressing images in a photo-editing program before uploading them. Save a progressive, if possible. (This will allow you image to load in layers rather than fill down vertically as it loads.)
  • Check the image preview to verify the focal point displays the proper crop for your image. 
  • Verify once published your images are not cropping out the main focus of the image. 

Accessibility Requirements

Images must be web accessible. It is required by federal law.

  • Files size must be less than 1 MB.
  • Alternative Text (Alt Text) must be added as an image property.
  • Images should not contain text unless absolutely necessary.  A short title and/or subtitle can be added to hero images if accompanying text is desired.
  • Text used in a graphic or image must also be included in the image alt text, or somewhere closely related to the image.

Learn more about image accessibility

Image and Graphic Resources

Photos that illustrate a sense of place and support the Kent State University Guide to Marketing are necessary throughout the website.  Several resources are provided to assist all Kent State web editors in their efforts to include compelling images on the website they maintain.

  • Kent State Photo Archive
  • Drupal Training Manual
  • Information Graphic Library
  • Images for the Web Workshop
  • Web Image Tools

View the image and graphic resources

Image Specifications Types & Sizes

Specifications

The below requirements apply to all images and graphics:

  • File size must be less than 1 MB.
  • Image pixel dimension must be equal to or larger than the image size being used.
  • Allowed file types include png, gif, jpg, and jpeg, however only jpg and jpeg should be used for Group Media.

Types

HERO IMAGE - 1500x600px

You have two options for which type of hero image you want displayed. The hero image expands the entire width of the page. If more than one is added a navigation arrows will appear.  Because the website is responsive, various image crop sizes are displayed automatically based on what screen size the device renders. The minimum size for a small feature image is 1500x600px.

  1. Hero Image in Group Media - Image(s) are added to the page as the group media. If desired, a short title and subtitle can be added to the image. This image does not link to other web content.
  2. Hero Image in Slideshow - Image(s) from another page can be added to a home page slideshow. Each slide is a separate basic page, article or event. That pages short title and/or subtitle is displayed on the image in the slideshow and the the title(s) link to it. 

Small Feature Image - 480x480px

Small Feature Image Screenshot

Interior pages can also have a small feature image above the left navigation. The minimum size for a small feature image is 480x480px.

IMAGES USED INSIDE THE BODY FIELD - longest side 450px

The image you see on this page are examples of images used inside the the body field.  Images used inside the body field must be sized and saved for web before being added to Drupal as a File for use inside the body field. The height and width dimensions will be removed so it is important that it is sized first. A 450px height or width for the longest side of an image is recommended, however you are free to chose what size you feel would look best on the page.

PROFILE IMAGE - 500x750px

profile image screenshot

Profile photos should be sized to 500x750px. If a headshot is not available, search for and select the default-profile-image.jpg in the Media Browser Library. It can be found by selecting the Library tab after selecting the Browse button.

EVENT IMAGES

featured events screenshot

Images must be added after the event is synced into Drupal.  Please note, if any changes are made to the event through the email confirmation edit link, these images will be removed because the event will be synced again; images are not synced because the do not originate from the event request submission.

Banner Image - 1500x600px

The banner image is displayed at the top of the Drupal event page.  It is the same size and located in the same area as the hero image. The minimum size is 1500x600px.

Square Image - 480x480px

The square image is displayed in the body section of the Drupal event page and, if a Featured Event, it will be the image that is used on the university event calendar page should be 480x480px.

Mosaic Menu

Mosaic menus are used throughout Kent State websites to call out points of pride, display facts about specific university programs or direct a user to a commonly requested webpage. Mosaic menus must contain either all images or all information graphics, not a mix. Specifications for each are below.

Images - 800x400px

mosaic image menu screenshot

Images used in a mosaic menu should be 800x400px. Be sure to place the crosshair on the images focal point so the menu will display the most important part of the image when it is rendered for various display sizes. 

Information Graphics - 417x417px

mosaic menu screenshot

Information graphics used in a mosaic menu should be 417x417.  

  • Information graphics are to be a single, approved color, although varying opacities may be used.
  • Graphics should be iconic in nature and use flat design.
  • Graphics must be in .gif or .png format, with a transparent background.
  • Graphic color must provide contrast with the background it's placed on.
  • View the Information Graphics Library to find approved information graphics, or to request a new graphic.