Hero Images

Hero Images typically appear as large banner images on your home page, but can be added to any page or post you want. They sometimes fill the entire width of your display, or just the full width of your content area. Sometimes Heros are foreground images and sometimes they are background images. No matter how you use them, Heros add a lot of color and interest to your pages and posts and should be chosen carefully.

Images taken with a digital camera or smart phone usually produce images that large enough, especially when using a fine quality setting. Often these images are actually too large and will need to be scaled down and optimized either in an editing program like Photoshop, or within WordPress, using the built-in editing tools.

For most full width (not screen width) images, you should scale down your image to a maximum of 1200 pixels width.

Images should always be scalled DOWN, and NOT up. Scaling up will result in degredation of the image, resulting in a grainy quality or a blurry focus. Start with the largest image you have, then scale it down to your target size.

Image Height and Cropping

First off, Hero images are almost always horizontal or in a landscape orientation. While its possible to crop a good image from a portrait oriented image, it may be very difficult.

The native proportions of digital images mean that an image that is very wide is also rather tall, and takes up too much of your screen space. That is of course, unless you want the image to fill a large vertical area, either for the pure aesthetics, or if you have text floating over the top of it. If not, then you’ll likely need to crop the image to be less tall, more of a widescreen or panorama style image. You may need to experiment with the cropping to try and get the best composition from your original image.

Hero Sliders

If you use a Slider for your Hero, then the most important things is to make sure that all images in your slideshow are the same size. This will mean checking the pixel dimensions for width and height and/or cropping all images to be the same size.

Depending on the transition effects you choose, you may also want to upload images slightly larger than 1200 pxiels in width. The “Ken Burns” effect transition for example, applies a slight zoom or magnification effect on the transition from one image to another, in addition to the cross fade. Having an image slightly larger will retain your image quality.

Heros as Background Images

If you use your image as a background and choose to have it fill the space, then the image will undergo some shifting and reproportioning to adjust to different screen sizes. This can result in some less desireable composition on smaller or even larger displays.

For the best results, when cropping your image, try tp keep the focus point of the image midline, assuming that the top and bottom may get cut from view at different screen sizes. The image below is a good example. By keeping the image centered vertically, its okay if some viewers don’t see the very top or the very bottom of the image. They’ll still be able to see a good qualiy image and will be able to recognize the instrument.

In another example, look at what could happen if you didn’t take into consideration potential cropping of your image.

The first example shows what might happen if you simply cropped the image from 800 pixels in height down to 400 pixels, cropping 200 pixels off of the top and 200 pixels off of the bottom. You would get the same result if you did no cropping at all. WordPress will simply center your image vertically in your background space. The resulting image might be okay at one screen size, but could potential end up cutting out some of the performers in the back row of this image, when the display size changes.

In the second example, we selectively crop different amounts off of the top and bottom of the image, to target the focal point of the image to be midline. This way, we can anticipate what might happen if more of the top and bottom of the image gets cropped at different screen sizes. We can control where the focus of the image is and make sure that nothing (or no one) important gets cropped out.

Positioning Background Images in the Page Builder

With some row settings and module settings in the Page Builder, you do have some control over how your background image is positioned, meaning that it doesn’t always have to accept the default behavior of being centered horizontally and vertically. You can align your background image to the top or bottom of your area or to the left or right. This makes it a little easier to control how your image will display at various sizes, without having to worry as much about cropping out something important. However, bear in mind that if you align your image to the top of your area, then the bottom could be cropped when the display is resized.

It is important to select a good image that will fit your space best, and apply cropping or positioning to get the best result at different screen sizes.

A few tips to remember:

• Don’t use an image that is too close up, like a portrait.
• Choose an image where the subject is naturally wider than tall
• Crop to keep the focal point midline vertically so important parts don’t get cropped off
• If you are using a background image behind written content, align your text away from the main subject
• Makes sure there is enough contrast between foreground text and background images
• In the Page Builder, make adjustment to paddings and margins for smaller display sizes.