Selecting Featured Images for Pages

Featured images on pages require special consideration.

Safe zone for featured images on pages. The mobile browser size will crop the left and right sides of a featured image by 193 pixels each, while the desktop browser (when sized to around 1120 or 1500 pixels) will clip the top and bottom by 82 pixels each. The result shows a safe area of 1054 x 386 pixels for a 1440 x 550 image.

Selecting a featured image

The featured image space on pages is similar to that of a billboard, about 2.5 times longer than wide. Its aspect ratio is 28:11.

In contrast, professional photographers typically shoot at at 3:2 aspect ratio, and smartphones shoot at 4:3 or 16:9.

Many photos shot at those aspect ratios can be difficult to crop in ways that look good in a page’s featured image space.

Ideally, you want to take photos with the intention of using them in the featured image space. That way, you or your photographer can shoot wide enough to accommodate the necessary cropping.

If shooting new photography isn’t possible, follow one simple rule:

Stay centered.

In our image size cheat sheet, we recommend uploading an image that is 2880 x 1100 pixels, with a minimum upload size of 1440 x 550 pixels. However, at certain screen sizes, not all of those pixels will appear.

Because the WashU Web Theme is responsive, the amount of the image that shows will vary depending on a site visitor’s screen size, e.g. large desktop, small laptop, old iPhone, new iPhone, tablet, etc.

For this reason, it’s best to pick images with a central focal point. That way your image will stay safe, with the most important part remaining visible.

Examples

Good: The images below do not have any important visual information near the edges and would most likely look okay at most, if not all, standard screen sizes.

Debatable, testing needed: The images below have important visual information near the edges, such as people’s heads, or contextual elements that may be lost while trying to protect faces.

Preparing a featured image

Follow our tutorial Saving Photos for Web for instructions on cropping and optimizing your images so they look great and load quickly. We’ve included instructions for using Photoshop as well as free web-based tools.

Testing your featured image

After you upload your image, test it at different browser sizes and on different devices. If you can’t physically test your image it on multiple devices, use a free online simulator.