Image Usage

Images play a vital role in enhancing content, supporting storytelling, and improving user engagement. This page outlines the various image placement options available within the Drupal environment and provides examples to help you choose the most effective format for your content.

Image Placement Options

Below are the primary ways images can be used throughout the site:

Home (Landing Page) Header image. Required. Used on the home page of each site. 3000px 2000px minimum size. To ensure effective display across all sizes, make sure the image has the intended primary information in the top half of the image area.
Page Header images: Optional. Image placed in the page header example above in the header area above. 1200px x 800px min. This page includes a page header image above.
Promo Images: Optional. Placed in promo items. 1200px x 800px min.
Inline Images: Placed directly within the body of a text block. Ideal for contextual visuals that support surrounding content. Can be square, portrait or landscape oriented. Inline Examples below.
Contact Images: Optional image for contacts 400px x 400px min.
Thumbnail Images: Used for Visual link lists (required), and news items (optional). 1200px x 800px min.

Best Practices

Use high-resolution images that are optimized for the web. Minimum recommended sizes are noted in image examples below.
All images require descriptive alt text for accessibility. Alt text should provide a clear, concise description of an image that conveys its essential meaning and context. Keep it under 125 characters, avoid phrases like “image of,” and focus on what’s most important for understanding the content. For functional images, describe the action or purpose rather than just the appearance. Aim for accuracy, relevance, and natural language without keyword stuffing.

Example: Golden retriever playing fetch in a park
Do not use text within images unless absolutely necessary for branding or design purposes, such as in a logo.
Image requirements are noted below in the examples. Regardless of final size, to ensure images are not cropped, Portrait images should have a 3:4 Ratio (ex: 1200px x 1600px), and Landscape images a 3:2 Ratio (ex 1800px x 1200px).
Promo, News, Visual Link and Event images should always maintain the 3:2 landscape ratio (ex: 1200 x 800)

Inline Images

Inline images are placed directly within the body of a text block. Ideal for contextual visuals that support surrounding content. All options for inline images are listed below.

Square Images (inline)

Square images can be floated left, floated right, block left, block centered,

Two students outside working on laptops — Square, Float Left | 400px x 400px min | 1:1 Ratio

Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.

Glass jar with pencils — Square, Float Right | 400px x 400px min | 1:1 Ratio

Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu.

Entrance Sign to Rivers St Parking Deck — Square, Block Centered | 400px x 400px min | 1:1 Ratio

Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Quisque faucibus ex sapien vitae pellentesque sem placerat.

Landscape Images (inline)

Landscape images can be floated left, floated right, block left, block centered, full column, and breakout. Examples below.

Jazz ensemble playing trumpets — Landscape Small, Float Left | 900px x 600px min | 3:2 Ratio

Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.

Arial View of Durham Park — Landscape Small, Float Right | 900px x 600px min | 3:2 Ratio

Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu.

In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere.

Student removing book from Library shelf — Landscape Small, Block Centered | 900px x 600px min | 3:2 ratio

Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere.

Sunny day with family on Sanford mall for Open House — Landscape, Full Width | 1800x1200 min | 3:2 Ratio

Campus scene of students on rock wall — Landscape Breakout | 2400px x 1600px min | 3:2 ratio

Portrait images (inline)

Portrait images can be floated left, floated right, block left, or block centered. Examples Below.

Student walking on campus in fall in front of tree with orange leaves — Portrait, Float Right | 600px x 800px min | 2:3 ration