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
- dimensions: 1440x440 px
- resolution: 72ppi (up to 150ppi)
- file size: under 1MB
News images:
- Header image: 1280x720 px
- In-body image: 960 px width max
- resolution: 72ppi
- file size: under 1MB
- In-body image: 950 px width max
- resolution: 72ppi
- file size: under 1MB
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.
