WEBSITE IMAGE GUIDELINES

Using standard photo sizes and aspect ratio for the website photos will assure a unified look and scalability. All photos should incorporate an "img-responsive" style to ensure images scale depending on the users screen size.

Images used for the homepage and banners need to take in account for slight cropping depending on the users settings. Please make sure important elements such as logos and faces are allowing at least a 10% border from each edge.

One of the best design features of the new design is that there is plenty of white space to let your content shine. If you would like the largest possible images for the greatest impact, use 1200x644 as your pixel dimensions. Please do not exceed this dimension horizontally or vertically.

Maximum size

Standard Sizes

  • Homepage Banner: 1200x644 pixels
  • Banner: 1200x390 pixels
  • Program Overview: 750x402 pixels
  • Homepage Feature: 376x202 pixels
  • Thumbnail: 126x126 pixels

Banner

Overview

Homepage Featuire

Thumbnail

Making Images Responsive

In order for all broswers to correctly view an image, an "img-responsive" class must be added to the image properties. Any pixel dimensions also need to be removed in order for the image to scale properly. When editing a page, follow the directions in the photo below.

Making Images responsive

 

Naming & Location

Before images are uploaded to a CloudBucket, they should be named in a consistent manner so they may be easily found and sorted by content or size. For those dealing with many images on a consistent basis, please request access to the "htcphotos" bucket.

FILE NAMING EXAMPLES:
content_name_pixelxpixel.jpg
dental2_750x402.jpg


Last updated by jlaabs : 2015-03-02 07:54:01