Header Images

Hero image cropping and best practices

The hero image section, located just below the header of the university web page, is designed to create a strong visual impact and introduce the page content. To maintain a consistent and accessible experience across all devices, this section uses a fixed height and a responsive width. As a result, images are often cropped on the left and right sides, especially on narrower screens like smartphones.

Why cropping happens

The hero image must fill the entire width of the screen, regardless of device size. On wide screens, more of the image is visible; on narrow screens, the sides are cropped to maintain the correct aspect ratio and ensure the text overlay remains readable and well-positioned. This approach ensures that the introduction area of the page is visually balanced and that the overlapping text content always fits within the designated space.

Best practices for image selection

Images with important subjects (such as people or objects) placed at the far left or right edges are likely to be cropped on some devices, potentially cutting off key visual elements. The most effective hero images are those with the main subject centered or with abstract backgrounds that do not rely on edge details. This ensures the subject remains visible and the image looks good on all screen sizes. Previewing images at multiple window sizes before publishing helps ensure the subject is not lost or obscured by text or cropping.

Addressing content creator concerns

We understand the desire to use images where the subject may be positioned at the edge. However, modifying the hero section to accommodate every image layout would compromise the design’s consistency, accessibility, and user experience across the site. The current approach is a necessary compromise to ensure the site works for all users, regardless of device.

Recommendations

Choose images with the main subject in the center third of the photo, avoiding important elements near the sides.
Consider using more abstract or wide-angle images for the hero section, and showcase detailed or edge-focused images further down the page where cropping is not an issue.
If an image with a subject is essential, ensure the subject is not too close to the edges or top, and test how it displays on different devices before finalizing. By following these guidelines, we can maintain a visually appealing, accessible, and consistent experience for all visitors, while still showcasing engaging and relevant imagery.

Thank you for your understanding and commitment to high-quality web content.