Main Feature Image

Types of Image Scaling

If your site has a main feature image stretching the entire width of the browser (edge-to-edge), you need to be aware of how that image responds on desktops, tablets and phones. Depending on your site design, the image might appear cropped on various screens.

Note how this image appears on a large desktop screen:

...and how the same image appears on a phone screen:This is caused by the aspect ratio which was set for desktop & mobile. The desktop screen crops the top & bottom of the image to maintain the width, while the mobile screen crops the sides to maintain the height. It works fine when the main focus of the image is kept to the central 2/3 of the frame. But if you want to include any text within your image, it's likely to hide some of the message on one or both of the screen sizes.

If you're struggling to keep everything visible, the alternative is changing the scaling of your main feature to maintain the aspect ratio regardless of the screen size. The only downside to this is how much smaller your image will appear on mobile. Here's a site configured to do just that... first, the desktop version:

...and then the mobile version:

If you'd like to discuss making this change to your site, please contact your Client Experience Manager.

Feature Variation

If your main feature has anything which overlays the image, such as the site navigation, title/description, and/or a countdown, it's best to avoid using any text within the feature images. It's also important to be aware of where those overlays appear on the screen so that key parts of your images are not covered. 

Here's an example of a site which is very selective about the images they place on the homepage to avoid any visual conflicts with the overlays (circled in pink):