How to shoot for wide website hero image?

Question

I'm an in-house web developer who is in charge of the technical aspect of a companies website. I have also dabbled in photography in the past, so I do have some photography knowledge. I am also the person who does all the graphics work, and photo manipulation (though this is mostly just cropping/resizing pictures) for the site.

Our website has a hero at the top of each page that is 1005px wide by 300px high. We have been struggling to find / shoot images that can be cropped down to this size. I had a go at shooting some myself, of the company building and of staff, but struggled to take anything that really worked at those dimensions.

Then we got a professional in, in the hopes that he could do a far better job than me (I only have a kit lens, and my only decent strobe is broken, I have no lightbox either). We explained what we wanted to him and he took some decent shots - but nothing we could really use (a lot like my attempts just with better lighting).

I don't think management will be wanting to fork out to get another photographer in after the last one has come up with nothing, so I think I'll be called on to make a second attempt at shooting something.

Have any of you had to fit a brief like this? How did you go about shooting an image suitable for this kind of use? I don't want something with a too wide focal length, as these images need to look professional.

For those unfamiliar with the term hero, see this example or the "Hero graphic" Wikipedia article.

Answer 1

I think what you are missing is a concept. You essentially have a 3:1 panorama image.

The image you linked to seems to be more of a 2 to 1 ratio. But going from that image, let's copy that concept.

I see two people kissing in front of green grass and a forest in the background. In the foreground are also some other objects (branch from a tree, stones) but out of focus. Note that the background is also out of focus.

• A couple in foreground, sharp. And off to the right hand side.
• Background and unimportant foreground is blurred.
• Background is nature, almost all green with a horizon line where the forest starts.

Now, if you want to do this with employees of your company, place them to the right or left but not centre. In a group, somewhat close together. Place them in a nice scene with similar background (similar in terms of distance, angle, uniform colours). It doesn't have to be a forest. An office environment would probably make more sense.

Play with aperture to get decent background blurr but not too much. One method here is to use the Brenezir method. But just going further away (and using a longer lens) might also do the trick.

Try to get something like that and test it with some stand-in models (can be a manekin). If that looks like what you want in terms of composition, you can figure out ways to make the images look more professional.

Answer 2

Without seeing some examples of what you tried, without success, to capture it is difficult to understand exactly why you are wanting to display and why you are unhappy with the results. I'm guessing it is one of two issues that are thwarting you: resolution or composition

• Resolution. The limiting factor here isn't about how wide is the lens used. The limiting factor is how much detail you can include in a 1005x300 px image. You can use longer focal lengths to produce a wide panorama of a scene such as your company building, but when you reduce it to 1005x300 px you throw away all of the detail you gained by stitching together multiple images.

• Composition Most subjects are difficult to pull off in an image that is over three times as wide as it is tall. This is particularly true of people, since most of us are much taller than we are wide. Even a head shot that displays only a face needs a space relatively square for it to look right, and usually even there the slightly longer side is the vertical, not the horizontal one. An 8x10 portrait has a 1:1.25 ratio favoring the vertical dimension. It is virtually impossible to fit a single person into a horizontal image with a 1:3 ratio (unless they are reclined, but I doubt boudoir is what you are after). The usual solution is to place them as a relatively small element in an environment that lends itself to horizontal composition: either a landscape or an architectural setting that is primarily horizontal. That is what your example has done with the bride and groom: placed them in a horizontal landscape. The problem when you do this is that it is difficult to convey more about the people in the photo than the environment they are contained in. Your sample is rescued by the almost universal recognition that the female subject is wearing a wedding dress, the male is dressed formally enough, and the couple is in an intimate position so that the viewer draws the conclusion this is a bride and groom. But the image tells us nothing about who this bride/groom are and what is unique about them: the viewer is left at that point to fill in the blanks from their own experience. And even then the composition doesn't work because the rocks on the left are in sharper focus than the couple whose feet have been cut off to fit the artificial horizon where the field meets the trees into the scene and leave a lot of open dead space in the middle for the text.

You need to decide what you want to use the space to communicate: either the content of the text with a "background" image that doesn't detract from the text or visual information communicating what your organization represents or who you are. A possible compromise would be to offset the text to one side and place the visual focus of your image on the other (but closer to the center, rather than the bottom, of the right edge): perhaps the couple properly focused and standing in the area behind the groom's right shoulder.

Answer 3

You need a shot that will work with it. I would suggest building a frame that is those dimensions and then walk around holding it up to frame up scenes and start thinking about what works for those kinds of dimensions. Having something practical and hands on that can let you explore with those dimensions in mind should help come up with ideas for shots that will work well.

Once you know what kinds of shots you want, it should be a simple matter to capture them.

Answer 4

I think you will be hard pressed to find a decent individual shot (groups work well) for those dimensions. What I have done in the past for websites is to have the main focus whether it is a person or product on one side. Then use a gradient or layer mask in Photoshop and put some marketing type text or content on the side. Essentially, just making the human or product more of a square / rectangle instead of a super wide and skinny rectangle.

Answer 5

I don't think shooting an image is a problem here. The problem is making it in correct resolution/format and using it for the website. You can just do the following:

• Compose the image like you always have, during actually shooting it.
• Take few steps back to ensure you have a wider area than you actually imagined.
• Crop & recompose in post production (Photoshop/Lightroom)

Since this is going to be for web, I don't think every minute detail is going to matter. Web images should load quickly and serve the purpose. You coule be throwing away some details along the way but that's okay.

Feel free to drop me a message in case you're still struck. I'd be glad to help in any way I can.

Answer 6

There's no easy answer. 98% of photos will not fit. The problem is the responsive part of the question. How does the image look at the following resolutions:

• 460 PX
• 600 PX
• 800 PX
• 1023 PX
• 1200 PX
• 1500 PX
• 1800 PX

Here's how to solve the problem:

1. Use 1800 x 600 pixels (1800 is standard width now)
2. Float/Center the Hero background CSS
3. Use a transparent box in your graphics program to find subjects or portions of pictures that will work and export just a slice.

Here is an example with the 1800 x 600 size:

http://www.sunlitmarketing.com/ - This example hides the lowest 300 pixels for screen width 1024 and up.

http://www.coastalfoto.com/ - Uses 1500 x 400