Images and Graphics

Image and Graphic Resources

Photos and graphics 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 (to explain how to place them in Drupal)
• Information Graphic Library
• Web Image Tools (for proper sizing of images)

View the image and graphic resources

Image Specifications Types & Sizes

General Specifications, which 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.
• All images must be meet accessibility requirements, as dictated by the law. To do so,
  • 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
  • Adding images to body text areas
     

  ---

  size specifications for the most commonly used image types throughout kent.edu

  • 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. Find better illustrations.

    Hero Image in Group Media Example (titles optional) -  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.

     

    Hero Image in Slideshow Example (titles required) - 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

    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.

  • Profle Image - 200x300px

    Profile photos should be sized to 200x300px. 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

    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.

    • 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.

    • Banner Image - 1500x550px

      • 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 1500x550px.

  

  ---

  Photography Guidelines

  If you are working to enhance your website by taking your own images, consider these tips.

  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.