Image guidelines for adaptive and fixed-height hero banners on interior pages

Hero banners are the first thing people see when they visit a page. They set the mood. They create an impression. But using the wrong image size or style can ruin the effect. Let’s make sure that doesn’t happen!

Understanding Hero Banner Types

There are two main types of hero banners used on interior pages:

• Adaptive hero banners – These scale dynamically to fit different screen sizes.
• Fixed-height hero banners – These maintain a set height, cutting off parts of the image if needed.

Each type has specific image guidelines you should follow to keep things looking great.

Image Guidelines for Adaptive Hero Banners

Adaptive banners respond to different screen sizes, so the image needs to work at multiple aspect ratios. Here’s what to keep in mind:

• Choose a flexible composition – The main subject should stay centered so it doesn’t get cropped out.
• Use a high-resolution image – At least 2000 pixels wide ensures sharpness on large screens.
• Avoid too much detail at the edges – Important elements might get trimmed on certain screens.
• Check mobile previews – Some parts of the image might disappear when the banner scales down.

Adaptive banners are great for keeping the design flexible. However, they need images that work well in multiple layouts.

Image Guidelines for Fixed-Height Hero Banners

With fixed-height banners, the height stays the same, but the width changes across different screens. This means:

• Avoid placing key elements near the edges – They might get cropped on smaller screens.
• Use a wide-format image – A ratio of 16:9 or wider works best.
• Consider background images – If text overlays the image, make sure it remains readable.
• Test on different screens – Check how the image appears on desktop and mobile.

Fixed-height banners are predictable, but they require careful image choices to prevent awkward cropping.

General Best Practices

No matter which type of hero banner you’re using, these tips will help:

• Use simple backgrounds – Busy backgrounds can make text hard to read.
• Stick to high-quality images – Blurry or pixelated images look unprofessional.
• Test your images – Always preview how the banner looks on different devices.
• Keep branding in mind – Use images that match the website’s style and colors.

Final Thoughts

A well-chosen hero image makes a huge difference. Keeping these guidelines in mind ensures your banners look professional and work across all screen sizes. Whether it’s adaptive or fixed-height, pick your images wisely and test them before going live.