Hero Images

The primary goal of formatting your images is to find the balance between the smallest file size (weight) and an acceptable quality. It’s essential that all images are as light as possible. To achieve this, images must be formatted, cropped, and optimized correctly. Please use the following guideline and steps for all images.

You must follow these mandatory guidelines

FOR EVERY IMAGE, ALWAYS Add a description in the Media Library and an alt tag in the content type when the option is available.

DO NOT: Upload images to the TerminalFour Media Library that are not optimized. Once optimized, no image should be larger than 2M.

LEARN MORE ABOUT OPTIMIZING IMAGES

DO NOT: Use images with a lot of text. Assistive content devices cannot read image content and images are often reduced on mobile devices to the point that they are a challenge to read. An image with one word or a very short phrase can work if necessary. The word or phrase in the image can be added to the alt tag which describes the image and will be read by assistive content devices.

Selecting an image

When choosing a hero image for your page, several key considerations come into play. First and foremost, the image should not only be a good reflection of Loyola’s brand identity, it should should showcase your specific site’s content. A good hero image will provide meaningful context to an audience viewing your site.

Differentiation is another key consideration. A hero should visualize what is unique about your school, department, or team. This could be a program that is not offered by any other school, geographical location, or a unique history.

Choose an image with well-balanced lighting that showcases the subject clearly.

Other tips to follow

Look for images with a centered focal point. They work well on smaller mobile devices.
Show faces when you can.
Use images with good natural color and a tonal range with good highlights and shadows.
Think outside of the box. It doesn’t have to be literal.

Students walk in many directions on the Lake Shore campus. They are all the same scale, therefore, this is not a good example of an interesting or effective hero image.

No Focal Point

This hero image example provides a great shot of campus but does not have a clear focal point. Nothing stands out. Generally, all of the people are the same scale.

A young man with glasses, wearing a blue sport coat and a red tie walks on the Lake Shore campus. He is carrying a small, black leather, business bag over his shoulder. There are many out-of-focus trees in the background.

A young female student centered in the image studies intently at a desk in the Cudahy Library. The lighting is not bright but warm and diffused.

Two School of Environmental Sustainability students work in wetlands gathering information for academic research. One student is a young man the other is a young woman. Each of the students are wearing waders as the stand in hip deep water.

Position Supports a Good Focal Point

The proceeding three examples have a strong central focal point. The backgrounds do not draw attention from the focal point and even highlight the subjects in the foreground.

Many students stand in a circle facing toward one another with their hands outstretched to the middle of the circle. The leader is wearing a bright yellow shirt and many of the students are wearing a variety of darker colored shirts.

Color Supports a Good Focal Point

Although the example above has multiple people in it, it still has a strong central focal point. Because most of the students are wearing dark colors, the young man with the bright yellow shirt stands out.

Setting the image for display on phones

When using a hero image, it can and should be set for optimum display on phones. There are a few settings to consider. One setting enlarges the image and the other two position the image.

EXAMPLES

On the left is an example of a hero image when it has not bet set for optimum display. On the right is the same hero image set for optimum display.

A grid of 16 segments wide an 9 segments high is imposed on an example of a hero image. There is a young woman with a blue shirt working in a research lab.

Choose your focal point

Imagine a grid imposed on the hero image. Like the one shown above. In the case of this hero image the young woman is the focal point. The red dot indicates the target. The red dot lands on the horizontal grid mark of 10 and the vertical grid mark of 01.

TerminalFour settings to enlarge and reposition a hero image on phone.

Select the settings

These are the corresponding settings in TerminalFour.

How to review a hero image

All internet browsers have built in setting that will emulate the page as it will appear on a phone.

WATCH A VIDEO TO LEARN HOW TO USE THIS TOOL

Each hero image will have unique settings to display the image on phones.

WATCH A VIDEO TO LEARN HOW TO CHOOSE T4 SETTINGS