Website Graphics
Useful information on how to format and manage graphics on our website. A deeper look at common graphics sizes, aspect ratio, file formats.
Banner
Banners
Banners (also known as the "hero") are an optional page component. They can occupy most of the top area of our different content types. They are highly visible design features that are available to visually enhance the content and its presentation. Banners can be added to: landing pages, basic pages, articles, events, webforms and profiles.
Slides
Slides and banners are optional components that share the same place and dimensions. Slides place a black translucent overlay rectangle with a headline, blurb and a link button. This component is used to cycle content in a slide carrousel.
Banner & Slide Dimensions
We recommend using images with the 16:9 aspect ratio. This translates to a maximum size of 1920x1080 pixels. This image can also be 1600x900 or 1200x675 pixels as long as the aspect ratio is maintained. The site's platform manages the cropping depending on where the image appears. Banners on an article will automatically be cropped to 1920x530.
Use of Typography on Banners
Banners are an ornamental element of our web content, use of typography in the graphic should be limited and used only as a graphical element aiding the design and composition of the art. Saving text as an image or "flattening text in Photoshop" should be avoided as much as possible, as it removes the ability for a screen reader to capture that information.
Typography should be limited and not be used to convey content.
Focal Point
Focal Point (+) allows you to specify the portion of an image that is most important. This information can be used when the image is cropped or cropped and scaled by the Drupal platform to layout your pages.
JPG, GIF, PNG File formats
When deciding between JPG and GIF formats for web images, consider the following: Use JPG for high-quality photographs and photo-like images, while GIF is suitable for animation or small 8-bit images. JPG excels with photographs due to its lossy compression, while GIF is ideal for animations. More details on the difference of these formats here.
Only on Landing Pages
Carousels only appear on landing pages as a way to "feature" articles that belong to that group.
The Carrousel module also is known as the "featured news carousel." This page component pulls the banners used in the articles. The carousel aspect ratio is 16:9 which is equivalent to 1920x1080, 1600x900 or 1200x675. If your banner graphic is of a different aspect ratio, the image shown in the carousel will be distorted and cropped incorrectly.
Typography on Graphics
If possible, do not use typography on the banner graphic. If typography is placed in the lower third of the banner graphic, the overlay text would overlap the text within the image affecting legibility, thereby creating an accessibility barrier.
Images in the Content
16:9 & 4:3 Standards
When in doubt, use the two most common aspect ratios. 16:9 and 4:3. Most cameras can capture images in those dimensions. Images in the body should not be larger than the maximum width of 1920px. Other sizes that will display properly with minimal loss of quality are: 1200px, 850px. wide.
Video Thumbnails
Video typically uses the standard 16:9 ratio which translates into any of these dimensions. Safe dimensions to be used as a "screen grab" or video thumbnail can be: 1920x1080, 1600x900 or 1200x675.
Article Thumbnails
Stories are also known as the "Article" Drupal content type. They are featured on the landing page's "featured news carousel" as well as in a view on the group's news page or archive. The article thumbnail uses 440x520 or 880x1040 pixel dimensions, it can also use the standard aspect ratio (16:9) as Drupal can crop the image with the assistance of the focal point tool.
Photo Galleries
Photo galleries display a uniform grid of thumbnails automatically created by cropping their images in an aspect ratio near 16:9. The shape and aspect ratio of the images in a gallery can vary. For best results, images should not exceed the width of 1200px when shown in larger format.
Sidebar Images
Images added inside the left and right sidebars will automatically fill the width of those areas. The pixel size of the image affects the quality displayed, anything smaller than 600px wide might suffer quality loss, pixelation and/or blurring. 800px wide images display well on sidebars.
Images in the Body Area
Images can be aligned left, center, right or they can also be without alignment in the body area.
There are 7 default dimensions available and they are listed by their width: 115px, 200px, 300px, 450px, 600px, 900px and Max Width. Having a predefined set of dimensions to display images ensures consistency in our online content.
Large Images
Please do not upload images that exceed the width of 1920px and file sizes of 1Mb, and please avoid uploading duplicates if possible.
