Images Guide

Do and don'ts

• DO get consent in writing
• Do
•  

Resolutions: 72ppi is preferred. 150ppi is to be used for image that REQUIRE more clarity.

Landing Pages

Full width hero: 1440

Page width image: 

Basic Pages

News Pages

Full Width Banner image: 1440X440

File format: JGP or PNG
Resolution: 1280x720px 72ppi
If you are using a tool that asks about color info/settings/profiles: RGB or sRGB
Size: UNDER 1MB
Other specifications that are related to accessibility: Don't use too much text on a graphic (this is a bit subjective). Any text should have a minimum contrast ratio of 3 or 4.5 to 1 (there are checkers for this, but just go with your gut for now - a quick way to check is to turn your image black/white and see if your text is still legible). This is pretty vague guidance so, again, I say go with your gut and have fun designing something. I'll let you know if anything looks like an issue for web.

Internal pages may have abstract images, simple infographics, or icons that help tell the brand story and support the existing content on the page. Diagrams may be used to illustrate complex processes, but overly-complex images and diagrams will not be used on the website. 

There are four circumstances where you can use an image on our site: 

• The OVPR Communications team created the image
• The image was obtained under a licensing agreement—e.g. through iStock or the University of Minnesota Stock Content
• The owner/creator of the image granted permission explicitly in writing
• There is clear documentation that the image is open source or that the subject(s) in the image have granted permission to use their image

If you wish to publish the image of a person, you must obtain consent. Follow OVPR's guidelines for Obtaining Photo & Image Consent.

All images, graphics, and videos must be used with permission and cited appropriately. OVPR Communications maintains a stock photo subscription, managed by the graphic designer. If you have any inquiries regarding images, email OVPR Web at [email protected].

Descriptions & Citations

Image descriptions are useful tools to further explain an obtuse image, add commentary or provide context. Additionally, captions aide in comprehension for those with vision barriers. 

Citations should follow the Chicago Manual of Style Guide. (Note for editors: Place your image citation in the "source" field before uploading the image to Drupal.)

Layout Options

Left Alignment

This image is left-aligned on the page and placed within the body of text. Text wraps around the image and is separated by a 20px right margin (on the image). Left-aligned images should have either an image or text to the right in order to maintain visual balance.

Captions may need to be shortened in order to accommodate the limited horizontal space beneath an image.

Right Alignment

This image is right-aligned on the page and placed within the body of the text. Text wraps around the image and is separated by a 20px left margin (on the image). Right-aligned images should have either an image or text to the left in order to maintain visual balance.

Captions may need to be shortened in order to accommodate the limited horizontal space beneath an image.

Right Alignment - with a Callout Box

 

This image is right-aligned on the page and placed within the body of the text. Text wraps around the image and is separated by a 20px left margin (on the image). Right-aligned images should have either an image or text to the left in order to maintain visual balance.

Captions may need to be shortened in order to accommodate the limited horizontal space beneath an image.

 

Full Width

This image is centered on the page and expands the full width of the page body. These images should not have text or images on either side, as the primary focus is the image itself.

 
Column Placement

Two column layout:

 

 

 

 

 

 

 

Three column layout:

 

 

 

 

Full Width Image - using Image Group

This images is using the "Image Group" content type in the content editor. Captions do not appear below these images, therefore, viewing the image should not be essential to understanding critical information.