Images

Minimum Technical Requirements

Bhc.edu is a responsive site that adjusts to different screen sizes. In order to best suit the needs of all screens, images must meet the following criteria:

• Minimum width: 800 px
• Maximum width: 2500 px
• Preferred formats:
  • Photos: jpg (60% suggested compression)
  • Graphics without background: png
  • Graphics, logos or vector art: svg
  • Additional formats may be accomodated, but will likely be converted to a compatible file type.

ADA Compliancy

Aside from logos and decorative graphics, images with copy do not meet ADA compliance standards for users with disabilities. Content will be extracted and represented in html.

Images will be assigned an alt description for use by assistive technology and screen readers. An alt description is text that describes what the image looks like.

Image Selection

Image preference is given to selections based on the following:

1. On-campus or relevent photography taken within the last four years.
2. Photography featuring student experience.
3. Posed photography.
4. Unique imagery that has low usage in other areas of the website.
5. Relevant stock photography with permission or license to publish on website.
6. Relevant logos.
7. Minimum technical requirements met.

Featured Image

The featured image is used to present a web page in search engine results, social media and on-site multiple-callout grids. It’s a highly-visible representation of the page content. These guidelines are provided for the best possible display results.

Image Ratio

The preferred image ratio is 16:9. Other acceptable horizontal ratios include 3:2, 4:3 or (sometimes) 1:1. Images outside the ratios have high likelihood of being awkwardly cropped as most treatments of the image fill the canvas and crop the remaining image. Avoid vertical images and images with high height-to-width ratio disparity (21:9, etc.).

When possible, enforce the 16:9 ratio by cropping in additional white space using a photography application to avoid unintentional scaling and cropping.

Image Selection

See preference order listed in the previous section.

Image Placement

Preferred image placement:

• Above the first h2 (full width).
• Inside the description content of a block or below the first h2 (full width).
• Split feature
• Multiple callout
• Right-aligned with copy wrap.
• Full-width with copy on top and bottom.
• Gallery placement.

Prohibited Elements

• Emoticons, emojis or icons (not part the the sites core styles).
• Media content that depicts explicit language or adult content.
• Images or media that is copyright protected or used without permission from the owner.
• QR Codes: while QR codes are useful navigation tools used for print or display media, their purpose can be achieved with a hyperlink or button.
• Content not meant for public consumption: other solutions are available for private document sharing. Any document on the website is ultimately available to the public.